FigmaNavi

About this plugin

FigmaNavi detects accessibility issues in your Figma designs.■ Auto checks (no layer name changes needed)・Contrast — auto-calculates text-to-background ratio (AA: 4.5:1 / AAA: 7:1)・Target Size — auto-checks interactive element sizes (AA: 24px / AAA: 44px)■ Layer name checks・Alt Text — add alt: to image layer names (1.1.1 Non-text Content)・Heading Structure — add h1: through h6: to text layers (1.3.1 Info and Relationships)・Focus Order — add f1: through f99: to layers (2.4.3 Focus Order)■ Variable Linter・Detects hardcoded values not bound to Figma variables (fill, stroke, spacing, radius, effects)■ Custom & Team Settings・Set your own contrast ratio and target size thresholds・Save as team settings — shared with everyone who opens the file・Edit protection with confirmation dialogs※ Heading and focus order checks require a page: declaration on top-level frames.Layer name examples:alt: Product photonoalt (decorative image)h1: Page Titlef1: Search Barpage: HomeDetails: https://figmanavi.pages.devFigmaNaviは、デザインのアクセシビリティ問題を検出するFigmaプラグインです。■ 自動チェック（レイヤー名の変更不要）・コントラスト比 — テキストと背景色の比率を自動計算（AA: 4.5:1 / AAA: 7:1）・ターゲットサイズ — ボタンやリンクのサイズを自動チェック（AA: 24px / AAA: 44px）■ レイヤー名で設定するチェック・代替テキスト — 画像レイヤー名に alt: を付けて設定（1.1.1 Non-text Content）・見出し構造 — テキストレイヤー名に h1:〜h6: を付けて設定（1.3.1 Info and Relationships）・フォーカス順序 — レイヤー名に f1:〜f99: を付けて設定（2.4.3 Focus Order）■ 変数リンター・Figma変数にバインドされていないハードコード値を検出（色・余白・角丸・エフェクト）■ カスタム設定 / チーム共有・コントラスト比やターゲットサイズの閾値を自由にカスタマイズ・チーム設定として保存 — ファイルを開いている全員に共有・確認ダイアログによる誤編集防止※ 見出し構造とフォーカス順序のチェックには、トップレベルフレームに page:を付けてページ宣言が必要です。レイヤー名の例:alt: 商品の写真noalt（装飾画像）h1: ページタイトルf1: 検索バーpage: ホーム詳細: https://figmanavi.pages.dev