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

> Connect Figma and paste frame links directly into Figr. Get exact design values instead of assumptions from screenshots.

## Connecting Figma

<iframe src="https://www.youtube.com/embed/x69Dj2VurAQ" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

### First-Time Setup

1. Click the Figma icon in the query box, or paste a Figma link
2. The **Connect to Figma** modal appears
3. Click **Connect to Figma** (purple button)
4. You'll be redirected to Figma's authentication page
5. Authorize Figr to access your files
6. Return to Figr with your account connected

### What Figr Accesses

```
Permissions:
✅ Read-only access to your files
✅ Process frames as input only
❌ Cannot edit your Figma files
❌ Cannot delete anything
❌ Cannot access files you don't share
```

<Tip>
  Figr only accesses connection data with your permission. You can revoke access anytime.
</Tip>

## [​](#using-figma-frames)Using Figma Frames

### Paste a Frame Link

1. Open your Figma file
2. Select the frame you want to share
3. Copy the link (right-click → Copy link, or ⌘L)
4. Paste directly into the Figr query box (⌘V)
5. Figr automatically detects and attaches the frame

## Why Figma Input Matters

Screenshots lose information. When Figr analyzes an image, it estimates colors, guesses spacing, approximates radius values. Close, but not exact. Figma frames give Figr the real data.

Exact hex values. Precise spacing in pixels. Actual border radius. Real typography settings. No guessing, no approximation. Figr reads your design file directly and uses the true values.

| **Screenshot input**               | **Figma frame input**                            |
| ---------------------------------- | ------------------------------------------------ |
| Colors estimated from image pixels | Exact color values (`#6366F1`, not "purple-ish") |
| Spacing approximated visually      | Precise spacing (`24px`, not "about 24")         |
| Border radius guessed              | Actual border radius (`8px`)                     |
| Typography inferred                | Real typography settings                         |
| Font weights assumed               | Correct font weights and sizes                   |

***

## Figma vs Screenshots

| **When to use Figma frames**      | **When screenshots are fine**                    |
| --------------------------------- | ------------------------------------------------ |
| Your own product designs          | Competitor analysis (you don't have their Figma) |
| Design system components          | Quick inspiration                                |
| Screens you want to match exactly | External reference designs                       |
| Building on existing work         | Live product captures                            |
| Maintaining design consistency    |                                                  |

***

## Managing Your Connection

### Check Connection Status

Your Figma connection status shows the linked email and an option to unlink.

```
Figma account connected
your-email@company.com     [Unlink]
```

### Unlink Figma

<iframe src="https://www.youtube.com/embed/cOpHcEtINi0" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

To disconnect your Figma account:

1. Click **Unlink** next to your connected email
2. Confirm the disconnection
3. Your Figma access is revoked immediately

<Tip>
  You can reconnect anytime by pasting a Figma link or clicking the Figma icon.
</Tip>

### Switch Accounts

To connect a different Figma account:

1. Unlink current account
2. Paste a new Figma link
3. Authenticate with the new account

***

## Best Practices

<AccordionGroup>
  <Accordion title="Share Specific Frames">
    Don't paste entire file links. Select the relevant frame.

    * Link to specific dashboard frame
    * Link to component you want to match
    * Link to the exact screen you're extending

    **Avoid:**

    * Entire file links without context
    * Page links with dozens of frames
    * Outdated frames that don't reflect current design
  </Accordion>

  <Accordion title="Combine with prompts">
    Frame alone doesn't tell Figr what you want. Add context.

    ```
    Good prompts with Figma frames:

    "Match this dashboard style but create a 
    settings page with these sections..."

    "Use the card component from this frame 
    for a new feature announcement layout"

    "Keep this navigation pattern but redesign 
    the content area for data visualization"
    ```
  </Accordion>

  <Accordion title="Use for Design System Setup">
    Figma frames are ideal for setting up your design language. High-value frames to share:

    * Style guide or design tokens page
    * Component library frames
    * Pattern documentation
    * Recent approved designs
  </Accordion>
</AccordionGroup>