Config 2023: 共同でデザイン、構築するための新しい環境

本日のConfig 2023には、8,000人以上のFigmaコミュニティメンバーが集まり、数千人以上がオンラインで参加しました。最後に直接お会いしたのは、2020年2月に初めて開催したConfigでした。あれから、私たちを取り巻く世界は変化し、Figmaの製品、企業、コミュニティすべてが、非常に大きな変化を遂げました。

Figmaのビジョンは、製品開発チーム全体のためにデザインされた新しいタイプのデザインツールを構築することにあります。本日は、Figmaでデザインと開発を融合する方法について再考し、Figmaが提供する3つの方法をご紹介します。その方法とは、開発者の皆様にFigmaを快適にご利用いただくための開発モード、バリアブルによるデザインとコード言語の接続、高度なプロトタイピングによる2Dデザインと製品提供までの手順の短縮です。また、オートレイアウトの改善、フォント選択機能のアップグレード、ファイルブラウザのアップデートも開始し、すべてのユーザーがFigmaでより快適に作業できるようサポートします。

Figmaに開発者視点の開発モードが登場

デザインシステムは、デザインと開発のギャップを埋めるための共通言語として機能してきました。このギャップが発生する原因は、デザインと開発では最適化するものがまったく違うことにあります。デザインプロセスでは、頭の中に浮かんだアイデアをできるだけ早く出そうとするので、素早い反復と発想を最適化します。そして生産が近づくと、外見や機能だけでなく、どのように保守、再利用、構成を行うかも考えなければなりません。これまで、Figmaはスペクトラムのデザインエンドに特化してきましたが、開発にも力を入れるべき時が来ています。

デザインと開発のギャップを埋めるための開発モードをご紹介します。開発者の皆様はFigmaをさらに快適にご利用いただけるようになるはずです。開発モードはFigmaのワークスペースです。FigJamの無限に広がるキャンバスで、開発に必要な構造と機能を利用できます。開発モードでは、開発者は以下のようなことを行えます。

• より高速にデザインを理解し、コードへ変換
• Jira、GitHub、Storybookなどのプラグインで、開発ツールやコードベースに接続
• 製造に何が必要か特定
• VS Codeでコーディングされたファイルを開発環境で検証

開発モードは現在ベータ版で、2023年内はすべてのユーザーが無料で利用できます。開発モードを構築した理由に関する詳細はこちら、すべての機能とベータ版以降の価格についてはこちらをご覧ください。

開発モードの詳細をご覧ください。

バリアブルによって、デザインシステムとコードが同じ言語を使用可能

チームは、製品をさまざまな方法でデザインするために、デザインシステムに大きく依存しています。構造は一貫性を生み出すのに役立つ一方で、デザイナーが必要なときに柔軟性を発揮できないという代償を負うことが多くあります。製品がますます洗練されるにつれ、デザインシステムは、複数のテーマ、プラットフォーム、製品、ブランドなど、あらゆるものを柔軟にサポートするようになり、その複雑さは増しています。デザインシステムマネージャーは、複数のライブラリ、大規模なコンポーネントセット、カスタマイズされたプラグインを使用することで、この複雑さを解決しなければなりません。しかし、これらのデザインはどれもコードに接続されていないのです。

トークンは、Figmaのコミュニティが長い間求めていた機能です。本日、デザインの作成プロセスを合理化する、より包括的なソリューションであるバリアブルを発表します。バリアブルは、以下のさまざまなユースケースに適応できます。

• 再利用可能な値を保存し、テーマやトークンのデザインに適用できる色、数値、テキスト、およびブーリアンバリアブル
• チーム全体のためにバリアブルをコンテキスト化するエイリアシングと範囲設定のサポート
• 異なる値(ライト、ダークなど)を持つバリアブルモードをデザインテーマ間で切り替え
• バリアブルの作成と管理の拡張に役立つプラグインおよびREST APIのサポート
  

プロトタイピングでバリアブルを使用して、デザインに命を吹き込む

