How to use it with Claude Code

1. Duplicate the file and connect the Figma MCP.

In the terminal, inside your project:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Open a new Claude Code session, type /mcp and authorize your Figma account.

2. Name what you are handing off.

Claude Code reads layer names. A frame called Card / Guide says what it is; one called Frame 12 says nothing. Use the components in this file and change only their properties.

3. Ask for the variables.

Select the frame, copy its link (right-click → Copy link to selection) and ask:

Use get_variable_defs with this link and write tokens.css with the same names: color/texto becomes --color-texto.

For dark mode, copy the link of the «Oscuro» (dark) block of the same component and ask:

Use get_variable_defs with this link and put those values in @media (prefers-color-scheme: dark), with the same names.

4. Ask for the design.

Use get_design_context with this link and build the component using only the variables in tokens.css. If one is missing, tell me instead of inventing a color.

5. Check contrast in both modes.

Measure the contrast of each text against its background, in light and dark: 4.5:1 for text and 3:1 for borders and focus.

The Variables page has the measured values; if you change a color, measure it again.