デザインファイルの“汚れ”は、チームの成熟度を如実に表す。スタイル名が混沌とし、色は直でスウォッチから選び、コンポーネントのインスタンスを勝手に切り離す。個々の画面では問題が見えなくても、ファイルが巨大化するとメンテナンスの悪夢となる。Offspecは、その悪夢を未然に防ぐために作られたFigmaプラグインだ。
やることは非常にシンプル。スキャン対象を指定して実行すると、選択範囲の中で“規則から外れている箇所”を洗い出してくれる。生の色値、テキストスタイルに未リンクの文字列、親コンポーネントから乖離したインスタンス、グリッドの倍数から外れた位置やサイズ。こうした不整合同士を、カテゴリ別かつ深刻度順のリストにしてくれるので、大量のレイヤーを手で探す手間が一気に減る。
チェック対象は4つの“あるある”
Offspecの公式説明を見ると、主なチェック項目は次の4つに集約される。
- raw colors: スタイルや変数を使わずに直書きされた色。
- 未リンクのテキストスタイル: テキストスタイルライブラリと関連付けられていない独立した文字属性。
- 切り離されたコンポーネント: マスターコンポーネントとの関連が切れたインスタンス。
- off-grid spacing: グリッドやスペーシング倍数に乗らない座標・サイズ。
この4つは、デザインシステムを運用するチームなら毎週のように遭遇する問題だ。さらに、公開済みのスタイルライブラリや“参考にするフレーム”を基準にチェックする機能も備えている。コードで仕様を定義しなくても、デザインの綺麗なフレームを基準に指定すれば、規約がブレない。
実行単位の柔軟さとAIサマリー
オプションでフレーム単位・ページ単位・ファイル全体から選べる。軽く確認したいだけなのにファイル全体をスキャンするのは時間のムダ。逆に、デザイン資産を棚卸しするならファイル全体を一気に走らせて、深刻度の高い順に潰していくのが効率的だ。結果はカテゴリごとにグループ化され、深刻度でソートされる。デザインリードにとっては、優先順位を考える手間が省けるのはありがたい。
少し変わっているのが、Claude / OpenAI / Gemini のAPIキーを任意で連携できる点だ。問題のリストをLLMに渡し、「どこから直すべきか」のサマリーを生成してくれる。必須ではないけれど、デザインシステムに不慣れなメンバーや、件数が多すぎて目を通すのが大変なときの“加速装置”になる。
注意点として、AI機能を使う場合、外部APIキーを自身で用意し、ファイル内のデータがクラウドに送信される。そのため、機密性の高いプロジェクトでは利用ポリシーをよく確認しておきたい。
どういうチームに刺さるのか
Offspecのターゲットは明確だ。デザイナーなら納品前のセルフチェックに、デザインリードならチームの品質管理に、デザインシステム担当なら複数プロダクト横断の一貫性チェックに使える。Figmaの中で完結するので、ツールを往復するストレスもない。
一方で、いくつかの制約も存在する。Figma専用であるため、Sketchなど他のツールをメインに使うチームは対象外。また、公式が公開している技術情報は限定的で、詳細な判定ロジックや大規模ファイルを扱った際のパフォーマンスは、実際に使ってみなければわからない。AIサマリーも、APIキーを交渉する手間があるため“オープンザボックス”とはいかない。
全体の印象として、Offspecは“大きく余計なことをせず、一貫性チェックにフォーカスする”という割り切りが気持ちいい。フル機能の監査ツールを求める人より、まず“今あるファイルの乱れ”を可視化したいチームにはちょうどいい。気になったら、小さな試作フレームに対して1回走らせてみるといい。思いのほかスッキリするはずだ。
コメント
コメントはまだありません
最初のコメントを書きましょう