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)※ 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 andRelationships）・フォーカス順序 — レイヤー名に f1:〜f99: を付けて設定（2.4.3 Focus Order）※ 見出し構造とフォーカス順序のチェックには、トップレベルフレームに page:を付けてページ宣言が必要です。レイヤー名の例:alt: 商品の写真noalt（装飾画像）h1: ページタイトルf1: 検索バーpage: ホーム詳細: https://figmanavi.pages.dev