Dev Modeをデザインシステムのワークフローに統合した後、私はチームがこの強力なツールを使いこなすのに役立つ、いくつかの洞察を得ました。ここでは、私の主な学びを紹介します。
Dev Modeとの1年：エンジニアリングマネージャーが得た10の教訓を共有
Figmaが2023年のConfigでDev Modeを発表したとき、私は興味を持ちつつも懐疑的でした。私はアウトドア用品とスポーツ用品の小売業者であるDecathlonのエンジニアリングマネージャーとして、新しいツールを試すことには積極的です。その一方で、多くの有望なツールが、デザインと開発のワークフローを真に統合するという点で期待に応えられないのを見てきました。それでも、1年間の実践経験を経て、Dev Modeが私たちのチームにとって非常に革新的なツールであることがわかりました。
特に際立っていたのはCode Connectという機能で、これが私たちのデザインシステムのワークフローを大幅に向上させました。Code Connectは、Figmaのコンポーネントを実際のコードコンポーネントに直接リンクすることで、デザインと開発の間でのプロパティの整合性や命名規則、状態管理といった継続的な課題に対処します。これは、特にコードとデザインで異なる構造を持つ複雑なコンポーネントを扱う際に非常に価値があります。ここで私が学んだ主な教訓を紹介します。
デザイントークンとは、視覚言語を定義する小さな繰り返し可能な要素のことです。これらのトークンをデザインツールで適切に表示することは、開発チームへの引き継ぎにおいて大きな成功を収めました。
1. 小さく始め、大きく考える
開発者は確立されたワークフローを持っており、そこに新しいツールを追加するとフラストレーションがたまることがあります。理解できることですが、一部のチームメンバーは本格的にDev Modeを試すことに対して慎重でした。ワークフロー全体を見直すのではなく、小さなことから始め、Figmaバリアブルを使用してデザイントークンで素早く成果をあげることに集中しました。
ヒント：Figmaのバリアブルエイリアスを使用して、デザイントークンに明確な階層を設定します。このアプローチは、セマンティックな構造を通じてテーマの実装を促進し、チームメンバーがシステムのフレームワークを理解しやすく、適用しやすくします。
バリアブルの適用範囲設定機能により、背景色をテキストに使用したり、スペーシングの値をボーダー半径に使用するなどの誤った適用を防ぎながら、精密なコントロールが可能になります。コードの構文をカスタマイズして、バリアブル名がプラットフォーム全体での開発者の規則に一致するようにしました。カラートークンを更新すると、開発者は対応するコードの変更を即座に確認できます。
2. 高度なインスペクション機能を活用する
Flexboxは、ウェブページのフレキシブルでレスポンシブな1次元レイアウトを作成するためのCSSレイアウトモデルです。これにより、アイテムのサイズが不明または動的であっても、コンテナ内のアイテムの整列やスペースの分配が簡単に行えます。
Dev Modeのインスペクション機能は、複雑なレイアウト（Flexboxを含む）を効率的に処理し、洗練されていて実装が容易なコードを生成するため、私たちのワークフローを大幅に改善しました。
これらの機能により、デザインシステムチームはUIコンポーネントを精査でき、CSSやiOS（SwiftUI、UIKit）、Android（XML、Compose）スタイルなどのプロパティを開発環境内で直接確認できます。この方法で、デザイナーはコンポーネントが正確な仕様で構築されていることを確認できます。また、FigmaのVSCode拡張機能を使用することで、CSS、Compose、またはSwiftUIの実装を迅速にナビゲートするためのオートコンプリート機能を活用できます。
3. 完了の定義を一致させる
デザインシステムのドキュメントを最新の状態に保つことは常に難しいと感じてきました。それ自体がフルタイムの仕事のように思えることもあります。私の経験では、デザインの意図や具体的な要件がデザイナーと開発者の間で翻訳される過程でしばしば失われることがあります。Dev Modeのドキュメントとアノテーション機能は、情報の維持と共有方法を大きく変革しました。
アノテーション機能により、デザイナーはデザインプロパティやその他の重要な情報をファイル内に直接定義できます。配置やサイズのような定義された値とフリーテキストを混在させたり、開発者が間隔やサイズを視覚化するのに役立つ測定値をすばやく追加したりすることができます。デザイナーは、開発者との連携時にアノテーションに直接リンクすることで、わかりやすくすることができます。
私たちは、各コンポーネントに包括的なドキュメントを含むシステムを実装しました。これには、GitHubソースコードへのリンク、READMEファイル、および関連するプレイグラウンドが含まれています。このアプローチにより、すべてのチームメンバーが最新の情報に一貫してアクセスできるようになり、関連リソースを探す時間が大幅に削減されました。私たちは現在、「Figmaにリンクされていないものは存在しない」というルールを設けています。
チーム独自の「完了の定義」を確立し、デザインシステムへの貢献を管理する方法については、UXデザインコンサルタントであり創設者でもあるWart Burggraafによるこちらの記事をお読みください。
Code Connectを始めるには、GitHubリポジトリでNPMパッケージのインストールおよび設定に関する説明を確認し、さらに詳しくはこちらのドキュメントをご覧ください。
Code Connectが特に効果的でした。実際のコンポーネントコードをFigmaのコンポーネントにマッピングすることで、製品チーム全体でのデザインシステムの採用が大幅に増加しました。各コンポーネントの「完了の定義」にこれを組み込むことで、正しいコードドキュメントがデザインに直接リンクされるようにすることをお勧めします。
4. プラグインで機能を強化する
Dev Modeはそのままでも強力ですが、プラグインを使うことで特定のニーズに合わせてカスタマイズできます。ここでは、私たちのワークフローに大きな影響を与えたプラグインをいくつか紹介します。
- GitHubおよびJiraの統合：これにより、イシューやプルリクエストをコンポーネントに直接リンクでき、トラッキングや実装の精度が向上します。
- VS Code用Figma：この拡張機能により、開発者はVisual Studio Codeから直接Figmaのデザインにアクセスし、検査することができます。
カスタムソリューションの開発をためらわないでください。私はVariables Converterプラグインを作成し、Figmaのバリアブルをさまざまなコードフォーマットに変換できるようにしました。このプラグインは現在、5,000人以上のFigmaユーザーに利用されています。
Variables Converterプラグインは、Figmaの変数をCSSカスタムプロパティ、JavaScriptバリアブル、Composeバリアブル、SwiftUIバリアブルに変換するプロセスを簡素化します。
Romain Dao氏（シニアプロダクトデザイナーでThe Cacatorès Theoryの創設者）とLaurent Thiebault氏（Decathlonのエンジニアリングマネージャーおよびデザインシステムリード）によるデモをご覧ください。Dev Modeがデザイナーと開発者のコラボレーションに与える影響について詳しく学べます。[フランス語のみ]
より高度なカスタマイズを行いたい場合は、Figma REST APIを探ってみてください。これは、特に新しいバリアブル関連のAPIを使用して、広範な自動化および統合機能を提供します。Figma variables GitHub Action Exampleリポジトリでは、Figmaのバリアブルとデザイントークン間で双方向同期を設定する方法が示されており、APIのパワーと柔軟性を実感できます。
5. コンポーネントプレイグラウンドを使う
マルチバリアントチップコンポーネントは、一貫したルック＆フィールを保ちながら、コンテンツのフィルタリングからアイテムのタグ付けまで、さまざまな目的に対応するために形を変えることができる、デザインシステムにおける汎用性の高いビルディングブロックのようなものです。
Dev Modeのコンポーネントプレイグラウンドは、実験に最適なツールです。コンポーネントやインスタンスが選択されているときに、インスペクトパネルからアクセスできます。新しいマルチバリアントのチップコンポーネントを導入した際、プレイグラウンドを使用することで、さまざまな構成をテストし、初期デザインでは考慮していなかったエッジケースを特定することができました。
Code Connectはコンポーネントプレイグラウンドとシームレスに統合され、パラメータが調整されるとリアルタイムで更新されます。私たちのケースでは、デザインの単一のチップコンポーネントがウェブ開発では3つの異なるコンポーネントに変換されます。この統合により、プロパティを変更する際にコードのリアルタイムな更新を見ることができます。
6. バージョン管理とビジュアル比較を取り入れる
変更比較機能はデザインシステムチームにとって非常に貴重です。コンポーネントの変更を時間の経過とともに簡単に追跡し、異なるバージョンを並べて比較し、必要に応じて以前のイテレーションに戻すことができます。この機能により、デザインシステムの迅速なイテレーションに自信を持つことができ、ブランチ作成ともスムーズに連携し、チームがメインシステムを乱すことなく並行して更新作業を進めることができます。
アクセシビリティを向上させるためにボタンコンポーネントを更新した際、ビジュアル比較機能を使用して、製品組織全体に変更を明確に伝えました。この透明性は移行をスムーズにし、アップデートへの賛同を高めるのに役立ちました。
7. フォーカスビューで集中する
Dev Modeのフォーカスビューは、私たちのワークフローで使用しているもう一つの強力な機能です。フォーカスビューは、開発準備が整った特定のデザインに集中するのに役立ちます。このビューを使うことで、デザインを明確に孤立させた状態で、インスペクトやプラグインタブなどのDev Modeツールにアクセスできます。これは、個々のレイヤーを精査したり、デザインに特化したバージョン履歴を追跡したり、デザインを完了にする前に必要な変更がすべて行われているかを確認するのに特に便利です。
この機能は、ボタンコンポーネントの更新を最終化する際に特に役立ちました。フォーカスビューを使うことで、デザインを詳細に検査して見落としがないようにし、開発者とのスムーズなコミュニケーションを促進することができました。
8. コラボレーションの文化を育む
Dev Modeの可能性を最大限に引き出すために、プロジェクトのすべての段階でデザイナーと開発者が一緒に作業する共同セッションを実施しています。プロジェクトの開始時には、チームが自由にコンポーネントのプロパティ、バリアント、動作をドラフトし、洗練させるための共同FigJamセッションを行います。アイデアが形を整えていくと、シームレスにDev Modeに移行し、この共有スペースを使用して進捗を可視化し、期待を一致させ、マイルストーン達成を祝います。このアイデア出しから開発への流動的な移行は、サイロを打破し、プロセス全体でチームメンバー全員の専門知識が活用されるようにします。
9. 反復的な考え方を維持する
Dev Modeを私たちのデザインプロセスの動的なコンポーネントと捉え、定期的なイテレーションと改善を行っています。デザインシステムが進化するにつれて、Dev Modeの使用方法も進化しています。
定期的に、四半期ごとのシステムユーザビリティスケール（SUS）調査などの手法を通じてフィードバックを集めます。これらの評価は、デザイナーと開発者がライブラリとどのようにやり取りしているかに関する貴重な洞察を提供し、優れた点と改善の機会を特定するのに役立ちます。これらの結果を次のイテレーションに役立て、改善の好循環を生み出しましょう。
10. 好奇心を持ち続け、学び続ける
私たちはDev Modeの新機能やアップデートを常に探っています。その進化を把握することで、プロセスの継続的な改善を図っています。トレーニングや個人の成長に時間を割き、これらの要素を定期的なルーティーンに組み込んでいます。
ドキュメント、ウェビナー、コミュニティフォーラムなど、Figma が提供するすべてのリソースを見てみることをお勧めします。継続的な学習に取り組み、KPIで進捗を確認することで、私たちは常にスキルを高め、新しいツールやテクニックに適応しています。
Dev Modeとの1年を振り返って
Dev Modeを使い始めて1年が経過し、このツールが私たちのデザインシステムのワークフローを大幅に改善したことは明らかです。特に複雑なコンポーネントの取り扱いには課題が残っていますが、デザインと開発のギャップを埋めるDev Modeにより、チームがより密接に連携し、より一貫性のある高品質なユーザー体験を実現することができました。
デザインシステムの導入やデザイナーと開発者のコラボレーションに苦労しているチームには、Dev Modeを試してみることをお勧めします。小さく始め、初期の課題に備え、必要に応じてカスタマイズすることを躊躇しないでください。整合性、効率性、コラボレーションに関する潜在的な利点は大きいです。未来に目を向けると、Dev Modeが私たちのデザインシステムの実践をどのように形成し続けるのか、とても楽しみです。