Skip to main content
Design handoff usually means a designer drops a link in Slack and an engineer spends the next hour translating spacing, tokens, and component names by hand. This walkthrough connects Revolte directly to a Figma frame so it can read the design and implement it against your actual codebase.

Connect Figma (One-time setup)

In Figma, go to Settings → Security → Personal Access Tokens → Generate new token and enable:
  • current_user:read
  • file_content:read
  • library_asset:read
  • library_content:read
  • file_dev_resource:read
Then in Revolte, go to Extensions → Figma, paste the token, and submit.
Figma connected in Revolte's Extensions panel
Any file you have access to in Figma is now available to reference in future sessions.

Share the frame and describe what you need

Open a revolte session in the repo and point at a specific frame rather than an entire file, and describe the implementation constraints up front.

Revolte extracts, builds, and verifies

Revolte reads the Figma frame, maps the design to your codebase, implements the components, then opens the app in a browser to check the result visually.
  • Reads the frame — Pulls the component tree, design tokens (colors, spacing, radii), typography, and auto-layout properties straight from the specified frame.
  • Maps tokens to your system — Matches Figma colors and spacing to the closest values in your existing design system instead of hardcoding raw pixel values.
  • Builds the components — Implements the UI following your project’s existing patterns, reusing shared components wherever the design already matches.
  • Checks it in the browser — Starts the app locally, navigates to the new page, and compares it against the Figma frame at multiple viewports.

Continue iterating

Since the session already has context on both the repo and the frame, you can refine with short follow-ups instead of re-explaining the task:
  • “Use the existing Button component for all primary actions.”
  • “Implement the hover and active states from the design.”
  • “Add loading and error states to this page.”
  • “Match the mobile layout shown in the frame — it collapses to a single column.”

​
Tips

  • Link individual frames instead of whole Figma files — it keeps the context focused.
  • Call out components you expect to be reused if your design system has established patterns.
  • Include interaction and accessibility requirements in the initial prompt; they’re easy to miss otherwise.