SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

デザインに貢献できる開発者になろう! Figmaを通じたデザインの始め方

Figmaの新機能「Variables」とは?──デザインとコードの同期に大活躍の機能を解説

デザインに貢献できる開発者になろう! Figmaを通じたデザインの始め方 第3回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、ソフトウェアエンジニアがFigmaというデザインツールを通してデザインのことを学んでみたくなる、Figmaを使って日々の業務の効率化や楽しくするきっかけを得られるものとなっています。第3回では、今回は今年(2023年)のFigma Configにて登場したVariables(変数)という機能について語っていきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Figmaには従来より「スタイル」という色やタイポグラフィに名前をつけながら値が指定できる機能があったのですが、カバーしている範囲が狭く、デザイントークンという概念を取り扱うにはToken Studioなどの標準機能ではないプラグインなどを活用する必要がありました。

 今回登場したVariablesはほとんどのプロパティに値を紐づけることができ、上記のようなデザイントークンはもちろんさまざまなユースケースでの活用に夢が広がります。

 この記事ではVariablesという機能自体について解説した後、どんなユースケースが考えられるか、そして開発にはどんな影響があるのかを語ります。

※日本語ローカライズとしては“バリアブル”というカタカナ表記の模様です。

Variablesとは

 Variablesでは名前の通り変数を定義することができます。

 下記がVariablesを定義しているUIのスクリーンショットなのですが、Variablesは Collectionという括りの中に複数定義していきます。Collectionはライブラリと同様に複数のファイルで読み込むことができます。

Variablesを定義しているUI
Variablesを定義しているUI

 現状では以下の4種類のVariableを定義することができます。

  • Color(色)
  • Number(数字)
  • String(文字列)
  • Boolean(真偽値)

 この記事執筆時点(2023年7月ごろ)ではタイポグラフィやエフェクトなどの値は指定することができないのですが、少なくともFigmaのヘルプページを読むとタイポグラフィと画像は近々サポートされる予定のようです。エフェクトもないとスタイルからの移行ができないので流石にいつかサポートされるのだろうとは勝手に思っています。

 また、Variablesの値として他のVariableを参照することができます。

 変数の値をホバーして右クリックを押し、「Create alias」を押すと他のVariableを選択することができます。デザイントークンなどで「プリミティブな色のトークンを作って、セマンティックなトークンから参照する」のようなユースケースがあるのですが、そういった場合に便利です。

変数の値をホバーして右クリックを押し「Create alias」を表示
変数の値をホバーして右クリックを押し「Create alias」を表示
Variablesの値として他のVariableを参照できる
Variablesの値として他のVariableを参照できる

 こうして作ったVariableは、当然のことながらデザインするレイヤーに適用することができます。

デザインするレイヤーに適用できる
デザインするレイヤーに適用できる

 そして、前回解説したDev Modeでは適用されたVariableがCSSなどにも反映されて表示されて、便利です!

Dev Modeでは適用されたVariableがCSSなどにも反映される
Dev Modeでは適用されたVariableがCSSなどにも反映される

モードの切り替え

 先ほどのCollectionのスクリーンショットでお気付きの方もいるかもしれませんが、このCollectionはモードと言って使う変数の値を切り替えられる機能を持っています。

 分かりやすい例としてはダークモードです。次のようにLightとDarkでそれぞれ色の変数を定義します。

LightとDarkでそれぞれ色の変数を定義
LightとDarkでそれぞれ色の変数を定義

 そのVariableを使ったレイヤーのモードを切り替えるだけで簡単にライトモードとダークモードを切り替えることができます。

ライトモードとダークモードの切り替え
ライトモードとダークモードの切り替え(引用:Figma tutorial:Intro to variables)

 ちなみにこのモードは無課金だと一つしか作れず(実質ナシ)、プロ以上だと4つ、エンタープライズプランまで上げると40個作れるようになります。

コードとの接続

 そしてエンジニアにとって何よりエキサイティングなこととして、このVariablesはコードに読み込み/書き込みすることができます!

 まず一つにプラグインやウィジェットから使うことができます。

 一例としては下記のように既存のCollection、Variableの読み取りができます。

既存の Collection、Variableの読み取り方法
const localCollections = figma.variables.getLocalVariableCollections();
const { variableIds } = localCollections
const variable = figma.variables.getVariableById(variableIds[0])

 また、新しくCollectionやVariableを足すことができます。

新しくCollectionやVariableを足す方法
const collection = figma.variables.createVariableCollection("new-collection")
collection.renameMode(collection.modes[0].modeId, "light")
const colorVariable = figma.variables.createVariable("color-variable", collection.id, "COLOR")

 そして嬉しいことにREST APIでも読み書きできます!!

 しかし、プラグインやウィジェットに関してはプラン関係なく利用できますが、REST APIに関してはエンタープライズプラン(1編集者あたり11000円/月)限定の機能になっています。

 このためだけにエンタープライズに上げるのは大体の組織で費用感的に難しい気がするので、他のセキュリティなどの要件とセットでの検討になるかとは思います。しかし、API経由でできることで都度プラグインなどを実行して同期する煩雑さが無くなるので一度検討してみるのもいいかもしれません。

次のページ
ユースケース

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
デザインに貢献できる開発者になろう! Figmaを通じたデザインの始め方連載記事一覧

もっと読む

この記事の著者

seya(セヤ)

 Figma に詳しいフロントエンドエンジニア。NY州立大学 Stony Brook Computer Science 科卒業後、ソフトウェアエンジニアとして働き始める。フロントエンドエンジニアとして働く傍ら、エンジニアにとってもあらゆるメリットを持つ Figma に魅せられ、エンジニア目線でデザインプロセスの改善やデザインからコードへの自動化などを手がける。<Figma 公式グローバルカンファレンス「Figma Config 2022」登壇。Comm...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18114 2023/08/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング