見出し画像

Figmaのバリアブルでカラー管理をした話

なついもえこ

はじめまして。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 playground | Figma Community](https://www.figma.com/community/file/1257293015812015527/🇯🇵-日本語版｜Variables-playground)

やったこと

まずはカラートークンを管理しているファイルにVariablesの設定をしました。
ざっくり手順は以下です。

  1. 開発で利用するカラー変数を、Variablesに登録

    1. 色を拾いやすいように用途別にグループ化

    2. Inspectで伝わりやすいように実装と同じカラー名称をつける

  2. お客さま環境を参考に、モードにお客様のカラー設定を登録

  3. カラーVariablesをPublish

※キャプチャはブログ用に作成したサンプルです

実際はもっとたくさんのカラー定義があるため登録作業は結構大変でしたが、作業自体は半日程度で完了しました。
Publishすると、スタイルを利用するのと変わりなくVariablesで設定したカラーが使えるようになります。あとは地道にデザインデータへの反映を行うのみです。

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

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

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

  • どこに何色を使うのかわかりやすくなり、カラー選択に迷わなくなった

  • 実際のお客さま環境を再現してデザイン確認ができるようになったので、品質担保しやすくなった

  • 実装上のカラー名称と揃えたことでエンジニアとのコミュニケーションがスムーズになった

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

さいごに

Variablesでのカラー管理についてご紹介しましたが、ひとつの活用方法として少しでも参考になれば嬉しいです。今回の活用方法はプロダクト構造に依存しますが、カラーに限らずVariablesの素敵な活用方法があれば是非教えていただきたいです！
今後もFigmaの新機能のリリースが楽しみです☺️ みなさんも良きFigmaライフを…！


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

参考）
https://tech.excite.co.jp/entry/2023/06/26/115612#%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90


この記事が気に入ったらサポートをしてみませんか？