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 — A link such as https://www.figma.com/design/Kp7dRw2xLm9QeTz4uVn8Ys/Billing-Dashboard?node-id=1289-4127 carries the file key (Kp7dRw2xLm9QeTz4uVn8Ys) and the node id (1289-4127, written 1289:4127 in the API). Read it one of two ways: