Figma to Code

Overview

This skill converts Figma designs into production-ready frontend components. It extracts layout structure, spacing, typography, colors, and interactive states from designs and generates clean, responsive code using the team's existing tech stack and design system.

Instructions

Getting Design Information

There are three ways to receive design input:

1. Figma URL — Extract via Figma REST API:

   curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
     "https://api.figma.com/v1/files/<file_key>/nodes?ids=<node_id>"
   

   Parse the JSON response for layout, styles, and component structure.