「Config 2023で発表されたFigmaの新機能まとめ」のサムネイル画像
公開日: 2023.06.23 　|　更新日: 2023.06.28
この記事は最終更新から2年以上経っています

Config 2023で発表されたFigmaの新機能まとめ

Figma

今回は2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された、Figmaの新機能について概要を紹介します。

この記事のターゲット

  • Figma Config 2023で発表された内容をざっくり知りたい方

1. Dev Mode（開発者モード）の追加

主にエンジニアリング向けの、画面レイアウトのコーディングに必要な情報に特化した新しいビューモードが追加されました。

また、開発者とデザイナーの悩みの種である「どれがFIXした画面なのか」問題を解決するのに役立ちそうなステータス管理機能も追加されています。

Jira、Storybook、GitHubと連携するためのプラグインへも簡単にアクセスできるようになっています。

そして、VS CodeでFigmaからコードを参照することができるプラグインも登場したことで、デザインデータをエンジニアがより参照しやすくなるため、デザインとエンジニアリングの精緻な連携がしやすくなります。

以下の公式ページでも各種機能が紹介されていますので参考にしてください。

https://www.figma.com/ja/dev-mode/

利用条件

2023年内はどのプランでも無料で試用できます。2024年からはプロフェッショナルプラン以上であれば編集者（Editor）は標準で利用でき、閲覧者（Viewer）の場合はビジネスプランで1シート/月につき$25、エンタープライズプランでは$35のオプション課金になるようです。

2. Variables（バリアブル）の追加

色やサイズなどの値（デザイントークン）を変数（Variables）としてMode（モード）別に値定義することで、フレームで指定したModeに応じてVariablesが適用されたコンポーネントのスタイルを自動的に切り替えられる機能です。

実用例としては、以下が挙げられます。

  • UIコンポーネントのダークモード・ライトモードの切り替え

  • PC・SPでのレイアウトの切り替え（レスポンシブ対応）

  • 共通コンポーネントでのブランドテーマの切り替え

  • 言語別にビューを切り替え（多言語対応）

これまではコンポーネントのバリアントを追加するなどして都度切り替える必要がありましたが、変数を指定しておくことで自動的に適切なスタイルを適用できるため、バリアントによる運用コストを削減するのに役立ちそうです。

また、エンタープライズプランではREST APIが利用できるようです。

利用条件

現在はオープンベータ版として全プランで利用可能。ただし、無料プランではModeが1つのVariableを1つまでしか追加できず、デモのような機能を十分に利用するにはプロフェッショナルプラン以上が必要です。ビジネス・エンタープライズプランだとより拡張された機能を利用できます。

3. 高度なプロトタイピング機能の追加

プロトタイプの機能が拡張されたことで、より少ないフレームで様々な挙動や制御を表現できるようになりました。

まず、Variablesがプロトタイプでも利用できるようになり、遷移の動的な条件分岐などの複雑な処理が設定できるようになります。

具体例として、シンプルな加算・減算といった数値計算のアクションが実現できるようです。

また、「A=XならばB」「A=YならばC」といった遷移の条件分岐を画面遷移を複製してパターン化しなくても組むことができるようになります。

これらの制御を同時に実現したデモが以下のようです。

利用条件

プロフェッショナルプラン以上で利用できるようです。

4. Auto layout（オートレイアウト）の折り返し、最大・最小サイズの指定

Auto layoutで念願の折り返し（Wrap）と最大・最小サイズの指定ができるようになりました。

Wrapでは、Auto layoutで中のコンテンツをフレームの幅に合わせて折り返すことができるようになります。

また、最大長・最小長を設定することで、フレームをそれ以上またはそれ以下の大きさにならないように制御を加えることができます。

設定できる場所は、フレームの「W」「H」をマウスオーバーするとキャレットが表示されるのでクリックすると、「最小幅を追加」「最大高さを追加」といったオプションが設定できます。

  • 折り返し（wrap）の対応（CSSでのflex-wrap相当）

  • 最大長の対応（CSSでのmax-width、max-height相当）

  • 最小長の対応（CSSでのmin-width、min-height相当）

利用条件

どのプランでも利用できます。

5. フォントピッカーに書体のプレビューが追加

フォントを選択する際に、そのフォントの書体名がその書体を適用した状態でプレビューされるようになりました。そのフォントがどんな見た目なのかを確認する手間が省けるので便利ですね。

利用条件

どのプランでも利用できます。

6. ファイル検索とナビゲーションの改善

複数のスペースに参加している場合、スペースを切り替えなくてもグローバルにファイル・チーム・メンバー・コミュニティ上のファイルを検索できるようになったようです。

履歴や通知も全てのスペース上のものが一元的にアクセスできるようになりました。

利用条件

どのプランでも利用できます。

その他：AI機能について

FigmaがAIでデザインを支援するツールを開発しているDiagram社を買収したことも発表されました。今後は公式のAI機能が追加されることが予想されます。

以下は同社のGeniusという機能をデモしている様子のようです。

続報に期待ですね。

いかがだったでしょうか。

各機能の詳しい使い方については、気が向いた時にまとめたいと思います。

また、ここで紹介した機能は以下のPlaygroundファイルで実際にチュートリアル形式で触れるようになっているようですので、気になる方は試してみてください。

https://www.figma.com/community/file/1234939241273272375

梅雨入りが見えてくると、在宅ワークの環境を見直したくなる季節がやってきます。当サイトのオーナーが、ここ数年の在宅運用で「夏を爽やかに乗り切るために実際に効いた」と感じる定番アイテムと、今年新しく加えて手応えのあったアイテムをまとめておきます。
最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

X a.k.a TwitterRSS購読
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
梅雨入りが見えてくると、在宅ワークの環境を見直したくなる季節がやってきます。当サイトのオーナーが、ここ数年の在宅運用で「夏を爽やかに乗り切るために実際に効いた」と感じる定番アイテムと、今年新しく加えて手応えのあったアイテムをまとめておきます。
広告