Config 2023で発表されたFigmaの最新機能: 開発モード、バリアブル、高度なプロトタイピングなど

21日、Figmaの年次ユーザーカンファレンス、Config 2023でデザインと開発をさらに近づけるための新機能や改善が発表されました。開発モード、バリアブル、高度なプロトタイプ作成など、デザイン、プロトタイピング、ビルドの各段階でチームに役立つ新機能を紹介します。

1. 開発モード

2. バリアブル

3. 高度なプロトタイプ

4. オートレイアウトの改善

5. フォント選択機能の改善

6. ファイルブラウザの改善

開発モードは、サイズや仕様、スタイル、アセットの検査ができるインスペクトや、CSS、iOS、Androidのコードをコピーできるコードスニペット、コード生成やアセットエクスポートのプラグイン、デザインシステムが使えます。また、デザイナーが開発者にデザインのステータスを伝えるセクションステータスや、ファイルの変更点を比較できる機能もあります。開発モードは現在ベータ版で、2023年中にすべてのユーザーが無料で使えるようになる模様。開発モードを試してみたい方に向けて、Figmaより公式のプレイグラウンドが提供されています。また、新しいVS Code拡張機能を使えば、Figmaファイルの検査やデザイナーとの連携、通知の受信ができるとのこと。

バリアブルを使った適応型デザインも注目です。バリアブルは色、数字、テキスト、ブールの値を保存してデザインに適用できます。それによって、テーマ設定やトークンが柔軟になります。バリアブルモードはプロフェッショナルプラン以上で利用でき、バリアブルごとにライトやダークなどのモードを定義・整理できます。さらに、プラグインAPIとREST APIがバリアブルに対応しました。

より少ないフレーム数で、リアルなプロトタイプを作成することも可能になりました。バリアブルの設定や新しいプロトタイプ作成アクションで、より動的なプロトタイプが作れるようになります。また、数式を使った動的な文字列や数値の生成ができます。

オートレイアウトの改善では、オブジェクトの次の行への折り返しや、最小最大幅と高さの設定が可能に。さらに、最大行数を指定してテキストの一部を非表示にできるテキスト省略機能も追加されました。

フォント選択機能では、ビジュアルプレビューと検索が改善され、ファイルブラウザも探しているものを見つけやすいようにアップデート。ユーザビリティ全般が向上し、デザインプロセスが活性化される見込みです。

出典: Figma product news & release notes