FTC - Figma to Code

Create prompts for AI assistants to generate code from Figma designs.

This extension extracts the design data from a Figma file and creates a prompt for an AI assistant to generate code from it. The extension is framework agnostic, so it can be used with any AI assistant in any project. At least in theory.

For support, email me at hello@petrusholm.com.

Setup

Get a Figma Personal Access Token

1. Go to your Figma Settings
2. Scroll to "Personal access tokens"
3. Click "Create a new personal access token"
4. Give it a name and click "Create token"
5. Copy the token

For detailed instructions, see the Figma API documentation.

Configure the Extension

1. In VS Code: Cmd+Shift+P -> "Figma: Open Settings"
2. Edit settings you want

Usage

1. In Figma, select a component or frame
2. Right-click -> "Copy/Paste as -> Copy link to selection"
3. In VS Code: Cmd+Shift+P → "Figma: Import Component"
4. Paste the Figma URL
5. The prompt is copied to your clipboard and your AI assistant opens
6. Paste the prompt to generate the component

Requirements

• Figma subscription (Free won't do)
• AI Assistant of your choice. Built-in support for Claude Code and Cursor, but feel free to paste the output anywhere.

Troubleshooting

"Figma API token not set"

• Add your token in VS Code Settings → Extensions → Figma to Code

"Invalid Figma URL"

• Ensure you copied the link from a specific component/frame, not the entire file
• URL should contain node-id= for best results

Prompt is too large

• Select a smaller component or frame in Figma
• The extension limits depth to 3 levels to keep prompts manageable

License

See LICENSE.md for license information.