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:

Audit designs

Share Figma frame links and get instant UX writing feedback

Check accessibility

Review for screen reader compatibility and plain language

Review flows

Ensure consistency across entire user journeys

Get suggestions

Receive improvements based on the four quality standards

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

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

1. Install Figma MCP

   Open your terminal and run:

   claude mcp add --transport http figma https://mcp.figma.com/mcp
   
2. Restart Claude Code

   Quit and reopen Claude Code to activate the connection.

3. Authenticate

   When prompted, log in to your Figma account to authorize access.

4. 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
   

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

Use Dev Mode links for more detailed information about text layers and properties.

Troubleshooting

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

Authentication expired

If you see “Authentication required”:

1. Run: claude mcp login figma
2. Complete the browser authentication
3. Try your request again

Codex

Connect Figma to Codex

Best for: CLI workflows or IDE integration

Requirements:

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

1. Configure Codex MCP

   Add to your ~/.codex/config.toml:

   [features]
   rmcp_client = true
   
   [mcp_servers.figma]
   url = "https://mcp.figma.com/mcp"
   
2. Install Codex (if needed)

   npm i -g @openai/codex
   
3. Authenticate with Figma

   codex mcp login figma
   

   Complete the browser authentication when prompted.

4. Restart your IDE

   If using Codex IDE extension, restart your editor to load the new configuration.

5. 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
   

Codex CLI usage

codex "Review the UX copy in this Figma frame: [link]"

Troubleshooting

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

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

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

Link to specific frames

Select the exact frame you want reviewed instead of sharing the entire file for focused feedback.

Use Dev Mode links

Dev Mode provides more detailed layer information, especially for text properties.

Be specific in requests

Tell Claude/Codex exactly what to check (accessibility, tone, errors, etc.).

Review flows, not just screens

Link multiple frames to check consistency across an entire user journey.

What gets analyzed

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

All text layers and their content

Button labels and link text

Form field labels and placeholders

Error messages and notifications

Headings and body copy

Empty states and success messages

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

Limitations

Be aware of these limitations:

• 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

Quality standards

Learn the four quality standards applied in reviews

Accessibility

Understand accessibility checks

Checklist

Use the content usability checklist