《Figmaと運用 Vol.5》弁護士ドットコムの事例に学ぶ、Figma×デザイントークンの実践

デザインと開発を内製で進める弁護士ドットコムでは、Figmaを軸としたデザインシステムと制作プロセスの進化が続いています。デザイントークンの管理やライブラリ分割、コード連携の自動化など、試行錯誤を重ねる中で重視してきたのは、単なるツール整備ではなく「なぜそのデザインなのか」という意図を共有するための仕組みづくりでした。FigmaやFigJamを活用したコラボレーションは、職種の垣根を越え、ものづくりの進め方そのものを変えつつあります。本記事では、弁護士ドットコムにおけるFigma活用とデザインシステム運用の現在地を紐解きます。（「Web Desigining 2025年8月号」より抜粋）

プロフィール

POINT①｜ライブラリを分散管理して、誤操作を防ぐ

弁護士ドットコム株式会社は、2005年より法律相談ポータルサイト「弁護士ドットコム」を運営しています。地域や分野から弁護士・法律事務所を検索できるほか、サイト上で弁護士に直接相談することも可能で、日本最大級の無料法律相談ポータルサイトとして幅広くご利用いただいています。

当社では、デザインと開発の両方を内製できる体制を整えています。Figmaを導入したのは2019年頃で、それまでは「Sketch」や「InVision」などのツールを使用していましたが、共同編集機能の優位性からデザイナー主導で移行しました。その後、FigJamやDev Modeの登場によりエンジニアの活用も進み、社内全体へと浸透していきました。

弁護士ドットコムでは、もともとデザイナーの業務範囲が広く、デザインシステムの構築もデザイナーが主導して担ってきました。その中で重要な役割を果たしているのが「デザイントークン」（色やフォントサイズ、余白といったデザインのスタイル要素を変数として定義し、再利用性や一貫性を高めるための仕組み）です。

当初は「Figma Tokens」というプラグインを用いてトークン管理を行っていましたが、現在はFigmaのネイティブ機能である「バリアブル」への移行を進めています。Figma Tokenは、トークンの数値を数式で指定できるなど高度な機能が備わっていた一方、バリアブルはまだ発展途上と感じられる部分もあります。それでも、今後の拡張性に期待しながらネイティブ機能への移行を進めているところです。

当社のデザインシステムは、2019年に初期バージョンを構築し、現在はバージョン3への移行段階です。バージョン3では、ライブラリの分散管理が大きなテーマとなっています。全体で共通するデザイントークンやスタイルをまとめた「コアライブラリ」と、それをもとに各プロジェクトで活用する「テーマライブラリ」に分けることで、共通部分の誤編集といった事故を防いでいます。

現時点では、継承先の内容を継承元にマージするような運用は行っていませんが、今後はそのような作業もプロセスに組み込んでいくことを検討しています。ただし、単に差分を統合するのではなく、「なぜそのデザインにしたのか」といった背景や意図まで含めて共有できる仕組みが重要だと考えています。技術的な整備だけでなく、コミュニケーションの設計もあわせて進めていくことが、今後の課題となっています。

POINT②｜Figmaでの変更を、自動処理でコードに反映

弁護士ドットコムの開発体制では、ディレクター、デザイナー、エンジニアといった異なる職種のメンバーが密に連携しています。Figmaのコメント機能とSlackでのコミュニケーションを併用することで、「誰かが勝手にファイルを触ってしまった」といったトラブルが起こりにくい体制を築いています。

こうした連携は、現在のようにチームの人数が少ないからこそ成り立っている面もあり、将来を見据えてより堅牢なワークフローの整備も進めています。

中でも重視しているのが、Figmaとコードの間で齟齬が発生しないようにすることです。例えば、デザイントークンの管理はFigma側ではなくコードを主体としており、差分管理もコードベースで行っています。Figma上での差分管理は煩雑になりやすく、人的ミスにつながるリスクがあるため、あえて使用していません。

作業効率を高めるために、自動化の仕組みも積極的に導入しています。FigmaのAPIを活用し、デザイントークンが更新されると、その内容が自動的にコードへ反映されるようにしています。具体的には、GitHub Actionsを用いてFigmaから最新データを取得し、フロントエンドのビルドを自動で実行。その結果は、UIコンポーネントの表示確認に用いる「Storybook」で確認できる仕組みを構築しています。

現在、弁護士ドットコムのフロントエンドは、混在していたjQueryとReactによる構成から脱却し、段階的にReactベースのモダンな構成へと移行中です。新しいデザインシステム「バージョン3」への移行と連動しながら自動化を推進し、デザインと開発がシームレスに連携できる仕組みづくりを整えています。

POINT③｜FigJamにアイデアを並べ、即座に意思決定

弁護士ドットコムでは、ブレインストーミングやプロジェクトの振り返りといったミーティングでFigJamを積極的に活用しており、幅広い職種のメンバーがコラボレーションに参加しています。

たとえば、新機能の企画段階では、ミーティングの参加者がFigJam上に参考画像などを配置しながら意見を出し合います。その場でワイヤーフレームを作成することもあれば、エンジニアが参加してFigJam上でデータベースを擬似的にモデリングし、UIの構造を検討することもあります。

このように、FigmaとFigJamの活用により、ものづくりが「個」から「コラボレーション」を軸としたものにシフトし、仕事の進め方そのものが大きく変わったと実感しています。

COLUMN｜AIの活用による働き方の変化に期待

　今後は、FigmaでのAI活用にも注目しています。AIツールでデザインを自動生成したり、あるいはFigmaで作成したアセットをAIに取り込んで再活用したりなど、さまざまな選択肢が出てくるでしょう。
　Figmaの導入によって、かつては分業的だったデザインプロセスがチームでのコラボレーションに進化しました。AIの導入においても、最初から手を動かすのではなく「生成された具体案を見ながら考える」というスタイルへと変わっていく可能性があります。AIをどう取り入れるかは、今後の大きなテーマです。

取材・文：小平淳一
※本記事は「Web Desigining 2025年8月号」より抜粋しています。