Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化

しまむら2023-08-30

UI Designer

はじめに

こんにちは。フロントエンド開発センター(UIT) のUIデザイナーしまむらです。

LINEが保有する膨大なデータを安全かつ効率的に利活用できるData Catalog「IU Web」、UIツールキット「Astro」、アイコンライブラリ「LAICON」のデザインを担当しています。フロントエンドエンジニアやプロジェクトマネージャに近いところで、エンジニアとデザイナーの間に生じる認識のズレが起きないよう、Figmaを使ってUI設計をしています。

Figma Config 2023 アップデート

Figmaカンファレンス「Figma Config 2023」にて、新機能が続々とリリースされました。Dev ModeとVariablesを使って、ハンドオフプロセスをスムーズにし、デザイナーとフロントエンドエンジニアの連携がさらに強化できる2つの機能についてご紹介します。

Figma Dev Mode
Figma Variables

1. Figma Dev Mode

スイッチをOnに変えれば、Dev Modeに切り替わります。
今まで、フロントエンドエンジニアがFigmaのデザインを確認していると、UIを変更してしまった...という経験があるかと思います。Dev Modeでは、デザインファイルを干渉せずに、安全に確認することができるようになりました。また、開発者向けに、必要とするものを迅速かつ効率的に見つけられます。

Dev Mode Onとの違い

Dev Mode Off
今までデザイナーが制作したレイヤーがツリービューで大量に表示されていたため、レイヤーから画面ごとの区切りがとてもわかりづらいものになっていました。

Dev Mode On
Dev Modeのアップデートにより、左パネルに「Ready for development」の項目ができ、サムネイル付きのリストが表示されるようになりました。

Dev Modeの便利なところ

サムネイルをクリックすると、該当画面にフォーカスします。また、ショートカットキーの「←」「 →」を使えば、前後の画面へ切り替えができます。レイヤーの表示も、選択した画面のみの情報だけに絞られて、とてもコンパクトになりました。

懸念としては、アスペクト比に関わらず、全体が見える形で58×58pxのサムネイルにフィットするため、今回の管理画面では、見た目でページの判別ができません。プロモーションやコーポレイトなどページごとに要素が異なるサイトに向いていると思います。また、Frameの命名は、URIと同期させており、誰でもわかるように設定していますが、このサムネイルのファイル名は先頭から始まるため、長いパス名の後半が省略されてしまい識別が困難です。可能なら、末尾のパラメーターを優先して表示させたいです。

画面下部には、ページネーションが追加され、ページごとの全画面数と、現在位置が把握できるようになりました。

その他の機能

機能	内容	イメージ
Dev resources	開発リソースを集約し容易にアクセスできる
Compare changes	変更履歴/比較が確認できる
Playground	コンポーネント単位のバリエーションやプロパティを一時的に確認できる
Figma for VS Code	VS Code上で、Figmaを表示できる。(プラグインのインストールが必要)

上記の機能については、ふじけん / kenshir0f さんが書かれたnote記事「Figma の Dev Mode で UI の確認を楽にする」にて詳しく紹介されています。スクリーンショットが多くわかりやすいので、とても参考になります。

2024年以降のDev Mode利用プラン

Role	Professional	Organization	Enterprise
Editor	✅ 12 USD / 月	✅ 45 USD / 月	✅ 75 USD / 月
Viewer	❎	✅ 25 USD / 月	✅ 35 USD / 月

✅ Dev Mode利用可 ❎ Dev Mode利用不可

2. Figma Variables

Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。

Variablesを取り込みたい理由

今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的に示されています。例えば、CSSのColorは --bs-link-colorとなっており、使う場合の意味がネーミングに含まれており明確です。varの後に、PrimitiveなColorへリンクされています。

そのため、CSS Variablesに近い設定ができるFigmaのVariablesが必要と感じていました。

Variablesの適用で気をつけたいくつかのこと

