How to turn Figma design to React components?

Turning a Figma design into React components is a core skill for front-end developers. It is a process of "transcribing" visual shapes into code.

Here is the professional workflow to achieve this:

1. The "Box" Mental Model (Decomposition)

Before writing any code, look at your Figma design and draw imaginary boxes around everything.

• The Container: Is it a Sidebar? A Header? A Main Content area?
• The Atoms: Is it a Button? An Input field? An Icon?
• The Molecules: A "Lesson Card" in Duolingo is a combination of an Image, Title, and Progress Bar.

2. Exporting Assets

Figma is a design tool, not a hosting service. You need to get the images out:

1. Select an icon or image in Figma.
2. Go to the Export tab on the right sidebar.
3. Choose SVG (for icons/illustrations) or PNG/WebP (for photos).
4. Put these files into your React project's src/assets folder.

3. Creating the Component Structure

For a Duolingo "Lesson Card," you would create a file called LessonCard.jsx:

// src/components/LessonCard.jsx
function LessonCard({ title, progress, icon }) {
  return (
    <div className="card-container">
      <img src={icon} alt={title} className="card-icon" />
      <h3>{title}</h3>
      <div className="progress-bar">
        <div className="progress-fill" style={{ width: `${progress}%` }}></div>
      </div>
    </div>
  );
}
export default LessonCard;

4. Copying CSS from Figma

Figma provides a "Dev Mode" (or the "Inspect" tab) that shows you the CSS properties of any element you click.

• Click an object in Figma.
• Look for Properties like background-color, border-radius, font-family, and box-shadow.
• Copy these into your CSS file (e.g., LessonCard.css).

5. Automation Tools (Advanced)

If you want to speed things up, there are tools that help, but you should still know the manual way first:

• Figma to Code Plugins: There are plugins in the Figma community (like Anima or Locofy) that can generate React code.
• Builder.io: Allows you to import Figma designs and converts them into clean React components.

Summary of the Workflow:

1. Analyze the design (find the "boxes").
2. Setup the component file in your my-app project.
3. Export icons/images.
4. Write JSX for the structure.
5. Copy CSS from Figma for the styling.

Labby's Tip: In the next labs, when you learn about Props, you'll see how to make one single "Lesson Card" component and use it 10 times to show 10 different lessons—this is the true power of React