Figmaでデザインシステムのワークフローを効率化する方法

誰もが経験したことがあるでしょう。新しいデザインシステムのプロジェクトを始め、窓の外をぼんやり眺めながら、目の前の膨大な作業量に圧倒されるあの瞬間です。カラーパレット、タイポグラフィスケール、スペーシングシステム。デザイナーアドボケイトとして、これらを微調整するのは非常に楽しい作業ですが、正直に言えば、完璧に仕上げるには途方もない時間がかかります。

このサイクルを何度も繰り返す中で、作業時間を大幅に節約し、私の「青-500問題」を解消してくれるツールとプラグインの組み合わせを見つけました。それぞれがコンセプトからコードまでの旅路の異なる側面に特化した、デザインシステムの共同操縦者のような存在です。そして何より素晴らしいのは?本日、Figmaでよくあるフラストレーションに対応する9つの新しいデザインシステム機能をリリースしました。Figmaで何が変わったのか、そしてこれらのアップデートが私のお気に入りプラグインをどれだけ強化するかを見ていきましょう。

モードとコレクションを簡単に並べ替え

もしこれまでにモードやコレクションの整理を試みたことがあるなら、その大変さはよくご存じでしょう。削除して作り直すたびにデザインが同期から外れてしまうという問題です。もう心配はいりません。今では、ドラッグ&ドロップで簡単に整理でき、すべてを思い通りに保てます。モードやIDは並べ替え時にも保持されるため、リセットや依存関係の破損を防ぎ、デフォルトモードの調整もスムーズに行えます。

小さな変更に思えるかもしれませんが、次のようなチームには大きな効果があります:

• よく使うコレクションを常に上部に表示したい
• 関連するモードをグループ化したい
• 製品ラインのリブランドや更新をしたい

9つの新しい利便性向上機能

本日、作業の摩擦を減らし、ワークフローを加速させるアップデートをリリースしました:

• メインコンポーネントへのショートカット: ソースに直接ジャンプ可能
• スタイルの複製・コピー: イテレーションを高速化
• バリアブルペイントの表示/非表示: 作業スペースをすっきり保つ
• コンポーネント説明のUI改善: 一目で内容を把握しやすく
• バリアブルモーダルをヘッダー全体からドラッグ: 操作性とアクセス性向上
• バリアブル変更の自動保存: 更新を保持するためのクリック不要
• コンポーネント名のツールチップ: ホバー時に素早く情報確認
• 編集ボタンの整列改善: より整った洗練された表示
• スタイルウィンドウのテキストオーバーフロー改善: 長い名前が切れないように

基盤を整える: 基本を押さえる

では、これらの機能をさらに強化するプラグインについて見ていきましょう。コミュニティプラグインは、ワークフローの特定の部分を大幅に効率化する可能性があります。ここでは、デザインシステムを構築する基礎段階、つまりカラーやタイポグラフィから始める段階で役立つツールを紹介します。

カラーパレットの作成

私たちの開発者アドボケイトであるJake Albaughが作ったCSS color-mix()は、まるでデジタルカラーラボのように機能するプラグインです。HSL、HWB、LCH、OKLCHなどの最新フォーマットを使って、バリアブル付きのフルパレットを生成できます。さらに、色同士が美しく移行する滑らかで自然なグラデーションも作成可能です。Peppercorn (以下で紹介)と組み合わせることで、Figma内で驚くほど高速にデザインシステムを構築できます。

CSS color-mix()を使えば、モダンなカラースペースに対応したスウォッチ、バリアブルランプ、単色やグラデーションの塗りを生成できます。

素早くカラ―ランプを作りたい場合は、Colorbox (Kevyn Arnott作)が便利です。彩度、明度、色相を直感的にフィルタリングしてカラースケールを作り、JSON形式やFigmaに直接エクスポートできます。作成したパレットは、新しいバリアブル整理機能を使えば、思い通りに簡単に並べ替え可能です。

Colorboxを使えば、数秒でカラ―ランプを生成・調整でき、FigmaやJSON形式へ直接エクスポート可能です。

