How to Convert a Figma Design into Responsive React Components

Figma to react is a translation, not an export. The file describes spacing, type, color, and which regions repeat. The components describe the same decisions in a way that can shrink, receive data, and be used on more than one route. Copying every absolute coordinate into style props produces a screenshot that breaks as soon as the title wraps.

The homepage concepts on this site are the same kind of translation, built as HTML and CSS from a visual spec: a first screen, a repeating card, a clear action. The React version of that work follows the same measurements. The output is components instead of one long document.

Read the frame before writing components

Start with the frame at the width it was drawn, then write down four lists.

• Type. Font, size, line height, weight. Two sizes that differ by 1px are usually one style used twice. Record the styles you will actually reuse.
• Space. Padding inside a card, gap between cards, page margin. These are the spacing from a design. They become padding and gap, not margins on every child.
• Color. Background, text, border, accent. Name them once. A hex repeated in twelve components will drift.
• Repeats. Buttons, fields, cards, badges. Each repeat is a component candidate. A section that appears once can stay in the page until a second page needs it.

Ignore the layer named Group 47. Name the component after the role: ProjectCard, Field, TypeBadge.

Map auto-layout to CSS

Auto-layout direction, gap, and padding map cleanly:

• Horizontal auto-layout becomes display: flex with gap.
• Vertical auto-layout becomes a flex column, or normal block flow if nothing needs to be centered.
• A grid of equal cards becomes CSS grid with repeat(auto-fill, minmax(...)).
• Constraints like "left and right" become a block that fills its parent, not position: absolute.

Absolute positioning is the exception: a badge on a thumbnail, a decorative shape behind a hero. The content column itself should not be absolute. If the Figma frame pins the heading 86px from the top of a 900px artboard, that 86px is padding on the section, and it should be allowed to change when the heading wraps to three lines.

Build from the inside out

Design to code in this order:

1. Tokens: color, type scale, radius, space. A handful of values, not a token for every layer.
2. The smallest controls: button, link, text field, badge. Include hover and focus. The design often draws only the default state. Focus still needs a visible ring.
3. The repeating card, fed by props. Title, summary, image, and href come from data. The card does not fetch.
4. The section that lays the cards out.
5. The page, which is mostly composition.

Responsive react components show up at step 4, not as a separate project. A card that is width: 320px in Figma is minmax(16rem, 1fr) in CSS. The 320px is the minimum, not the only width.

Check the narrow width on purpose

Resize to about 360px before calling the screen done.

• Text wraps inside the card instead of overflowing.
• A horizontal chip row wraps or scrolls. It does not widen the page.
• Buttons are at least 44px tall if they are the thing a thumb hits.
• Images keep their ratio. A missing width and height will shift the layout when the file loads.
• The primary action is still visible without a hunt.

Then check one in-between width, around 768px. That is where a two-column hero often should already be one column, even if the desktop frame never showed it.

What not to copy

Do not generate a component per Figma layer. A text node is not a component. Do not leave the desktop padding on mobile if the frame's 80px page margin becomes a third of the screen. Do not hard-code the sample sentence from the mock into the component. Pass it as a prop, the way a project card receives a title from a record.

The finished test is dull and reliable: change the title length and the viewport width. If the layout still matches the spacing from a design, the figma to react pass worked.