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

# Figma Input

> Help Figr understand your existing design work more precisely than screenshots.

Figma input helps Figr understand your existing design work more precisely than screenshots. A screenshot shows what something looks like; a Figma frame carries structure, so Figr can understand how the design is built.

Use Figma input when you want Figr to understand components, layout, typography, spacing, colors, variants, design patterns, or existing product screens.

Good use cases:

* Use an existing screen as context
* Match a design system
* Redesign a product area
* Generate new screens in the same visual language
* Export generated screens back to Figma

<Tip>
  - Share focused frames, not massive unorganized files
  - Include the closest existing product screens
  - Include component examples if visual consistency matters
  - Make sure Figr has access to the file
</Tip>

## Bring in a Figma frame

<Steps>
  <Step title="Paste your Figma link">
    Add the link to the frame or file you want Figr to use.
  </Step>

  <Step title="Open Figma Sync">
    Use the Figma Sync plugin to connect the file to Figr.
  </Step>

  <Step title="Import the frame">
    Select and import the frame so Figr can read its structure and patterns.
  </Step>
</Steps>

<Frame caption="Paste a Figma link, open Figma Sync, then import the frame">
  ![Figma frame selection and import into Figr](https://placehold.co/1600x900/EEEEEE/31343C?text=05-04-figma-input.png)
</Frame>

<Note>
  \[VERIFY: confirm the current Figma access flow, frame selection behavior, and error states.]
</Note>