また、WCAG準拠のフルカラーパレットを探しているなら、Kevin MuldoonのThe Genome Color Toolが最適です。システム内でプライマリ、セカンダリ、ターシャリ、ポジティブ、ネガティブ、ハイライト、アテンション、インフォ、システム、ニュートラル用のカラ―ランプをプリロード済み。それだけでなく、ユニバース、IBM カーボン、Salesforce Lightning、Adobe Spectrum、Ant、Materialといった馴染みのあるデザインシステムのカラーパレットも多数プリロードされており、JSON形式でエクスポートすることもできます。

The Genome Color Toolはアクセシビリティを意識したカラービルダーとして活用できます。

タイポグラフィシステムの効率化

タイプスケールの構築は、これまで非常に手間のかかる作業でした。Peppercornはそれを完全に変えます。見出しから本文までのタイプシステムを、フォントファミリー、ベースサイズ、スケール比率に基づいて簡単に設定できます。ライブプレビューで即座に仕上がりを確認でき、JSONやCSSとしてエクスポート可能です。Figmaのバリアブル管理機能の改善により、タイプシステムの保守も容易になりました。

Peppercorn を使って完全なタイプシステムを構築し、開発者が必要とするすべてをエクスポートしましょう。

ドキュメンテーション: システムを明確でアクセス可能にする

システムを構築したら、デザイナーや開発者のパートナーが確認・採用・実装できるように、すべてを適切にドキュメント化する必要があります。これらのプラグインが、時間のかかる作業を効率化してくれます。

バリアブルステッカーシートの作成

特定のバリアブルコレクションをドキュメント化する必要がある場合、Print Variables (MINKMINKs作)は、美しくフォーカスされたステッカーシートを作成します。バリアブルの説明も含まれており、各値の目的をチームメンバーが理解するのに役立ちます。新しいバリアブル整理機能と組み合わせて使用することで、文脈に沿った動的なドキュメントを作成できます。

Print Variablesを使って、バリアブルの説明付きの魅力的なステッカーシートを作成しましょう。

包括的なドキュメント作成には、Auto Documentation (Eddy Salzmann作)が便利です。バリアブルをコレクションやモードごとに整理して、ページ全体を生成してくれます。今後のコレクションやモードの並べ替え機能と組み合わせることで、実際の整理状況にぴったり合ったドキュメントを作成できます。

Auto Documentationを使って、バリアブルをコレクションやモードごとに整理したドキュメントフレームを作成しましょう。

より動的な管理をしたい場合は、Variables and Styles Listが便利です。更新可能なキャンバス上で、すべてのバリアブルをプリントできます。このウィジェットはボタン一つで更新できるのが特徴で、変更のたびにフレーム全体を再生成する必要はありません。

Variables and Styles Listを使えば、すべてのバリアブルをリアルタイムで確認でき、ボタン一つで更新可能です。

コンポーネントのバリエーションを可視化

Propstar (Gusso作)は、バリアントやプロパティのあらゆる組み合わせを包括的なテーブルで表示します。無限の組み合わせをクリックしてすべてが機能するかを確認する必要はありません。キャンバス上に全ての組み合わせを一覧化することで、精密に作られたコンポーネントの境界を簡単に確認できます。Figmaのプロパティパネル統合機能と組み合わせることで、このプラグインはコンポーネントの仕様を整理された状態で管理するのに役立ちます。

Propstarを使って、コンポーネントバリアントの全ての組み合わせを整理されたテーブルでマッピングしましょう。

コンポーネントに関するあらゆる情報を文書化する必要がありますか?Specs (Directed Edges Plugins作)は、バリアブル、スタイル、ネストされたコンポーネント、プロップ値などを網羅的なブレイクダウンを作成します。これはフルスペックシートを作るためのワンストップショップです。

Specsを使って、コンポーネントのあらゆる詳細情報を整理し、明瞭なドキュメンテーションとしてまとめましょう。

デザインシステムの監査

ドキュメントをレイヤーごと、またはプロパティごとにスキャンする場合は、Similayerを強くおすすめします。デザインシステムの監査や移行時に、実際に何百時間も節約できました。ステージングから本番へ移行した際には、Figma UI3 コミュニティファイルでも使用されました。

Similayerを使えば、行間、色、レイヤー名、またはそれらすべてに基づいた特定のレイヤーをデザイン内で見つけることができます。

