はじめまして。hacomonoのプロダクトデザイナーもえさんこと、なついもえこ（@moeko_n）です

hacomonoではFigmaのVariables（バリアブル）を取り入れてカラー管理をしています。

以前はカラー管理に課題があったのですがVariables機能でかなり運用改善ができたので、今回は導入の背景から活用方法までをご紹介します。

Variables導入の背景

hacomonoでは店舗運営のためのプラットフォームを提供していますが、エンドユーザー向けのWebサイトを運営者が自由にカスタマイズできるようになっています。

背景色や文字色、プライマリーカラー、セカンダリーカラーも自由に設定できます。

そのためエンドユーザー向けに新しいUIを検討するときは、いくつかのお客さまのカラー設定をピックアップし、視認性は問題ないか？デザインを起こして確認する必要があります。

また、実装上も複数のカラー変数が定義されているので、どのカラー変数を利用するか？エンジニアに細かく伝える必要がありました。

しかしデザインシステムも無く、当時は臨時で作ったプリミティブなカラースタイルがあるのみでした。

お客さま環境を確認しつつ複数のデザインパターンを作ったり、エンジニアへのカラー指定も一つ一つ指示を入れていく必要があり、これが中々コストがかかり骨の折れる作業でした…。

運用を変える必要があるな…でもスタイルでやるのも限界があるな…と考えているときに現れたのがVariablesでした。ありがとうVariables🙏 ありがとうFigma🙏

Figmaの機能「Variables」って？

今年6月のアップデートで実装された新機能です。

カラーや文字列、数値、真偽値を再利用可能な形で定義でき、デザインデータ上でそれらを利用することができるようになりました。

特徴は、1つの定義に対して値を複数入れられるところで、これをモードと呼びます。以下のキャプチャを例にするとLightとDark部分がそれに当たります。

※ 現時点ではFigmaの契約プランが「スターター」の場合はモードは1つしか設定できないためご注意ください🙇‍♀️

個人的に好きな機能がColor scopingで、「text」のVariablesはTextカラー選択時にしか表示されない…というように利用箇所を制限することもできます。これを設定するとよりデザイナーが作業しやすくなりますね！

Variablesによってライトモードとダークモードのデザインや、レスポンシブのデザインをFigma上で簡単に確認できるようになります。とっても便利です🎉

もっと詳しく知りたい方は、是非Figmaのplaygroundで詳細をチェックしてみてください🙏

まずはカラートークンを管理しているファイルにVariablesの設定をしました。

ざっくり手順は以下です。

開発で利用するカラー変数を、Variablesに登録
1. 色を拾いやすいように用途別にグループ化
2. Inspectで伝わりやすいように実装と同じカラー名称をつける
お客さま環境を参考に、モードにお客様のカラー設定を登録
カラーVariablesをPublish

実際はもっとたくさんのカラー定義があるため登録作業は結構大変でしたが、作業自体は半日程度で完了しました。

Publishすると、スタイルを利用するのと変わりなくVariablesで設定したカラーが使えるようになります。あとは地道にデザインデータへの反映を行うのみです。

メンバーに手伝ってもらいつつデザインデータにカラー反映を完了させ、お客様のカラー設定をデザイン上で瞬時に確認できるようになりました！簡単＆便利！

ちなみに…Variables名称（カラー変数名）はDevモードのInspect＞Styleにしっかり表示されます。これで開発とのコミュニケーションもスムーズです。

以上の流れでカラー管理を見直したところ、以下のように作業コストの削減ができました！

作業量の割に得た効果は大きかったと感じるので、hacomonoのプロダクト構造にマッチした機能だったと実感しています。

Variablesでのカラー管理についてご紹介しましたが、ひとつの活用方法として少しでも参考になれば嬉しいです。今回の活用方法はプロダクト構造に依存しますが、カラーに限らずVariablesの素敵な活用方法があれば是非教えていただきたいです！

今後もFigmaの新機能のリリースが楽しみです☺️ みなさんも良きFigmaライフを…！

余談ですが…プリミティブカラーでセマンティックカラーを定義する対応もいずれやりたいです。

参考）

株式会社hacomonoでは一緒に働く仲間を募集しています！
採用情報や採用ウィッシュリストも是非ご覧ください！