Figma Design Review Skill for Claude Code

English

A Claude Code skill that reviews Figma designs from an engineer's perspective and automatically posts comments to specific locations in Figma.

Demo

Example: Reviewing a calendar UI and posting comments about touch target sizes and specification clarifications

Features

Automatic screenshot capture from Figma designs
Engineer-focused UI/UX review (data structure, forms, UI consistency, etc.)
Position-specific comments automatically posted to Figma
Accurate coordinate detection via REST API

Prerequisites

Claude Code installed
Figma Desktop App
Figma Personal Access Token
Figma MCP enabled in Claude Code

Installation

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/figma-design-review-skill.git
cd figma-design-review-skill

2. Get Figma Personal Access Token

Log in to Figma
Click your profile icon (top right) → Settings
Go to Personal access tokens section
Click Generate new token
Copy the token

3. Set up environment variable

Option A: Claude Code settings file (Recommended)

cp .claude/settings.json.example .claude/settings.json

Edit .claude/settings.json:

{
  "env": {
    "FIGMA_TOKEN": "figd_your_token_here"
  }
}

Option B: Shell environment variable

export FIGMA_TOKEN="figd_your_token_here"

4. Launch Claude Code

cd figma-design-review-skill
claude

The skill will be automatically loaded from the .claude/skills/ directory.

Usage

Basic Usage

In Claude Code, run:

/figma-design-review <figma_url>

Example:

/figma-design-review https://www.figma.com/design/ABC123/MyDesign?node-id=1-2

Important: Prepare Figma Desktop App

Before running the review:

Launch Figma Desktop App
Open the target file
Select the target frame/node (recommended)

Review Output Example

## Review Complete

### Basic Design
| # | Category | Issue |
|---|----------|-------|
| 1 | Touch Target | Send icon 24x24px is too small → 44x44px recommended |
| 2 | Size | Tab indicator widths inconsistent (118/94/92px) |

### Engineer Perspective
| # | Category | Issue |
|---|----------|-------|
| 3 | Specification | Natural language input error handling needs clarification |
| 4 | Specification | Overlapping event display rules need confirmation |

Review Categories

Category	Checks
Data Structure	Hierarchy depth, state complexity
Tables/Lists	Scrolling, fixed headers, performance
Forms/Input	Validation, error display
UI Consistency	Color semantics, format uniformity
Security	Edit permissions, audit logs
Specifications	Ambiguities, edge cases

日本語

Claude Codeで使えるFigmaデザインレビュースキル。実装者目線でUIUXをレビューし、問題箇所にFigmaコメントを自動投稿します。

デモ

例: カレンダーUIをレビューし、タッチターゲットサイズや仕様確認についてコメントを投稿

機能

Figmaデザインの自動スクリーンショット取得
実装者目線でのUIUXレビュー（データ構造、フォーム、UI一貫性など）
問題箇所への位置指定コメントの自動投稿
REST APIによる正確な座標取得

必要条件

Claude Code がインストールされていること
Figmaデスクトップアプリ
Figma Personal Access Token
Claude CodeでFigma MCPが有効であること

インストール

1. リポジトリをクローン

git clone https://github.com/YOUR_USERNAME/figma-design-review-skill.git
cd figma-design-review-skill

2. Figma Personal Access Token を取得

Figma にログイン
右上のプロフィールアイコン → Settings
Personal access tokens セクション
Generate new token をクリック
トークンをコピー

3. 環境変数を設定

方法A: Claude Code設定ファイル（推奨）

cp .claude/settings.json.example .claude/settings.json

.claude/settings.json を編集してトークンを設定:

{
  "env": {
    "FIGMA_TOKEN": "figd_your_token_here"
  }
}

方法B: シェル環境変数

export FIGMA_TOKEN="figd_your_token_here"

4. Claude Codeを起動

cd figma-design-review-skill
claude

.claude/skills/ディレクトリからスキルが自動的に読み込まれます。

使い方

基本的な使い方

Claude Code内で以下のコマンドを実行:

/figma-design-review <figma_url>

例:

/figma-design-review https://www.figma.com/design/ABC123/MyDesign?node-id=1-2

重要: Figmaデスクトップアプリの準備

レビュー実行前に、以下を確認してください:

Figmaデスクトップアプリを起動
レビュー対象のファイルを開く
対象のフレーム/ノードを選択（推奨）

レビュー出力例

## レビュー完了

### ベーシックデザイン
| # | カテゴリ | 内容 |
|---|---------|------|
| 1 | タッチターゲット | 送信アイコン24x24pxは小さい → 44x44px推奨 |
| 2 | サイズ | タブ下線の幅が不統一（118/94/92px） |

### 実装者目線
| # | カテゴリ | 内容 |
|---|---------|------|
| 3 | 仕様確認 | 自然言語入力のエラーハンドリング要確認 |
| 4 | 仕様確認 | 予定の重複表示ルール要確認 |

レビューカテゴリ

カテゴリ	チェック内容
データ構造・状態管理	階層の深さ、状態の複雑さ
テーブル・リスト	スクロール、固定、パフォーマンス
フォーム・入力	バリデーション、エラー表示
UI一貫性	色の意味、フォーマット統一
権限・セキュリティ	編集権限、監査ログ
仕様確認事項	曖昧な点、エッジケース

Project Structure

.
├── .claude/
│   ├── skills/
│   │   └── figma-design-review/
│   │       ├── SKILL.md              # Skill definition
│   │       ├── scripts/
│   │       │   ├── post_comment.py   # Comment posting script
│   │       │   └── get_node_info.py  # Coordinate fetching script
│   │       └── references/
│   │           └── review-checklist.md
│   └── settings.json.example         # Settings template
├── docs/
│   └── images/                       # Demo images
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
└── README.md

Troubleshooting

"FIGMA_TOKEN is NOT set" Error

Environment variable is not set. See Installation.

MCP Connection Error

Check if Figma Desktop App is running
Check if the target file is open in Figma
Check if figma-desktop MCP is enabled in Claude Code

Coordinate Fetching Error

Verify FIGMA_TOKEN is valid
Check file access permissions

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT License - see LICENSE file for details.