デザインシステムの維持や更新の際には、Style Finder (Tafumi作)が救世主となります。このプラグインはドキュメント全体をスキャンし、スタイルやバリアブルのすべての使用箇所を一覧表示してくれます。これにより、地道な検索に費やす時間が大幅に削減され、システムのメンテナンスが格段に容易になります。

Style Finderを使用して、ファイル全体のスタイルのすべてのインスタンスを追跡しましょう。

システムが成長するにつれて、バリアブルの数も増えていきます。しばしば、命名規則を変更する必要が生じ、既存のセットを更新するために多くの手作業が発生します。ここで頼れるのが、CTRL Var: Rename Variables (Murph作）。このプラグインを使えば、グループやバリアブルのパターンに基づいて、一括で名前を変更することが可能です。

CTRL Var: Rename variablesを使用して、すべてのコレクションにあるローカルバリアブルの名前をまとめて変更できます。

実装: デザインと開発の橋渡し

最後の課題は、デザインシステムを効率的にコード化することです。前のステップだけでもかなり進めますが、デザインをコードに変換して開発と同等に整合させることで、プロセスをさらに最適化できます。

Export Import Variables (Jan Toman作)は、Figmaと開発の橋渡し役を担います。エンジニアチームから既存のトークンをインポートしたり、FigmaのバリアブルをJSONとしてエクスポートできます。もしJSONファイルがまだ用意できていなくても、このプラグインを使えばFigmaから直接エクスポート可能で、二重のメリットがあります。新しいバリアブル整理機能と組み合わせることで、エクスポートしたトークンは開発者が期待する構造を維持できます。

Export Import Variablesを使用して、Figmaと開発の間のデザイントークンのギャップを埋めましょう。

エクスポートの話が出たので、もしエンジニアチームがCSSを使って作業していて、トークン値をバリアブルとしてすぐにコピー&ペーストしたい場合は、Handoff (Convertiv作)がおすすめです。このプラグインはデザインも非常に洗練されており、情報量が多くても使いやすくまとめられています。

Handoffを使用して、デザインシステムのライブプレビューを作成し、開発者がコンポーネントの見た目や挙動を正確に把握できるようにしましょう。

また、迅速なコードエクスポートには、Variables Converter (Laurent Thiebault作)が便利です。FigmaのバリアブルをCSS、JavaScript、Compose、SwiftUIなど複数のフォーマットに変換できます。コレクションとモードを選択すると、きれいで即利用可能なコードが生成されます。新しいバリアブル整理機能と組み合わせることで、このプロセスはさらにスムーズになります。

Variables Converterを使用して、FigmaバリアブルをCSSからSwiftUIまで様々なコード形式に変換しましょう。

もしFigmaの外でスペックシートや完全なCSSバリアブルコードスニペットを作成し、共通の要素でプレビューも確認したい場合は、Shaperを試してみてください。このウェブツールはフルスケールのカスタマイザーで、フォントファミリー、パディング値、スペーシングスケール、プライマリカラーなどをプレビューウィンドウで設定でき、完了後にはCSSを取得できます。ダークモード用の値も提供されます。

Shaperを使用して、インターフェイススタイルをリアルタイムで微調整しながら、ライトモードとダークモードの両方で使えるクリーンなCSSコードを生成しましょう。

あなたのツールキットには何がありますか?

すべてをまとめると、私が新しいデザインシステムプロジェクトに取り組む際のアプローチは次の通りです:

1. 基盤を作る: CSS color-mix()とPeppercornを活用
2. すべてを整理する: Figmaの新しい並べ替え機能を活用
3. 徹底的にドキュメント化: Auto DocumentationとSpecsを活用
4. 一貫性を監査: Style Finderを活用
5. 開発へのハンドオフ: Export Import Variablesを活用

私は効率的になったと感じています。これらのデザインシステムのアップデート、プラグイン、ウィジェットを使えば、デザインシステム作業の時間を何時間も節約できます。その分、先週末にファーマーズマーケットで買ったクラフトコーヒー豆を挽く時間も増えますね。(オートミルクのフラットホワイトをお願いします!)

皆さんはデザインシステム作業でどのプラグインに頼っていますか?会話を続けたい方は、Xでぜひご連絡ください。そして、最新機能もお見逃しなく。皆さんのデザインシステムが感謝するでしょう。