Figma
Import designs from Figma and turn them into working React components. The integration uses OAuth2 to access your Figma files, fetch top-level frames with thumbnails, and import them as structured data for code generation.
Connecting Figma
Open the Design Panel
In the editor, open the design panel (left sidebar) and go to the Image tab.
Authenticate via OAuth
Click Connect Figma to start the OAuth2 flow. Lyna requests two scopes:
file_content:read: read file content and design data.file_metadata:read: read file names, thumbnails, and project structure.
Browse Your Files
After connecting, navigate through your Figma team and project hierarchy to find the design you want.
Lyna caches Figma API responses server-side with LRU and rate limiting. If you update a design in Figma and the import shows stale data, cache diagnostic and clear endpoints are available.
How Import Works
- Lyna fetches the file and shows top-level frames with thumbnails.
- Select the frame or component you want.
- Click Import. Lyna downloads the frame as a
.figma.jsonfile plus a.pngthumbnail. - The AI analyzes the design data and generates React components with Tailwind CSS.
What gets captured:
- Layout: Figma auto-layout and frames become flexbox/grid CSS.
- Typography: text styles map to Tailwind typography utilities.
- Colors: extracted and mapped to Tailwind classes or CSS variables.
- Spacing: padding, gaps, and margins translate to Tailwind's spacing scale.
- Images: downloaded and included from the Figma file.
Figma-to-Chat Workflow
You can also use Figma designs as context in AI chat:
- Paste a Figma frame URL into the chat input.
- The AI fetches the design and uses it as visual reference.
- Ask the AI to implement it, modify it, or create variations.
Good for iterative design-to-code work where you want to discuss changes before generating code.
Supported Features
| Figma Feature | Lyna Output |
|---|---|
| Auto-layout (horizontal/vertical) | Flexbox with Tailwind classes |
| Constraints and sizing | Responsive width/height utilities |
| Text layers | Tailwind typography (font-size, weight, line-height) |
| Fill colors | bg-* and text-* classes |
| Borders and shadows | Border utilities and shadow classes |
| Component instances | React components with props |
| Images | Downloaded and embedded as <img> tags |
Limitations
- Interactions and prototyping: prototype transitions are not imported. Add interactivity after import.
- Complex vector graphics: intricate SVG artwork may need manual cleanup.
- Figma plugins: plugin-generated content may not be fully supported.