Variablesの作成前に、Figma公式のHelpを参照しましたが、たくさん説明ページがありすべてに目を通すのに時間がかかりました。Figma公式の動画が分かりやすいので、Figma tutorial: Intro to variablesを繰り返し見て理解を深めました。早く、日本語字幕がつくことを願います。
Variablesの対象を絞りました。設定できるVariablesの型は、Color, Number, String, Booleanの４つですが、利用頻度の高いColorとNumberを第一段階として設定することにしました。
2つのCollectionを作る必要があるので、Primitive、Semanticとしました。Figma公式でも用いられていたオリジナルをPrimitive、変数のほうをSemanticとしました。
Color Styleがすでにデザインシステムにある場合は、プラグインが便利です。Color Stylesの取り込みは量が膨大です。手動で入れていたら時間がかかる上に、ミスが発生しやすいです。そこで、プラグイン「Styles to Variables」を使うと、時間短縮になるのでおすすめです。100件近いColorを一気に投入してくれました。
Semanticは、Primitiveで登録したカラーパレットから選択することで、紐付けられます。その場合、グレー枠に囲まれ、視覚的にも差別化されているのがわかります。例えば、link-colorは、color/blue/500(primary)と関連づけられています。一つ一つ選択し地道に登録を進めましたが、もっと楽な方法があるかもしれません。
Semanticでは、Modeも追加できます。Dark用のColor設定も続けて行います。プロダクトで、LightとDarkのModeを切り替えに対応するためです。Darkを入れたら、下のスクリーンショットにあるように、Layerを切り替えればLight/Darkに切り替えられるようになりました。
Numberとしては、SpacingとRadiusがあると、より一貫性が保てます。こちらは、Primitiveとして入れました。
Figma Variablesの設定が完了したら、Astroで使っているコンポーネントのColorはすべて、Variablesで設定したものに置き換えていきます。すべて置換ができたらpublishし、適用しているプロダクトで使えるようにします。Color変更がされたものは、サムネイルが⚫から■の形状になっています。

Variablesを使ってIU Webに適用してみた

Astroをpublishしたので、IU Webの方にも、VariablesのColorが適用されました。Dev Modeで表示してみてもマークアップとほぼ一致したColor指定になっています。

AstroコンポーネントをIU WebでDetachしカスタマイズしているところはアップデートされない課題があり、修正が必要なことがわかりました。デザインシステムを使う際には、アップデートにも対応するために純正のコンポーネントをそのまま利用することが必要になってきます。今回、多数のDetachしたコンポーネントは、一旦修正せず、時期を見て対応しようと検討しています。

Spacingでは、最初に設定したPadding/Radiusなどで定義したリストから選択できるようになり、デザイナーは一貫したSpacingの中で設計できるようになりました。また、Dev Modeで参照した場合にも、明確になりました。

Figma Variablesは、一貫性のあるデザイントークンには強力な機能の1つだと感じました。最初、Color設定の量が膨大でクリックしすぎて腱鞘炎になりそうでしたが、プラグインの導入で一気に登録でき、改善への足掛かりになりました。今後のメンテナンス性を考えると、積極的に取り込むべきだと思いました。今回は、ColorとNumberのみしかしていませんが、今後もどんどん拡張していきたいと思います。

Variables (beta版)、2023年内は無料提供

Variablesを含むDev Modeは、現在beta版となり、2023年内はすべてのユーザーに無料で提供されます。

2024年以降は有料オプションとして、Professionalプラン、OrganizationプランおよびEnterpriseプランにて提供されるようです。また、プランによってコレクションごとのMode数の上限が変わってきます。

2024年以降のVariables利用プラン

	Professional	Organization	Enterprise
コレクションごとのMode数上限	4	4	40

最新情報は、公式Figmaヘルプセンター記事でご確認ください。

まとめ

Dev Modeは、実装への移行をスムーズにするための環境が整備され、デザイナーとエンジニアのコミュニケーションコストを減らしてくれるのに役立ちます。

Variableでは、主にデザイナーがデザイントークンを一元管理できるようになり、デザインと実装の一貫性を保て、より高度なデザインシステムやUI設計を進めるにあたって、重要な機能になってくるでしょう。

Dev ModeとVariablesを使って、ハンドオフプロセスをスムーズにし、デザイナーとフロントエンドエンジニアの連携がさらに強化される2つの機能の紹介をしました。どちらもオープンベータとのことなので、さらなる機能追加や改善に今後も注目したいと思います。

Blog