Figma integration

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
Codex

Connect Figma to Claude Code

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

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

Install Figma MCP

Open your terminal and run:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Restart Claude Code

Quit and reopen Claude Code to activate the connection.

Authenticate

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

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:

Open your Figma file
Select the frame you want to review
Right-click → Copy link to selection
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:

Verify the file is not set to private
Check your Figma plan supports API access
Try re-authenticating: claude mcp remove figma then add again

Authentication expired

If you see “Authentication required”:

Run: claude mcp login figma
Complete the browser authentication
Try your request again

Connect Figma to Codex

Best for: CLI workflows or IDE integrationRequirements:

Codex CLI or IDE extension installed
Figma account
Internet connection

Configure Codex MCP

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

[features]
rmcp_client = true

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"

Install Codex (if needed)

npm i -g @openai/codex

Authenticate with Figma

codex mcp login figma

Complete the browser authentication when prompted.

Restart your IDE

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

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”:

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

Authentication issues

If authentication fails:

Run: codex mcp logout figma
Then: codex mcp login figma
Complete browser authentication
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

Quality standards

Learn the four quality standards applied in reviews

Accessibility

Understand accessibility checks

Checklist

Use the content usability checklist

Get Started

Core Concepts

Guides

Reference

About

What you can do

Audit designs

Check accessibility

Review flows

Get suggestions

Quick example

Setup options

Connect Figma to Claude Code

Getting Figma links

Troubleshooting

Connect Figma to Codex

Codex CLI usage

Troubleshooting

Example workflows

Content audit

Error message review

Accessibility check

Voice consistency

Best practices

Link to specific frames

Use Dev Mode links

Be specific in requests

Review flows, not just screens

What gets analyzed

Limitations

Quality standards

Accessibility

Checklist

​What you can do

Audit designs

Check accessibility

Review flows

Get suggestions

​Quick example

​Setup options

​Connect Figma to Claude Code

​Getting Figma links

​Troubleshooting

​Connect Figma to Codex

​Codex CLI usage

​Troubleshooting

​Example workflows

​Content audit

​Error message review

​Accessibility check

​Voice consistency

​Best practices

Link to specific frames

Use Dev Mode links

Be specific in requests

Review flows, not just screens

​What gets analyzed

​Limitations

​Related resources

Quality standards

Accessibility

Checklist

What you can do

Quick example

Setup options

Connect Figma to Claude Code

Getting Figma links

Troubleshooting

Connect Figma to Codex

Codex CLI usage

Troubleshooting

Example workflows

Content audit

Error message review

Accessibility check

Voice consistency

Best practices

What gets analyzed

Limitations

Related resources