この記事はクラウドワークスグループ Advent Calendar 2024 シリーズ1の16日目の記事です。

はじめに

こんにちは。クラウドワークスでエンジニアをしている甲斐(@karukan029)です。ハイクラス副業マッチングプラットフォームCrowdLinksを担当しています。
今回はデザイナー不在のチームでのデザインシステム運用についてお話しします。これからデザインシステムの導入を検討している方の参考になればと幸いです。

デザインシステムの定義に関する説明は本記事では取り扱わないため、先人の方々の記事や書籍をご参照ください。

デザインシステム採用の経緯

ボタンなどの基本的な部品はありましたがデザインの基準・方針がなく、1から考える機会が多くありました。共通のコンポーネントは存在していたものの一覧性がないため、プロダクトのUIに一貫性を持たせることが難しくなっていました。
そこで、フロントエンドのリプレースのタイミングに合わせてデザインシステムを導入することにしました。

デザインシステムの構成

「無理なく運用できる範囲で小さく始める」ことを基本とし、すぐに役立つものから整備していきました。

コンポーネント

Figmaでデザインシステムのコンポーネントのページを作成することで、各コンポーネントのパターンを一覧性を持って確認できるようになりました。
実装したコンポーネントはStorybookで管理しています。これにより、一覧性を持ってコンポーネントを確認できるようになりました。また、Storybookにはアクセシビリティチェックの拡張機能(addon-a11y)を追加し、警告が出た場合には対応することで一定以上のアクセシビリティを担保できるようにしています。

デザイントークン

デザイントークンは、Tokens StudioというFigmaのプラグインを使用して管理しており、GitHubと連携することでデザイントークンの定義をコードに同期させています。コード上でCSS変数として参照できるようにしており、基本的にはここで定義しているデザイントークンを用いてスタイリングしています。デザイントークンとコードの連携についての詳細はここでは割愛させていただきます。(要望があれば、別で具体的な話をするかも)

デザイントークンは、具体的な値を持つPrimitiveトークンと役割を持たせたSemanticトークンに分けて定義しています。

Primitiveトークン

具体的な値を定義したもの
濃淡・サイズなどでパターンを定義する
- 例：色の場合
  - links-blue-900、links-blue-700など

Semanticトークン

値に役割を持たせて定義したもの
Primitiveトークンの値を用いて定義する
- 例：色の場合
  - Semanticトークン名：primary
    - 役割：プロダクトの印象を司る色、主要なメッセージやアクションで用いる
    - 値：links-blue-900

デザイン・スタイリング時はSemanticトークンを使用するようにしており、役割に応じた値を用いることでプロダクト全体のスタイリングに一貫性を持たせるようにしています。

デザイナーが不在になってからの運用状況

PO・エンジニアでデザインシステムを使用して、UIのデザインがある程度できていた

デザインシステムがあるので、そのルールに沿ってデザインすればデザイナー以外でも複雑な要件でなければデザインできるようになっています。これは、デザイントークンを定義していたことがよかったです。感覚的に決めるというより役割にあっているものを選択してデザインを進めることができるため、設計以外で悩む部分を少なくできました。

別チームのデザイナーとの協業を進めやすかった

別チームのデザイナーの方と協業する際、デザインシステムがあることで背景やデザインのルールをスムーズに共有できました。
Tokens Studioの使い心地についてデザイナーの方にお聞きしてみたところ、使いづらさはなかったそうです。強いていうなら、ノートPC使う際Tokens Studioが画面の半分近くを占有するため画面が狭くなる点くらい...

加えて、GitHubと連携する関係でデザイナーの方にもGitHub連携の設定をしていただく必要がある点は、Tokens Studio使用のデメリットですね。今改めて検討するなら、Figmaの機能のみで完結するVariablesでデザイントークンを管理、Figma APIを使用したコードとの同期を検討してみるのも良さそうです。

おわりに

「無理なく運用できる範囲で小さく始める」ことを基本とし、すぐに役立つものからデザインシステムを整備していったことで、状況が変化した後も役立つものとしてデザインシステムを運用できています。
デザインシステムなんて自分達にはまだ必要ないと思っている方、これを機に「無理なく運用できる範囲で小さく始める」をキーワードにデザインシステム構築をぜひ検討してみてください。