Figma to Pixel-Perfect Code
Connect the Figma MCP and let Opulent build components from your mockups.
Connect the design source and target platform
Connect the Figma MCP for the design source and GitHub for the code target. Opulent reads the design tokens, layout, and component hierarchy from Figma and maps them to the codebase.
The build process follows a playbook, a reusable, named set of steps for turning a design into a live page. It defines how to extract tokens, which breakpoints to support, and how to verify the result.
Playbook: !figma-to-code For a Figma file and target page: 1. Read the Figma frame via MCP and extract the component tree, colors, spacing, typography, and layout. 2. Map tokens to the project's design system. 3. Reuse existing components where they match. 4. Implement the page with the required breakpoints. 5. Spin up the preview and take screenshots at desktop, tablet, and mobile widths. 6. Record a short scrolling video with hover interactions. 7. Open a PR only after the screenshots match the design.
Create a dedicated Figma service account with read-only access to the files Opulent needs. This avoids tying the integration to a personal account and makes access easier to rotate.
Share the design link and target
Send the initial prompt with the Figma file URL, the exact frame or page to build, and the target file path. Specificity matters: a large file can have dozens of pages, and Opulent needs to know which frame to match.
The sharp edge: a vague prompt like 'build the pricing page' produces a page that matches the title but misses the details. Name the frame, the tokens file, and the existing components to reuse.
Design brief: Source: [Figma file URL] Frame: "Pricing Section" on the "Marketing" page Content: - Heading + subheading block - 3 pricing tier cards (Free, Pro, Enterprise) with feature lists - Comparison table below the cards - Mobile: cards stack, table scrolls Target: new route /src/app/pricing/page.tsx Tokens: tailwind.config.ts or design system file Reuse: existing Card and Button components
Extract, build, and verify
Opulent reads the Figma frame via MCP, maps tokens, implements the page, and opens the preview. It takes screenshots at each breakpoint and compares them to the design to catch mismatches before the PR is opened.
If a node maps to the wrong token, comment on the screenshot and re-run against that exact viewport. Keep the Figma file as the source of truth until the PR merges.
Run: pricing page from Figma Actions: - Extracted tokens from Figma frame via MCP. - Mapped colors to indigo-500, slate-100, etc. - Reused Card and Button components. - Built responsive layout: 3-column desktop, 1-column mobile. - Took screenshots at 1440px, 768px, 375px. - Recorded 90-second scrolling video with hover states. - Opened PR #89 with screenshots and video attached.
Review the visual proof
The PR includes the screenshots and recording as visual proof. Reviewers can see the design-to-code result without running the branch locally. If anything is off, they comment on the specific screenshot and the fix run targets that exact viewport.
Sharpen the design-to-code loop
When a design element repeatedly maps to the wrong token, add the rule to the playbook or write it into memory (the notes a run recalls next time): 'this team's Figma uses #6366F1 for primary buttons; map to indigo-500.'
Expand the verification as the design system grows: add dark-mode screenshots, accessibility checks, or component-level diffs.
The natural chain: when the page is live, use Catch Visual Regressions Before Every PR to prevent future layout breakage; when the design needs QA, use Click-Test Real Product Flows with Computer Use.