Design Rule Checker

About this plugin

デザインシステムの一貫性を保つための自動チェックツールです。Figmaファイル内のデザイン要素を自動でスキャンし、設定されたデザインルールに違反している箇所を瞬時に検出します。

使い方

チェックしたい要素、または、ページを選択し「チェック開始」ボタンをクリック。

ルールに違反している要素の一覧が表示されたら、クリックして修正箇所を確認する。

主な機能

6つのチェック項目

1. カラー: ライブラリ変数やスタイルが正しく適用されているかチェック
2. フォント: 許可されたフォントファミリーとウェイトが使用されているかチェック
3. 余白: 4pxグリッドに準拠した余白設定かチェック
4. ボーダー: 適切なボーダー設定がされているかチェック
5. サイズ: 4pxグリッドに準拠したサイズ設定かチェック
6. レイアウト: オートレイアウトや制約が正しく設定されているかチェック

高度なフィルタリング機能

1. 違反の種類別フィルタリング
2. フレーム別フィルタリング
3. レイヤー名での検索機能
4. リアルタイムプレビュー
5. カスタマイズ可能な設定
6. 各チェック項目のON/OFF切り替え
7. チェック対象ノードタイプの選択
8. 非表示レイヤーの含む/含まない設定

使用シーン

1. デザインシステムの品質管理
2. チーム開発でのデザイン一貫性確保
3. デザインレビュー前の事前チェック
4. 新規メンバーのデザインルール教育

特徴

1. 直感的なUI: ダークモード/ライトモード対応の美しいインターフェース
2. 高速スキャン: 大量のレイヤーも素早くチェック
3. 詳細な報告: 違反箇所をワンクリックでフォーカス
4. 柔軟な設定: プロジェクトに合わせたカスタマイズが可能

デザインの品質向上とチームの生産性向上に貢献する、デザイナー必携のツールです。