FigmaNavi

AI が Figma を直接操作。アクセシビリティも自動チェック。

An AI agent that drives Figma. And one-click accessibility scanning.

チャットで指示すると、AI がフレーム作成・編集・レイアウト調整を Figma 上で実行します。WCAG A / AA / AAA スキャンと変数リンターも内蔵。

Chat with the agent and it builds, edits, and rearranges your Figma file directly. Also includes WCAG A / AA / AAA accessibility scanning and a variable linter.

AI Agent WCAG A WCAG AA WCAG AAA Linter
Figmaにインストール Install on Figma 使い方を見る View Usage Guide

AI エージェント

AI Agent

日本語または英語のチャットで「ログインフォームを作って」「このボタンを青くして padding を 16 に」のように依頼すると、AI が Anthropic Claude の Tool Use 経由で Figma を直接操作します。83 のツールハンドラがフレーム作成、テキスト編集、オートレイアウト、コンポーネント、スタイル、変数まで対応。

Ask the agent in plain Japanese or English — "build a login form", "make the selected button blue with 16px padding", "duplicate this card three times" — and it drives Figma through 83 tool handlers covering frames, text, auto-layout, components, styles, and variables. Powered by Anthropic Claude with prompt caching for cost-efficient iteration.

会話で作る、会話で直す
Build and refine through conversation
最初の指示で骨格を作り、続く指示で色・サイズ・コピーを微調整。会話履歴を共有しながら段階的にデザインを完成させられます。
Lay down a structure with the first prompt, then iterate on color, size, and copy in the same conversation. The agent keeps the full history so each follow-up message extends the previous result.
選択中のノードを理解する
Understands what you have selected
Figma の選択範囲、ページ構造、既存のスタイルや変数を読み取った上で操作するため、まっさらな状態だけでなく、進行中のファイルにも自然に統合できます。
The agent reads your current selection, page tree, existing styles, and variables before acting, so it integrates naturally into work-in-progress files instead of always starting from a blank canvas.
予測可能なクォータ
Predictable monthly quota
課金単位は「ツール呼び出し」ではなく「会話 1 つ」。1 つの会話の中で何ターン続けても 1 カウントしか消費しません。フリートライアル 3 会話、Pro プランは月 50 会話。
Quota is billed per conversation, not per tool call. A multi-turn iteration session only counts as one. Free trial: 3 conversations. Pro: 50 conversations / month.

