Skip to main content
Don’t want to set this up manually? Paste a link to this page into a Devin session and ask it to set everything up for you.
1

Connect the Figma MCP

Before Devin can read your designs, connect the Figma MCP with an account that can access the files you want to use.
  1. In Devin, open Customize > MCPs, choose Browse marketplace, and find Figma.
  2. Follow the installation prompts, then open its connection settings in Customize > MCPs.
  3. Choose Personal access for individual accounts, or Organization access to share one connection with your organization.
  4. Choose Connect and authorize access through Figma’s OAuth flow.
For Organization access, use a dedicated Figma account with access to the team’s design files. With Personal access, each member connects their own account.
Once connected, Devin can read linked Figma files that the connected account can access — 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
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.