約8,500人がリアルで参加したConfig 2023
コロナ禍直前の2020年2月以来、3年ぶりのオフライン開催となったConfig 2023。サンフランシスコで開催された本イベントは現地に約8,500名の参加者を迎え、オンラインでも配信された。
CEOのDylan Field氏は、「昨年のFigmaのプロダクトだけでなくコミュニティ、そして会社や世界にも多くの変化がありました」とセッションを始めた。
世界全体の変化として、AIがデザインへ与える影響にも言及。Dylan氏は「AIによってファーストドラフトまでは作成することができるが、それ世界クラスのプロダクトではありません。プロダクトを磨き上げるためには、依然として皆さんが必要です」と会場のクリエイターたちに呼びかけた。
デザインとビルドの間を埋める新機能たち
Dylan氏は、プロダクト構築のプロセスを「ブレインストーミング」「デザイン」「ビルド」の3つのステップに分けてとらえているとし、「Figmaはこの全体を支援してきたが、デザインからビルドに至るまで改善できる点がある」と説明。それを受け今回のアップデートは、デザインプロセスの後期と、ビルドプロセスの初期に焦点を当てたものだと前置きしたうえで、その詳細を紹介した。
Variables（変数）
ユーザーが予想していたデザイントークンのリリースをある意味で裏切る形になったのが、この「Variables」のリリースだ。あえてトークンではなく「Variables＝変数」という名称にこだわった理由を「デザインシステムにおける、より総合的なアプローチのため」とDylan氏は説明する。
変数を意味するVariablesは、色やパディングの値などを指定することでデザイン全体を更新することができる機能だ。具体的には「色」「数値」「文字列」「ブール値」の4種の変数を適用できる。
Dylan氏は会場でライブデモを披露。コンパクトモードからよりオブジェクトの間隔がゆったりしたコンフォタブルモードに切り替えたり、さらには日本語版やタブレット版にも自在に変更できたりする様子を示した。
オートレイアウトのアップデート
最大・最小幅と高さを定め、レスポンシブルな自動レイアウトが可能になった。フレームの「W」「H」を選択するとドロップダウンで最小・最大値を追加できる。さらに、折り返し（Wrap）の指定も可能になった。
プロトタイピングの高度化
Figmaと言えばプロトタイピングのイメージもあるが、ときに複雑化しすぎることもあった。画面遷移を表すオブジェクト間の接続線が絡み合う「パスタ写真」がその例だ。そこで「Variablesを使用してプロトタイピングを改善した」と言う。
Dylan氏はECサイトのプロトタイプを例にデモを実践。従来は「アイテム一覧」「アイテムの詳細」「カート」の3つのステータスを表現するのに、膨大なオブジェクトと画面遷移の組み合わせを想定しなければならなかったが、Variablesを設定することで、少ないフレームで動的なプロトタイプの作成が可能になった。
Dylan氏はプロトタイプ用の変数を定義し、カートに入っているアイテムやその数、合計額を指定。さらに「モード」を利用すれば、小さなデータベースのようなものを作成でき、各アイテムに価格やカート内の個数といったプロパティを設定できることを示した。
また、Variablesによってアクションの設定も可能。たとえば、カートのプラスボタンをタップした時のインタラクションを追加したければ、「バリアブルの設定（variables set）」から「カウント（count）」というアクションを指定すれば良いのだ。
さらに、プロトタイプ上で条件ロジックが機能する様子も紹介。トリガーごとに条件付きで複数のインタラクションを追加できるため、たとえば「アイテムが追加されていない場合、カートボタンをクリックすると空のカートに遷移する」といった画面遷移の挙動を簡単に実現できる。
ほかにも、インラインビューワーが実装されたことで、プロトタイプの画面を自分のドキュメント内で表示することが可能に。また、オンキャンバスエディターでは、キャンバス上でインタラクションを確認できるようになった。
なお、インラインビューアーはすべてのプランで、Variablesの設定と条件ロジックはプロフェッショナル以上のプランで利用することができる。
「これにより、複雑なプロトタイプの作成や、より現実的なユーザー体験の設計をさらに簡単に行うことができるようになります」（Dylan氏）
