> ## Documentation Index
> Fetch the complete documentation index at: https://docs.revolte.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Turn a Figma Design into Working Code

> Connect Figma to Revolte and turn a design frame into UI code that matches your project's components and conventions.

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.

***

<div class="dotted-steps">
  <Steps>
    <Step title="Connect Figma (One-time setup)" icon="plug">
      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.

      <div style={{ display: "flex", justifyContent: "center" }}>
        <img src="https://mintcdn.com/poddle-54594c3d/7-sgm7FFY0gXaon3/image-v2/integrations/figma-1.png?fit=max&auto=format&n=7-sgm7FFY0gXaon3&q=85&s=732fda71c993ef282581528b36bd32b2" width="600" alt="Figma connected in Revolte's Extensions panel" data-path="image-v2/integrations/figma-1.png" />
      </div>

      Any file you have access to in Figma is now available to reference in future sessions.
    </Step>

    <Step title="Share the frame and describe what you need" icon="terminal">
      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.

      ```text theme={"dark"}
      Implement the pricing page from this Figma frame:
      https://figma.com/file/abc123/Pricing-Page

      Requirements:
      - Reuse existing UI components wherever possible.
      - Follow our design system, Tailwind config, and project conventions.
      - Match layout, spacing, typography, and styling shown in the design.
      - Ensure the page is fully responsive across desktop, tablet, and mobile.
      - Only create new components when a suitable one doesn't already exist.
      - Wire the page into the appropriate route.

      Verification:
      - Run the app locally and check the implementation.
      - Capture screenshots at desktop, tablet, and mobile widths.
      - Compare against the Figma design and fix any visual differences.
      ```
    </Step>

    <Step title="Revolte extracts, builds, and verifies" icon="sparkles">
      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.
    </Step>

    <Step title="Continue iterating" icon="repeat">
      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."
    </Step>
  </Steps>
</div>

***

## 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.

## Related

* [Quick Start](/quick-start)
* [Build APIs from a Spec](/use-cases/api-from-spec)