> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma to Pixel-Perfect Code

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Figma to Pixel-Perfect Code" description="Connect the Figma MCP and let Devin extract design tokens, build components, and visually verify the result against your mockups." prompt="Implement the pricing page from this Figma file: https://figma.com/file/abc123/Pricing-Page. Focus on the 'Pricing Section' frame on the 'Marketing' page. It has a heading + subheading block, 3 pricing tier cards (Free, Pro, Enterprise) with feature lists, a comparison table below the cards, and a mobile layout where cards stack vertically and the table becomes scrollable. Use our Tailwind config in tailwind.config.ts for colors and spacing. Reuse the existing Card and Button components from src/components/ui/. The page should be a new route at src/app/pricing/page.tsx. After implementing, spin up the dev server and take full-page screenshots at desktop (1440px), tablet (768px), and mobile (375px) viewports. Record a screen recording scrolling through the page and interacting with hover states. Share the screenshots and recording with me in the session. Attach them to the PR so reviewers can see the visual result. Do not open the PR until the implementation matches the Figma design." category="Feature Development" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>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.</Tip>

  <Steps>
    <Step title="Connect the Figma MCP">
      Before Devin can read your designs, it needs access to your Figma files via the [Figma MCP](/work-with-devin/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 > Connections > MCP servers**, find **Figma**, and click **Enable**
      6. Paste your token when prompted

      <Tip>
        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.
      </Tip>

      Once connected, Devin can read any Figma file you link to — extracting component hierarchies, colors, spacing, typography, and layout constraints directly from the design.
    </Step>

    <Step title="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.

      <PromptBlock>
        ```txt Implement pricing page from Figma theme={null}
        Implement the pricing page from this Figma file:
        https://figma.com/file/abc123/Pricing-Page

        Focus on the "Pricing Section" frame on the "Marketing" page. It has:
        - A heading + subheading block
        - 3 pricing tier cards (Free, Pro, Enterprise) with feature lists
        - A comparison table below the cards
        - Mobile layout: cards stack vertically, table becomes scrollable

        Use our Tailwind config in tailwind.config.ts for colors and spacing.
        Reuse the existing Card and Button components from src/components/ui/.
        The page should be a new route at src/app/pricing/page.tsx.

        After implementing, spin up the dev server and verify the result:
        - Take full-page screenshots at desktop (1440px), tablet (768px),
          and mobile (375px) viewports
        - Record a screen recording scrolling through the page and
          interacting with hover states
        - Share the screenshots and recording with me in the session
        - Attach them to the PR so reviewers can see the visual result
        - Do not open the PR until the implementation matches the Figma design
        ```
      </PromptBlock>

      **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](/product-guides/knowledge) automatically — so you don't have to repeat it next time.
    </Step>

    <Step title="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
      ```
    </Step>

    <Step title="Review the PR with Devin Review">
      Once Devin opens the PR, use [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) 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.
    </Step>
  </Steps>
</div>