Skip to main content

Figma to Pixel-Perfect Code

Connect the Figma MCP and let Devin extract design tokens, build components, and visually verify the result against your mockups.
AuthorCognition
CategoryFeature Development
FeaturesMCP
1

Connect the Figma MCP

Before Devin can read your designs, it needs access to your Figma files via the Figma MCP. Once connected, the MCP is available to everyone in your organization — any team member can link Figma files in their Devin sessions.
  1. In Figma, click your profile icon > Settings > Security
  2. Under Personal access tokens, click Generate new token
  3. Give it at least read permissions on File content and Dev resources
  4. Copy the token
  5. In Devin, go to Settings > MCP Marketplace, find Figma, and click Enable
  6. Paste your token when prompted
Consider creating a dedicated Figma account for Devin (e.g., devin@yourcompany.com) with viewer access to your design files. This avoids tying the MCP to a personal account and makes it easy to manage access as your team grows.
Once connected, Devin can read any Figma file you link to — extracting component hierarchies, colors, spacing, typography, and layout constraints directly from the design.
2

Share a design link and prompt Devin

Paste a Figma file URL into your prompt along with what you want implemented. Be specific about which frames to build and which parts of your codebase to use.What makes a good Figma prompt:
  • Link the specific Figma file (not just the project)
  • Name the exact frame or page within the file — large files can have dozens of pages
  • Reference your existing component library and CSS framework
  • Mention where design tokens live (e.g., tailwind.config.ts, src/tokens/)
  • Specify the target file path for new components
If you find yourself repeating the same context across sessions (e.g., “all new pages go in src/app/” or “we use Radix UI primitives”), give Devin that feedback and it will propose saving it as Knowledge automatically — so you don’t have to repeat it next time.
3

Devin extracts, builds, and verifies

Devin reads the Figma file through the MCP, maps design properties to your codebase, implements the components, and then opens the browser to visually check the result.
  1. Reads the Figma file — Pulls the component tree, design tokens (colors like #6366F1, spacing like 24px), typography (Inter, 18px/28px, 500 weight), and auto-layout properties from the specified frame
  2. Maps tokens to your system — Matches Figma colors to your closest Tailwind tokens (e.g., #6366F1 → indigo-500) and uses your spacing scale instead of hardcoding pixel values
  3. Builds the components — Creates React components that follow your existing patterns, reusing shared components like <Card> and <Button> where the design matches
  4. Checks it in the browser — Starts your dev server, navigates to localhost:3000/pricing, and visually compares the result against the Figma design at multiple viewports
  5. Captures screenshots and screen recordings — Devin takes full-page screenshots at desktop, tablet, and mobile breakpoints, and records a screen recording scrolling through the page and interacting with hover states. It shares these directly in the session so you can verify the result visually — no need to pull the branch and run it yourself.
  6. Shares proof everywhere — Devin attaches the screenshots and recordings to the PR so reviewers can see the visual result without checking out the code. If you have Slack connected, Devin can also post them to a channel so your design team can review without leaving Slack.
  7. Opens a PR — Submits the implementation with visual proof attached alongside the code changes
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

Review the PR with Devin Review

Once Devin opens the PR, use Devin Review to review the implementation. Devin Review can catch visual mismatches, missing responsive breakpoints, and components that don’t follow your design system.If anything needs adjusting — spacing is off, a hover state is missing, colors don’t match — leave a comment directly on the PR and Devin will address it. No need to open a new session or write a separate prompt.