Skip to main content

​
Connecting Figma

​
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
Figr only accesses connection data with your permission. You can revoke access anytime.

​
​Using Figma Frames

  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 inputFigma frame input
Colors estimated from image pixelsExact color values (#6366F1, not “purple-ish”)
Spacing approximated visuallyPrecise spacing (24px, not “about 24”)
Border radius guessedActual border radius (8px)
Typography inferredReal typography settings
Font weights assumedCorrect font weights and sizes

​
Figma vs Screenshots

When to use Figma framesWhen screenshots are fine
Your own product designsCompetitor analysis (you don’t have their Figma)
Design system componentsQuick inspiration
Screens you want to match exactlyExternal reference designs
Building on existing workLive 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
[email protected]     [Unlink]
To disconnect your Figma account:
  1. Click Unlink next to your connected email
  2. Confirm the disconnection
  3. Your Figma access is revoked immediately
You can reconnect anytime by pasting a Figma link or clicking the Figma icon.

​
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

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