Design Systems for AI Collaboration 2/2 — Testing a Full Workflow from Figma Make to GitHub and Vercel with Cursor
- Joseph Chen
- Nov 20
- 3 min read
Test this app on Vercel:
1. Planning the Figma Make → GitHub Setup
For this small experiment, I wanted to understand how Figma Make, GitHub, and Cursor could work together.
The idea was simple: let Figma Make's built-in sync with GitHub feature generate a front end, and then use Cursor to build the backend on another branch to merge and handle updates.
This separation would allow visual changes to stay inside Figma Make's GitHub main branch, while logical and functional changes live in another branch.
To test this, I set up a clean GitHub repository and synced the Figma Make project into it.
The goal wasn’t to build a large system, but to confirm that the generated components, variables, and layout logic could be version-controlled and reused without breaking.
With this in place, Cursor could step in to generate the backend and connect everything together.
2. Designing a Minimal Backend with Cursor
Since this app doesn’t require complex features, the backend could stay very lightweight.
All it really needs to do is fetch FX and crypto prices, apply simple rate limiting, and serve clean data to the front end.
Cursor was a good fit for this step — it could check the synced code from Figma Make, and generate a small backend that matches the structure already in GitHub.
I approached this part experimentally. Instead of building a full system, I asked Cursor to create only what was necessary: a couple of API endpoints, basic rate limiting, and predictable data formats.
Once the endpoints were created, they were committed back to GitHub so both sides of the project stayed aligned.
3. Deploying the App on Vercel
Once both the front end (from Figma Make) and the minimal backend (from Cursor) were in GitHub, deployment became mostly a matter of choosing the simplest hosting option. For a small experimental app like this, no authentication, no database, just API routing and UI rendering, Vercel felt like a straightforward choice.
This deployment wasn’t meant to be final or optimized; it was more of a sanity check.
I wanted to see whether a design-driven workflow could move from
Figma → Make → GitHub → Cursor → Vercel
The result was surprisingly smooth, and seeing the first functional version online made the rest of the testing much easier.
Test this app on Vercel:
4. Verifying the Update Loop
With the app deployed, the next step was to test how updates would move through the workflow — from design changes in Figma Make, back into GitHub, and then into the running app.
I started by modifying a small part of the UI in Figma Make.
Change the font for numbers and smaller text from Pixel Sans to Ubuntu Mono for better readability.
Rearrange the layout for the calculate modal so when active on mobile, the keyboard won't block the interface.
Manually adjust the border radius and color contrast.
After some design QA on Figma Make and on the Figma site, I ensured everything was working as expected, then published to the synced GitHub branch and performed a PR to merge this branch into the development branch, which is currently auto-deployed to Vercel.
The loop worked, but updating designs in Figma Make isn’t as smooth as I expected.
When I try to import a design frame as a reference, Figma Make often fails to capture the frame details.
In many situations, it would actually be easier to just provide a screenshot. However, for this case, updating the design through Cursor makes more sense, since Figma’s strength lies in visual interaction. If the goal is to iterate with prompts and preview the results locally, Cursor is usually faster—and likely consumes fewer tokens. For this project, I used up all 3,000 Figma tokens on about 70 prompts.
I do hope Figma will improve the sync and integration of design tools within Figma Make, so that designers can fully leverage AI while continuing to work with the skills they’ve already built in Figma.
5. Conclusion
Overall, this experiment showed that Figma Make, GitHub, and Cursor can work well together. The real limitation isn’t the workflow itself, but the fact that Figma Make still can’t bring generated code back into Figma for editing. Because of that, the process feels a bit disconnected.
If Figma Make one day integrates more deeply with Figma’s full design tools, that would be amazing. Designers would finally be able to use the skills they’ve built in Figma while working with AI-generated code in the same place.
