figma

Join the Figma channel, select the component, then use read_my_design to extract full styling and get_styles for design tokens. Map Figma properties to Tailwind classes (fills to bg colors, auto-layout to flexbox, corner radius to rounded) and export a reference image to verify the result.

Call get_styles to retrieve paint, text, and effect styles, then convert Figma's 0-1 RGBA values to hex and map style names like Primary/500 to Tailwind keys like colors.primary.500. The references include mappings for CSS variables, Tailwind config, and W3C token JSON.

All three components must be running: the MCP server via bunx, the WebSocket bridge started with bun socket, and the Figma desktop plugin joined to a channel. You must call join_channel with the same channel name before any other tool, and verify with get_document_info.

Colors use RGBA values in the 0-1 range, not 0-255. Convert CSS values by dividing by 255, so #3B82F6 becomes r=0.231, g=0.510, b=0.965. Passing 0-255 values is a common mistake that produces wrong colors.

Yes, the code-to-design workflow creates frames with auto-layout, adds text nodes, and applies styling through tools like create_frame, set_layout_mode, and set_fill_color. Apply auto-layout properties in order: layout mode first, then padding, then item spacing to avoid conflicts.

export_node_as_image returns base64-encoded data as text, which can be very large for complex nodes. Use scale=1 for initial checks and scale=2 only for final exports, and prefer PNG, JPG, SVG, or PDF formats as supported.