Figma Source

Requirements

• A valid Figma file URL (e.g. https://www.figma.com/design/AbCdEf123/My-Project).
• A Figma personal access token with read access to that file.

How to get a Figma personal access token

1. Open Figma and click your profile avatar in the top-left corner.
2. Go to Settings.
3. Scroll down to Personal access tokens.
4. Click Generate new token.
5. Give it a descriptive name (e.g. "DesignSpec read-only").
6. Under Scopes, select at minimum:
   • File content — Read only
7. Click Generate token and copy the value immediately — Figma only shows it once.

Tip: Create a token scoped only to the files you need. Avoid using org-wide admin tokens on shared machines.

What gets extracted

The generator reads your Figma file and pulls:

• Document structure — pages, frames, and component hierarchy.
• Typography — font families, sizes, weights, and line heights from text nodes.
• Colors — fill colors, gradients, and any color styles defined in the file.
• Spacing and layout — auto-layout gaps, padding, and frame dimensions.
• Effects — shadows, blurs, and other layer effects.

All of this context is passed to the AI model to produce a DESIGN.md grounded in your actual design system — not generic guesses.

Importing your Figma file

1. Select Figma as the source type on the workspace.
2. Paste the full Figma file URL into the Figma file URL field.
3. Enter your personal access token in the Figma token field (stored in local storage for convenience).
4. Optionally set a Brand name — if left blank, the file name from Figma is used.
5. Click Run generator.

The generator fetches the file via the Figma API, extracts styles and structure, then streams a complete nine-section DESIGN.md.

Pair with Figma asset export

After generation, click the Figma Ready Assets button to download a .zip containing:

• Font manifest — lists every font family found in the file, with Google Font resolution status and CSS import URLs.
• fonts.css — ready-to-use @import statements for all resolved Google Fonts.
• SVG logos — any frames or components named with "logo", "wordmark", or "brandmark" are exported as SVG.
• Logo manifest — metadata on each exported logo node.

This package gives you everything needed to start implementing the design system in code.

Common issues

Invalid URL key

Malformed or copied share links can fail file key parsing. Make sure the URL follows the standard Figma format:

Copyhttps://www.figma.com/design/<FILE_KEY>/<FILE_NAME>
https://www.figma.com/file/<FILE_KEY>/<FILE_NAME>

Token permissions

If you get an API error, check that:

• The token has File content — Read only scope (or broader).
• The token owner has access to the file (it must be shared with you or be in your team).
• The token hasn't expired or been revoked.