Working from a Figma design

If you have a design in Figma, Claude can read it and build matching pages. There are two routes: the Figma web service (needs a token) or a local .fig file (no token).

Which route?

	Token (`slb_import_figma_assets`)	Local file (`slb_read_fig`)
Needs	Figma token, internet	A `.fig` file on your computer
Rate limits	Yes	None
Images	Downloads exported assets	Extracts images from ZIP-format `.fig` files
Vector shapes to SVG	Via export	Not converted

Use a Figma token

In Figma open Settings > Security and create a personal access token with read access to files.
Add it to the .env file in the mcp folder:
```
FIGMA_TOKEN=your-token-here
```
Restart Claude Code.
Ask Claude for a dry run first. It lists what it would download without downloading.

Do a dry run of importing assets from this Figma file: https://www.figma.com/design/... Only the frames named Home and Product.

You can limit the import to certain frames (node IDs) and to certain kinds of asset.

Treat the token like a password. Do not share it or commit it.

Rate limits

Figma limits how fast a token may make requests. If Figma answers "429" (too many requests), the tool waits and tells you. Take a break, narrow the import to fewer frames, or switch to the local file route.

Use a local .fig file

In Figma choose File > Save local copy and save the .fig file.
Ask Claude to list the frames first, then to read one.

List the frames in C:\designs\shop.fig, then read the Home frame and extract its images to C:\designs\images.

Without a frame name it lists frames. With a frame name it reads that frame. Images are only extracted from ZIP-format .fig files.

Then build

With the design read, follow The recommended AI workflow. Mention in the brief that the source is Figma so Claude takes colours and spacing from it.

Tip. Name Figma frames clearly (Home, About) and give Claude one page at a time for best results.