Intermediate6 min readShare
Was this chapter helpful?
Share
How to take a design from Figma and describe it to your AI coding tool. Bridge the gap between what a designer creates and what AI builds.
A designer shares a Figma link, a screenshot, or a PDF mockup. This is your reference for what the final product should look like.
Look at spacing, colors, fonts, and layout. Note what's consistent — do all cards have the same padding? Are headings the same size?
Don't try to describe the whole page at once. Break it into sections: hero, features, testimonials, footer. Describe each one.
Put the design and your site side by side. Tell AI what's different: 'the padding needs to be bigger' or 'the font is too small.'
Vague prompts give vague results. Here's what happens when you include real design details:
"Make it look nice"
"Use Inter font, 48px bold heading, #5046E5 accent, 80px section padding, 12px border radius on cards"
"Add a hero section"
"Centered hero with headline in Inter Bold 48px, subtitle 18px #6B7280, purple CTA button (#5046E5), white bg, 80px padding"
"Build a card grid"
"3-column grid, 16px gap, cards with 24px padding, 12px radius, subtle shadow (0 2px 8px rgba(0,0,0,0.06)), white background"
When looking at a Figma design, these are the things to note and describe to your AI tool:
Click any element in Figma → look at the 'Fill' section on the right. Copy the hex code (#5046E5). Note primary, secondary, and background colors.
Example: Primary: #5046E5, Background: #FAFAFA, Text: #1A1A3E
Click text in Figma → look at the 'Text' section. Note the font family, size, and weight. Google the font name to see if it's on Google Fonts.
Example: Headings: Inter 32px Bold, Body: Inter 16px Regular
Select an element → Figma shows padding and margin values. Note the consistent spacing between sections, cards, and elements.
Example: Section padding: 80px, Card padding: 24px, Card gap: 16px
Count columns, note alignment (centered vs left), and describe the grid structure. Is it 2 columns? 3? Full-width or contained?
Example: 3-column grid, max-width 1200px, centered
Click a card or button → check the corner radius in Figma. Rounded corners make things feel modern.
Example: Cards: 12px radius, Buttons: 8px radius, Avatars: full circle
Look for subtle shadows on cards, modals, or dropdowns. Figma shows shadow values in the 'Effects' section.
Example: Cards: 0 2px 8px rgba(0,0,0,0.08)
Before you start prompting, extract these six things from the design. The more specific you are, the closer AI will get on the first try:
Primary, secondary, accent, background, text colors. Example: #5046E5, #F9FAFB, #1A1A3E.
Heading and body fonts, their sizes, and weights. Example: Inter Bold 32px for headings, Inter Regular 16px for body.
Section padding, card padding, gaps between elements. Example: 80px section padding, 24px card padding, 16px gap.
How rounded are the corners? Example: 12px for cards, 8px for buttons, full-circle for avatars.
Any box shadows on cards, modals, or buttons. Example: 0 2px 8px rgba(0,0,0,0.08).
How many columns? What max-width? Centered or left-aligned? Example: 3-column grid, max-width 1200px, centered.
The secret to getting AI to match a design: be specific about structure, spacing, and visual details. Here's a template:
Section: [Hero / Features / Pricing / etc.]
Layout: [Centered / 2 columns / grid]
Content: [Headline text, subtitle, button labels]
Colors: [Background #___, text #___, accent #___]
Typography: [Heading size, body size, font name]
Spacing: [Padding, gaps between elements]
Details: [Border radius, shadows, hover effects]
Don't describe the whole page. Do the hero first, get it right, then move to the next section.
Put the Figma design and your site side by side. Spot the differences and describe them specifically.
Copy hex codes from Figma. Don't say 'make it blue' — say 'use #3B82F6'. Exact colors matter.
Get 90% there with AI, then fine-tune. Some tiny differences between Figma and code are normal.
If the designer uses Figma Dev Mode, you can see CSS values, spacing, and colors for every element.
If you don't have Figma access, a screenshot is enough. Describe what you see in detail.
A designer sends you a Figma link for a portfolio redesign. The hero has a large headline in Inter Bold 48px, a subtitle in gray (#6B7280), and a purple CTA button. The projects section is a 3-column card grid with 16px gaps, 24px card padding, 12px radius, and subtle shadows. You extract every detail — colors, fonts, spacing, radius, shadows — and describe each section to your AI tool one at a time. The result matches the design on the first try.
Build this with AI
"I'm rebuilding my portfolio based on a Figma design. Here's the hero section: centered layout, headline 'Hi, I'm Alex' in Inter Bold 48px (#1A1A3E), subtitle 'Product Designer & Developer' in Inter Regular 18px (#6B7280), purple CTA button (#5046E5) with white text, 12px border radius, 80px vertical padding, white background, max-width 1200px. Below is a projects section: 3-column grid, 16px gap, cards with white background, 24px padding, 12px border radius, shadow 0 2px 8px rgba(0,0,0,0.06). Each card has a project image, title in Inter Semibold 20px, and a one-line description in 14px gray. Build this with Next.js and Tailwind CSS."
Recreate a Figma design
"I have a Figma design for a landing page. Here's what the hero section looks like: centered layout, large heading '[Your Headline]' in Inter Bold 48px, subtitle in Inter Regular 18px in gray (#6B7280), a purple CTA button (#5046E5) with white text and 12px border radius, all on a white background with 80px padding top and bottom. The max width is 1200px. Build this section using Next.js and Tailwind CSS."
Match specific design details
"Compare my current site to this design and fix the differences: [describe what's wrong]. Specifically: the card padding should be 24px, the border radius should be 12px, the shadow should be subtle (0 2px 8px rgba(0,0,0,0.06)), and the gap between cards should be 16px. The heading font should be Inter at 24px bold."
