Figma to block

Your agency builds a client's website in your own Next.js repo. A block is one of your React components plus a small schema saying which parts the client may edit in SnabbSajt. This page is about getting from a Figma frame to that pair without building it twice.

The one-line workflow

1. The designer sends a Figma frame link.
2. In your repo, tell Claude: "gör den här framen till ett block" and paste the link.
3. Claude reads the frame through the Figma MCP, writes the component, marks the editable fields, and registers the block in your repo's block map.

That is the whole of it today, and the last step is the one to know about: there is no command yet that sends the schema to SnabbSajt. snabbsajt push merge-imports a Site Kit package, which is content going into an existing draft, and it does not touch the block map. So the block is not in the client's "lägg till sektion" list yet, and its fields are not in the editing panel. The component and the schema are written and deploy with your own app; they are waiting on the CLI call, not on you.

When that call lands, what it sends is the schema alone: field names, kinds and labels. SnabbSajt never runs, builds or copies your component.

What Claude decides, and what it asks you

It reads every text node, image fill, link, and Figma boolean and variant property in the frame, then decides one of three things per item: mark it editable, fold it into another field, or leave it out. It reports all three lists, and the middle two are the ones worth reading. A field nobody marked is a part of the page the client can never change, which is the failure this whole step exists to prevent.

It asks you only for what the frame cannot say: what the block is called in the palette, and which website it belongs to when your repo serves more than one.

The field kinds

Six, and nothing else: text, richtext, image, link, select, boolean.

• Keys are lowercase (^[a-z][a-z0-9_-]*$), so write cta_link, not ctaLink. A camelCase key is refused when the schema is registered.
• richtext is plain text with line breaks. There is no path that stores HTML, so formatting inside a paragraph is your component's job.
• A link is {href, label?} and only https:, http:, mailto:, tel: and a leading / are accepted.
• An image is {assetId, alt?}. The renderer resolves the URL before your component sees it.
• Layout choices are variants on the block, not fields. Register every variant the Figma component set offers, not only the one in the frame you were sent.
• There is no number kind and no list kind yet. A price is a text line, and three cards side by side is the block placed three times.

When the design changes

Run it again on the same frame. Claude re-reads it, compares the candidates against the schema you already registered, and changes only what moved. Bump version when a field's meaning changed, not when the styling did.

Status

The skill and the field vocabulary described here are in place. The SDK pieces this page names, defineBlock, the block map in snabbsajt/blocks.ts, the catch-all route that draws a composed page, and shipping the skill through snabbsajt skills install, are being built. So is the CLI call that registers a schema: the server mutation exists (blocks.registerBlocks) and nothing in the CLI calls it yet, which is why a block written today is ready rather than live. Until they land, this page describes the shape to write against rather than a published package.

---