From Figma to Code
Open any design you have made in Figma. What you see is a collection of nested frames, text layers, and shapes. Every one of those has a direct equivalent in HTML and CSS. The translation is more mechanical than creative — once you know the mapping, it becomes fast.
Reading a design layer by layer
Section titled “Reading a design layer by layer”Take a simple profile card: a photo, a name, a short bio, and a “View Work” button. In Figma it might look like this in the layers panel:
flowchart TD Card["Card (Frame, white fill, rounded corners, shadow)"] Card --> Avatar["Avatar (Rectangle or Image, circle clip)"] Card --> Name["Name (Text, bold, 20px)"] Card --> Bio["Bio (Text, regular, 14px, grey)"] Card --> View["View Work (Frame, purple fill, white text)"]
Translating this to HTML is straightforward:
- Card frame →
<div class="card"> - Avatar →
<img src="..." alt="..."> - Name text →
<h3> - Bio text →
<p> - Button frame →
<a class="btn" href="#">
Using Figma Dev Mode
Section titled “Using Figma Dev Mode”Switch to Dev Mode (the </> icon at the top right of Figma). Click on the card frame. You will see:
- Width/height — maps to CSS
width/heightor just let content determine height - Fill — maps to
background-color - Corner radius — maps to
border-radius - Effect (shadow) — maps to
box-shadow - Padding — maps to CSS
padding - Gap (auto-layout) — maps to CSS
gapin a flex container
Click the Name text layer. You will see font-size, font-weight, line-height, color. Copy those values directly into your CSS. Dev Mode eliminates guesswork.
The card in code
Section titled “The card in code”Here is the card design translated to HTML and CSS. Click inside and experiment — try changing the name, the bio text, or the button color.
Try editing the card: change border-radius: 12px to border-radius: 0 to see a sharp-cornered version. Change #7C3AED to #059669 for a green button. These are exactly the values you would find in Figma Dev Mode.