Figmaのアップデートをキャッチアップするのに使ったリソースをシェア
Figmaの素晴らしいアップデートから1ヶ月弱が経ちました。かなり大規模なアップデートが一気に行われたため、デザイナーの中には忙しい中キャッチアップしきれていない方もいます。何を隠そう私も同じで、どうにか時間を捻出して学習しました。そこで、これから学習される予定の方向けに、VariableやModeといったFigmaの新機能の学習に私が使用したリソースのリストをシェアします。
Introduction
皆さま、この連休はいかがでしたか?
私は少しだけお仕事を休んで、日々の業務の中でキャッチアップ出来ていなかったFigmaの新機能「Variable」についてキャッチアップを行っていました。
皆さん既にご存知の通り、とても素晴らしい機能でありアップデートでした。
せっかくですので、これからキャッチアップする予定の方向けに、私が学習のために使用したリソースを紹介します。
いちから探すよりも素早くキャッチアップできるかと思いますので、もし御社のデザイナーさんのキャッチアップがまだ済んでいなかったら、気軽にシェアしてあげてくださいませ。Variableは最高のアップデートでしたから!
作ったもの
その前に、今回キャッチアップした事柄で作ったあれこれを少し紹介します。Variableを使って出来ることの一例としてご覧ください。
なお、キャッチアップする中で得た感想や意見は「おわりに」の中で後述します。
下記の内いくつかについてはFigmaコミュニティでも公開しています。もしご興味があればリンク先をご覧ください。
画像切替
絵文字の表示コントロール
音量コントロール
Figmaファイル:https://www.figma.com/community/file/1262796063719591868
Alphabet Input
Figmaファイル:https://www.figma.com/community/file/1262800733603900356
landScape by mode
Figmaファイル:https://www.figma.com/community/file/1262805852064502736
学習・キャッチアップに使用したリソース
基礎
まずはFigma公式に提供しているオンボーディング用のFigmaファイルです。座学と実践を繰り返す形となっており、吸収しやすくなっています。
次に、Figma for Education1が学生向けに公開しているファイル。新機能の説明・オンボーディングに学生も大人もありませんから、むしろ丁寧な分、スタートアップするには適していました。
発展
上記で概念や使い方, 導線を理解できたら、次はお手本付きのプレイグラウンドで遊んでみるのが効率良い学びになります。
この辺から公式ドキュメントだけでなく、コミュニティに有志が上げているファイルも活用していきます。オープンであることは素晴らしいことですね。
自分が学習に使ったものを、簡単なレベルのものから順に並べておきます。少しずつレベルアップしていくので、上からなぞってみてください。
応用
実践で使うためにはここまでの学習で十分ですが、よりリッチに、Hi-Fiに作るためにはより深い理解度が要ることがあります。
この理解に適しているのは、Figma上で作られたゲームのファイルです。Figmaの新機能が出ると必ずと言っていいほどゲームを作る方々が出てくるのですが、今回も例に漏れず登場しました。
ゲーム然とした振る舞いをさせるには普通のUIデザインファイルとは違う構造をとる必要があるため、ファイルの構造を見るだけでも「なるほどそういう使い方もあるのか」といった具合に機能への理解度が深まります。
最後に、最もクールだなと思ったのは、この計算機のFigmaファイルです。
四則演算のみではありますが、バグが起こりやすいFigmaでの四則演算を上手く作っていました。プロパティ自体は上記のゲームよりもかなり少ないのですが、何故これで問題なく動いているのか私も完全には理解できていません。すごい。
おわりに
Figmaの進化
今回のFigmaのアップデートは、Figmaをさらに大きく進化させるものでした。
例えば、ここしばらくフロントエンド周辺に存在したデザイントークンのトレンドは、Variableという機能が登場したことでただのトレンドではなくデファクトスタンダードになるでしょう。
これだけで、Atomic Designから数えて3周2ほど世界が先に進みました。あらためて、変化の早い界隈ですね。
正直言って、今回のFigmaのVariable機能には舌を巻きました。
というのも、デザイントークンのための各ソリューションが今後群雄割拠し、”デザイントークン業界”とでも言うべきものが発展していくのではないか という考えが、良い意味で裏切られたからです。
Variableによって、Token Studioのようなデザイントークンのためのサードパーティ・ソリューションをわざわざ使う必要はほぼ無い状態になりました(完全に無くなったわけではない)。あるいはSpacing ManagerなどSpacingのためのプラグインもそうです。
また、VariableはFigmaにクローズドなわけではなく、他の開発ツールと連携できます。VariableをAPI経由で同期的にJSONに吐き出してトークンとして連携するといったことが既に可能です。
まさかデザイントークンをこのようなクールな形のソリューションに仕上げてくるとは、全く予想できませんでした。これで時代はまた変わり、デザイナーはフロントエンドとFigmaを直接的につなげることを考えるようになるでしょう。私もその一人です。
既に国内ではFigmaで作ったVariableをデザイントークンとしてフロントエンドと接続する動きが出始めています。そしてそれは加速するでしょう。
デザイントークンは前提であり、それをフロントエンドを同期させるという発想ですから、これはつまるところFigmaはデザインツールから開発ツールになったことを意味します。
1つの機能でこんなことを実現するなんて、Figmaの問題解決能力, ソリューション構築能力は並外れていると言わざるを得ません。本当にすごいチームです。
AI時代への布石?
今回のアップデートではVariableがデザイントークンというトレンドに近かったため注目を集めていますが、実はVariableだけでなくコンポーネントのDescriptionにもアップデートが入っています。
これは地味なアップデートでしたが、実はAI時代への布石なのではないかと個人的には見ています。
アップデートの中でFigmaはDescriptionを書くことによる利便性を向上し、記述を推奨しています。同じことはVariableのDescriptionやScopingという機能でも行われる予定があります。
これらの動きを見るに、コンポーネントやVariable, Styleに書かれたDescriptionを参照してAIがUIを作ってくれる世界観 を構想しているのではないかと思うのです。
というのも、UIデザインについてAIを十分に機能させるためにはプロンプトの入力フォームとLLMがあるだけでは実は不十分で、それに加えて学習データもしくはアノテーション時に参照するデータが必要になります。
そしてまさにDescriptionの書かれたコンポーネント群やVariable群は、AIの学習データや参照データになり得ます。
もちろんこれは私の個人的な予想に過ぎませんが、AIがDescriptionのような自然言語による記述をそのように使えること自体は事実です。
Figmaに着いていこう
いずれにせよ、Figmaは依然素晴らしいプロダクトであり続けており、そのチームの問題解決能力も大変高いものです。今後の進化も大変楽しみです。
今後しばらくはまだまだ、Figmaを使い倒し、彼らに着いていくべきであることは間違いないでしょう。
こういったテーマに興味がある方は、ぜひSubscribeと私のTwitterもフォローしてくださいね🙏
面白かったら、サポートをぜひよろしくお願いします!
【Figma for Education】
学生や教師向けのFigma公式の枠組み。Webサイトであり、キャンペーンであり、リソースであり、利用プランでもある。
【Atomic Designから数えて3周】
3周というのは無根拠ではない。コンポーネントまわりの粒度は時代が下るとともにAtomic Design→Atomic Design2.0→デザイントークンと、およそ3つの概念・トレンドを辿ってきた。