> ## Documentation Index
> Fetch the complete documentation index at: https://content-designer-ux-writing-skill-26.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma integration

> Review and improve UX copy directly from Figma designs using Claude or Codex

Connect this skill to Figma to review copy directly from your designs. Perfect for content designers, product designers, and teams who need to audit UX text in mockups.

## What you can do

Once connected, you can:

<CardGroup cols={2}>
  <Card title="Audit designs" icon="magnifying-glass">
    Share Figma frame links and get instant UX writing feedback
  </Card>

  <Card title="Check accessibility" icon="universal-access">
    Review for screen reader compatibility and plain language
  </Card>

  <Card title="Review flows" icon="diagram-project">
    Ensure consistency across entire user journeys
  </Card>

  <Card title="Get suggestions" icon="lightbulb">
    Receive improvements based on the four quality standards
  </Card>
</CardGroup>

## Quick example

```
Here's my login screen: [Figma link]

Review all the UX copy using the UX Writing Skill. Check for:
- Accessibility (screen reader compatibility, plain language)
- Error message clarity
- Button labels
- Tone consistency
```

Claude or Codex will analyze the design, identify all text elements, and provide detailed feedback with specific improvements.

## Setup options

<Tabs>
  <Tab title="Claude Code">
    ### Connect Figma to Claude Code

    **Best for**: Quick setup, working from anywhere, no Figma desktop app needed

    **Requirements**:

    * Claude Code installed
    * Figma account (Starter, Professional, Organization, or Enterprise plan)
    * Internet connection

    <Steps>
      <Step title="Install Figma MCP">
        Open your terminal and run:

        ```bash theme={null}
        claude mcp add --transport http figma https://mcp.figma.com/mcp
        ```
      </Step>

      <Step title="Restart Claude Code">
        Quit and reopen Claude Code to activate the connection.
      </Step>

      <Step title="Authenticate">
        When prompted, log in to your Figma account to authorize access.
      </Step>

      <Step title="Test the connection">
        Share a Figma frame link with Claude:

        ```
        Review the copy in this screen:
        https://www.figma.com/file/abc123/Design?node-id=123-456
        ```
      </Step>
    </Steps>

    ### Getting Figma links

    To get a link to review:

    1. Open your Figma file
    2. Select the frame you want to review
    3. Right-click → **Copy link to selection**
    4. Paste the link in Claude Code

    <Tip>
      Use **Dev Mode** links for more detailed information about text layers and properties.
    </Tip>

    ### Troubleshooting

    <Accordion title="Connection issues">
      If Claude can't access your Figma file:

      1. Verify the file is not set to private
      2. Check your Figma plan supports API access
      3. Try re-authenticating: `claude mcp remove figma` then add again
    </Accordion>

    <Accordion title="Authentication expired">
      If you see "Authentication required":

      1. Run: `claude mcp login figma`
      2. Complete the browser authentication
      3. Try your request again
    </Accordion>
  </Tab>

  <Tab title="Codex">
    ### Connect Figma to Codex

    **Best for**: CLI workflows or IDE integration

    **Requirements**:

    * Codex CLI or IDE extension installed
    * Figma account
    * Internet connection

    <Steps>
      <Step title="Configure Codex MCP">
        Add to your `~/.codex/config.toml`:

        ```toml theme={null}
        [features]
        rmcp_client = true

        [mcp_servers.figma]
        url = "https://mcp.figma.com/mcp"
        ```
      </Step>

      <Step title="Install Codex (if needed)">
        ```bash theme={null}
        npm i -g @openai/codex
        ```
      </Step>

      <Step title="Authenticate with Figma">
        ```bash theme={null}
        codex mcp login figma
        ```

        Complete the browser authentication when prompted.
      </Step>

      <Step title="Restart your IDE">
        If using Codex IDE extension, restart your editor to load the new configuration.
      </Step>

      <Step title="Test the connection">
        In Codex, share a Figma Dev Mode link:

        ```
        Review this login screen:
        https://www.figma.com/design/abc123?node-id=123-456
        ```
      </Step>
    </Steps>

    ### Codex CLI usage

    ```bash theme={null}
    codex "Review the UX copy in this Figma frame: [link]"
    ```

    ### Troubleshooting

    <Accordion title="MCP not enabled">
      If you see "MCP client not enabled":

      1. Verify `rmcp_client = true` is in your config.toml
      2. Check the file path: `~/.codex/config.toml` (Mac/Linux) or `%USERPROFILE%\.codex\config.toml` (Windows)
      3. Restart Codex after changes
    </Accordion>

    <Accordion title="Authentication issues">
      If authentication fails:

      1. Run: `codex mcp logout figma`
      2. Then: `codex mcp login figma`
      3. Complete browser authentication
      4. Try your request again
    </Accordion>
  </Tab>
</Tabs>

## Example workflows

### Content audit

```
Review all UX copy in this checkout flow:
[Figma link]

Check for:
1. Accessibility (screen reader compatibility, reading level)
2. Error message clarity and helpfulness
3. Button labels (specific actions, not generic)
4. Consistency with our brand voice (professional but friendly)
5. Any missing copy or placeholders
```

### Error message review

```
Focus on the error states in this form:
[Figma link]

For each error message, check:
- Does it explain what failed?
- Does it tell users how to fix it?
- Is it under 15 words?
- Does it avoid blame language?
```

### Accessibility check

```
Review this dashboard for accessibility:
[Figma link]

Check:
- Link text (descriptive, not "click here")
- Button labels (include object, not just "Delete")
- Form labels (visible, not just placeholders)
- Reading level (target 8th grade)
- Error messages (include "Error:" prefix)
```

### Voice consistency

```
Review this onboarding flow for voice consistency:
[Figma link]

Our voice is: Professional, helpful, concise

Check if all copy:
- Uses active voice
- Stays under 15 words per sentence
- Avoids jargon
- Sounds like it's from the same product
```

## Best practices

<CardGroup cols={2}>
  <Card title="Link to specific frames" icon="frame">
    Select the exact frame you want reviewed instead of sharing the entire file for focused feedback.
  </Card>

  <Card title="Use Dev Mode links" icon="code">
    Dev Mode provides more detailed layer information, especially for text properties.
  </Card>

  <Card title="Be specific in requests" icon="list-check">
    Tell Claude/Codex exactly what to check (accessibility, tone, errors, etc.).
  </Card>

  <Card title="Review flows, not just screens" icon="diagram-next">
    Link multiple frames to check consistency across an entire user journey.
  </Card>
</CardGroup>

## What gets analyzed

When you share a Figma link, the skill can review:

<Check>All text layers and their content</Check>
<Check>Button labels and link text</Check>
<Check>Form field labels and placeholders</Check>
<Check>Error messages and notifications</Check>
<Check>Headings and body copy</Check>
<Check>Empty states and success messages</Check>

<Note>
  The skill analyzes text content and structure. It cannot evaluate visual design, spacing, or typography.
</Note>

## Limitations

<Warning>
  Be aware of these limitations:
</Warning>

* **File access**: Only works with files your Figma account can access
* **Private files**: May need explicit permission for team/organization files
* **Image text**: Cannot read text embedded in images (screenshots, photos)
* **Components**: Sees component instances but not master component definitions

## Related resources

<CardGroup cols={3}>
  <Card title="Quality standards" icon="star" href="/concepts/quality-standards">
    Learn the four quality standards applied in reviews
  </Card>

  <Card title="Accessibility" icon="universal-access" href="/guides/accessibility">
    Understand accessibility checks
  </Card>

  <Card title="Checklist" icon="clipboard-check" href="/reference/checklist">
    Use the content usability checklist
  </Card>
</CardGroup>