コントラスト
Contrast
AA AAA
テキストの色と背景色のコントラスト比を自動で計算し、WCAG基準を満たしているかチェックします。
Automatically calculates contrast ratio between text and background colors to verify WCAG compliance.
AA: 1.4.3 Contrast (Minimum) / AAA: 1.4.6 Contrast (Enhanced)
AA: 1.4.3 Contrast (Minimum) / AAA: 1.4.6 Contrast (Enhanced)
Level AA
通常テキスト 4.5:1
大きいテキスト 3:1
Normal text 4.5:1
Large text 3:1
Level AAA
通常テキスト 7:1
大きいテキスト 4.5:1
Normal text 7:1
Large text 4.5:1
自動検出 — レイヤー名の変更不要 Auto-detected — no layer name changes needed
ターゲットサイズ
Target Size
AA AAA
ボタンやリンクなどのインタラクティブ要素のサイズが、タッチ操作に十分な大きさかチェックします。
Checks that interactive elements like buttons and links are large enough for touch interaction.
AA: 2.5.8 Target Size (Minimum) / AAA: 2.5.5 Target Size (Enhanced)
AA: 2.5.8 Target Size (Minimum) / AAA: 2.5.5 Target Size (Enhanced)
Level AA
最小 24 x 24px
Minimum 24 x 24px
Level AAA
最小 44 x 44px
Minimum 44 x 44px
自動検出 — レイヤー名の変更不要 Auto-detected — no layer name changes needed
代替テキスト
Alt Text
A
画像に代替テキストが設定されているかチェックします。画像レイヤーの名前に接頭辞を付けるだけで設定できます(page: 不要)。
Checks that images have alternative text. Just add a prefix to the image layer name (no page: needed).
1.1.1 Non-text Content
alt: 商品の写真Product photo
— 代替テキストを設定
— set alt text
noalt
— 装飾画像(alt不要)
— decorative image (no alt needed)
以下のチェックには page: 宣言を推奨・必須とします
The following checks recommend or require a page: declaration
トップレベルフレームの名前を page: ホーム のように変更してページを宣言します。見出し構造は page: なしでもチェックされますが、複数ページのデザインでは各ページ内の見出しが独立して評価されるため page: の宣言を推奨します。フォーカス順序は page: がないとチェックが実行されません。
Rename a top-level frame to something like page: Home to declare it as a page. Heading structure checks work without page:, but declaring pages is recommended for multi-page designs so headings are validated independently per page. Focus order checks won't run without a page: declaration.
見出し構造
Heading Structure
A
H1〜H6の見出し階層が正しいかチェックします(レベルスキップ、H1重複、H1欠如)。まず page: でページを宣言し、その中のテキストレイヤー名を変更します。
Checks H1-H6 heading hierarchy for skips, duplicate H1, or missing H1. First declare a page with page:, then rename text layers inside it.
1.3.1 Info and Relationships
page: ホームHome
— トップレベルフレームをページとして宣言(必須)
— declare top-level frame as a page (required)
h1: ページタイトルPage Title
— ページ内のテキストレイヤー名を変更
— rename text layers inside the page
h2: セクション名Section Name
h3: 小見出しSubsection
— h6 まで対応
— up to h6
page: なしでもチェックされますが、全見出しが1つのスコープとして評価されます。複数ページのデザインでは page: を宣言すると、各ページ内で独立して見出し階層がチェックされます(推奨)。
Checks run even without page:, but all headings are evaluated as a single scope. For multi-page designs, declaring page: is recommended so heading hierarchy is validated independently per page.
フォーカス順序
Focus Order
A
キーボード操作時のフォーカス順序が設定されているかチェックします。まず page: でページを宣言し、その中のインタラクティブ要素のレイヤー名を変更します。
Checks that keyboard focus order is defined for interactive elements. First declare a page with page:, then rename interactive layers inside it.
2.4.3 Focus Order
page: ホームHome
— トップレベルフレームをページとして宣言(必須)
— declare top-level frame as a page (required)
f1: 検索バーSearch Bar
— ページ内の要素にフォーカス順を設定
— set focus order on elements inside the page
f2: メール入力Email Input
f3: 送信ボタンSubmit Button
— f99 まで対応
— up to f99
page: を付けないとチェックが実行されません。フォーカス順序は各ページ内で独立して番号を振ります。
Checks won't run without page:. Focus order numbers are scoped independently per page.
追加機能
Additional Features
アクセシビリティチェックに加えて、デザインの品質管理とチーム連携のための機能を備えています。
Beyond accessibility checks, FigmaNavi includes features for design quality and team collaboration.
変数リンター
Variable Linter
Linter
色・余白・角丸・エフェクトなどの値が Figma 変数にバインドされているかチェックします。ハードコードされた値を検出し、デザイントークンの活用を促します。
Checks that colors, spacing, corner radius, and effects are bound to Figma variables. Detects hardcoded values and encourages use of design tokens.
検出対象
Detects
Fill / Stroke / Gap / Padding / Radius / Effect / Opacity
Fill / Stroke / Gap / Padding / Radius / Effect / Opacity
自動検出 — レイヤー名の変更不要 Auto-detected — no layer name changes needed
カスタム設定 / チーム共有
Custom Settings / Team Sharing
コントラスト比やターゲットサイズの閾値を自由にカスタマイズできます。設定は Figma ファイルに保存され、同じファイルを開いている全員に共有されます。編集時には確認ダイアログで誤操作を防止します。
Customize contrast ratio and target size thresholds freely. Settings are saved to the Figma file and shared with everyone who opens it. Edit confirmation dialogs prevent accidental changes.
カスタマイズ可能
Customizable
コントラスト比 1:1 〜 12:1
ターゲットサイズ 12px 〜 44px
チェック項目の ON/OFF
Contrast ratio 1:1 to 12:1
Target size 12px to 44px
Toggle individual checks ON/OFF
WCAG レベル選択で「Custom」を選ぶと、スライダーで自由に閾値を設定できます。「チーム設定として保存」でファイルに紐付けて共有。
Select "Custom" in the WCAG level selector to set thresholds with sliders. Use "Save as team settings" to share across the file.

References

References

FigmaNaviの判定基準は以下のWCAGガイドラインに基づいています。

FigmaNavi's checks are based on the following WCAG guidelines.