プロダクトチームが少ないリソースで高品質な製品を提供しなければならないというプレッシャーに直面する中、プロトタイピングとテストの重要性はかつてないほど高まっています。しかしこれまで、Figmaでのプロトタイピングは時間がかかる複雑なものでした。編集できないプロトタイプを作成したユーザー、他のツールに頼らざるを得なかったユーザーをはじめ、このプロセスを完全に省略して、デザインがコード化されるまで待ち、それがどのように実現されるかを確認するユーザーもいたと聞いています。

バリアブルの使用によって、デザイナーはより動的なプロトタイプを簡単に作成し、更新することができます。これにより、早い段階から頻繁に完全なエクスペリエンスをテストできるため、チームは無限にある静的なデザインのアイデアが、実際どのように機能するかを理解し、最適なデザインを選択することができます。プロトタイピングのインタラクションでは、Excelの計算式のように、数式や条件ロジックでバリアブルの参照や変更ができるようになりました(例えば「クリックするごとに数値バリアブルxをx+10に変更する」、「バリアブルがxならフレーム1に移動し、そうでなければフレーム2に移動する」などと指定できます)。プロトタイピングは、これまで以上にパワフルかつシンプルになりました。さらに、新しいインラインプレビューによって、デザインをより迅速に反復し、瞬時に再生できます。

本日、ご紹介するのは以下の内容です。

• バリアブル、条件、式を用いた高度なプロトタイピング機能
• デザインの編集とプロトタイプのプレビューを同じビューで操作するために、コンテキスト内編集やインラインプレビューなどのユーザビリティを更新

クオリティオブライフのアップデートで仕事の効率性が向上

Figmaは常にユーザーの方々からご意見をいただき、改善を重ねています。そして、新機能や改善点がユーザーの毎日のワークフローに大きな違いをもたらすことを理解しています。以下では、Figmaでの働き方をシンプルにするための最新アップデートをご紹介します。

• 折り返しや最小/最大の高さ/幅の設定機能を含む、オートレイアウトの改善
• アップグレードされたフォント選択機能により、探しているフォントの検索やフィルタリング、独自フォントのプレビューを簡単に実行
• ファイルブラウザの更新により、外部チームから共有されたファイルやプロジェクトをより簡単に検索

未来への投資

AI: デザインの新たな1章

2023年の技術者として、AIを避けて未来を語ることはできません。AIがデザインに与える影響について、このように考えます。AIは人が視覚的に自分を表現することをサポートし、ワークフローを加速させるでしょう。そして、誰もが優れた原案を作成できるようになります。しかし、優れた原案から一流の製品を生み出すために必要なのは、人間なのです。

Figmaではこれまでに機械学習チームを立ち上げ、初期開発に投資してきました。この投資を促進するために、本日、Diagram社を買収したことをご報告します。Diagram社はJordan Singer氏によって設立され、長年にわたってFigmaコミュニティのメンバーとして、Figmaのプラットフォーム上でサードパーティのAI支援ツールを構築してきました。Diagram社のツールは、デザインを魔法のように感じさせてくれるものです。今後はDiagram社と共に、Figmaのプラットフォーム全体にわたってAI機能を提供します。

すべての生徒にデジタルファーストな未来を

未来はより多くの創造者と開発者を必要としています。そしてAIによって、より多くの人がその期待に応えられるようになります。これが、Figmaエデュケーションプログラムが非常に重要な理由であり、Figmaが早い段階から投資してきたものです。Figmaでは常に、生徒や教育関係者の皆様にすべてのFigma製品を無料で提供することをお約束してきました。それは今後も継続します。

昨年、FigmaはGoogle Chromebooksとのベータ版パートナーシップを発表し、授業用として生徒(13歳以上)にFigmaとFigJamを提供しています。そして、国内の50の学校と1万人の生徒と協力して、生徒独自のニーズを探りました。本日、このパートナーシップを一般公開に移行します。これにより、米国の学区内のすべての教室で、Figmaを無料で使用できるようになります。また、初めてローカライズされたFigmaのUIを導入した日本と米国において、あらゆる年代の生徒を対象としたプログラムを展開します。

次世代のデザイナー、そしてすべてのユーザーが、未来のために考え、作り出すものを楽しみにしています。