---
spec_name: "Figma Code Layers: Design-to-Component Workflow"
version: 1.0
description: "A spec for Claude Code to guide a user through converting a Figma design into a live, interactive React component using Figma's Code Layers feature."
---

## Goal

Convert a user-described Figma design into a working React component directly on the Figma canvas, add a simple animation, and prepare it for export.

## Context

Figma Make now includes Code Layers, which can turn any design layer into live code via prompting. This spec automates the workflow for a standard component like a hero section.

## Step-by-Step Workflow

### Step 1: Design Confirmation
First, confirm with the user that they have a component designed in a Figma Make frame.

**Prompt to user:**
"Before we start, please confirm you have your component (e.g., a hero section, a card, a button) designed within a single, top-level frame in Figma Make. Let me know when you're ready."

### Step 2: Conversion to Code
Once the user confirms, guide them to select the layer and use the primary conversion prompt.

**Instruction:**
"Great. Now, select the top-level frame of your design. Open the command palette (you can use Cmd+/ on Mac or Ctrl+/ on Windows) and type the following prompt exactly:"

**Code Prompt:**
```
convert this layer to a React component
```

**Follow-up:**
"Figma should replace your static design with a live code layer that looks identical. Did that work?"

### Step 3: Adding Animation
Assuming Step 2 was successful, guide the user to add an animation from the npm ecosystem.

**Instruction:**
"Perfect. Now let's add some life to it. With the new code layer still selected, open the command palette again and type this prompt:"

**Code Prompt:**
```
add a Framer Motion entrance animation to this component. fade in and slide up.
```

**Follow-up:**
"You should now see the component animate on load. This works because Code Layers can pull in npm packages directly. You can try other simple animations too, like 'pulse on hover' or 'scale up on click'."

### Step 4: Iteration (Optional)
Show the user how to iterate on the design by duplicating the code layer and providing a new prompt.

**Instruction:**
"To explore different styles without losing your work, duplicate the code layer (select it and press Cmd/Ctrl + D). Now, select the duplicated layer and give it a new prompt, for example:"

**Code Prompt:**
```
change the button style to outlined and use the secondary brand color on hover
```

### Step 5: Exporting the Code
Finally, instruct the user on how to get the code out of Figma.

**Instruction:**
"Once you are happy with your component, select the final code layer. You should see an option in the right-hand panel to 'Export Code' or 'View Code'. This will give you the clean JSX and CSS that a developer can drop directly into your project's codebase."