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

Figmaは、デザインツールとしては異例ですが、Web上で誕生しました。製品デザインにどうしても必要だと感じて開発したツールです。1つのリンクだけで、デザイナーたちは進行中の作業でコラボレーションしたり初期の検討を共有できるため、デザインが「仕上がった」と感じるまで自分だけのアイデアとして留めておくことはなくなりました。デザイナーの間でFigmaとこのマルチプレイヤー作業が広まるにつれて、チームや分野を超えて、特に開発者間で、自然に広く使用されるようになっていきました。

現在では、当社の有料プランでFigmaをご利用いただいているのは、デザイナーよりも開発者の方が多くなっています。開発者のニーズと課題を理解することが、Figmaをさらに効率的で、コラボレーションしやすい、表現力を発揮できる製品にするためにとても重要であることも当社は理解しています。

開発者が使用するワークフローや好みは、一人ひとり異なります。完成度の高いデザインシステムで作業するフロントエンド開発者から、コンポーネントを構築するデザインシステムエンジニア、ブランドデザイナーと連携してコンテンツレイアウトを構築し、アセットをエクスポートする開発者まで幅広い開発者がいますが、共通しているのは、できる限りスムーズに作業したいということです。

開発モードを使用することで、開発者は必要なものを迅速かつ効率的に手にすることができます。Figmaの構築を始めたときからデザイナーとともに目指したテーマでした。チームが工程の途中で作業やお互いを見失うことなく、高品質のデザインを設計、文書化、検索、実装することが簡単になれば、製品の品質は向上します。Figmaによってデザインと開発の橋渡しをする第一歩を踏み出せたことは私たちの誇りであり、開発者チーム新たな成果をとても楽しみにしています。

コーディングの迅速化

Figmaのキャンバスは、自由にデザインするには最適ですが、実装に必要な情報が欠けているデザインファイルで使用すると混乱することがあります。開発モードは、デザインファイルのブラウザインスペクターのようなもので、シェイプ、レイヤー、グループといったデザインの概念を、コード、アイコン、トークンといった開発者の概念に近づけます。Figmaのキャンバス上にマウスを移動させてクリックすると、寸法、仕様、アセットなどの必要な情報を検索してエクスポートし、デザインシステムから追加コンテキストを表示することができます。Chrome Dev Toolsと同様に、他の開発ツールを参考にしているため、使い慣れた環境で作業できます。

開発モードのコードは完全に再設計されており、どの言語でもカスタマイズ可能です。コードはそのままで使うのではなく、簡単にカスタマイズするためのサンプルのようなものです。CSSボックスモデル、ツリービューでの最新の構文を利用でき、お使いのコードベースに合わせてディメンション単位を切り替えられるようになっています。

必要なものすべてをワンストップで利用可能

GitHubプラグインを使用すれば、ファイル、問題、プルリクエストをFigmaのコンポーネントやデザインにリンクでき、必要とするコンテキストをいつでもワンストップで確認できるようになります。

製品の構築には堅牢なツールチェーンが必要ですが、デザインライブラリ、コードベースなどのプロジェクト管理ツールを使い分けることは、特にコンポーネントやスタイル名がコード内の名称と一致しない場合や、チームがタスクのトラッキングや文書化をしていない場合などは、非効率になりがちです。開発モードは、使用するツールとコードコンポーネントをデザインファイルに接続することで、生産性を向上させることができます。

プラグインを利用することで、Figmaの機能を拡張し、チームの作業方法に柔軟に対応できます。Jira、Linear、GitHubを使えばプロジェクト管理ができ、デザイナーとともに各プロセスの進捗状況を把握できます。Storybookは、コードベースで起きていることを、そのデザインのコンテキストで参照できます。AWS Amplify Studio、Google Relay、Animaのcodegenプラグインを使えば、コード出力をカスタマイズできます。独自のワークフローに基づく独自のプラグインを作成することもできます。

デザインシステムは、変数によるデザイントークンの導入により、機能がさらに向上しています。トークンは、デザインとコードにまたがって使用できる小さなUIデータのようなものです。これを開発モードで表示できるようになったため、構築を開始するために何が必要かをすぐに明確にできます。また、キャンバス上のオブジェクトに関連リンクを追加して、ドキュメントやプラグインの内容を参照することもできます。

生産に必要なものを追跡する

製品開発プロセスの設計フェーズと開発フェーズが一緒になっているように見えても、それぞれの成果物(設計ファイルとコード)は区別されたままです。これまで、複数のデザインファイルを閲覧したり、特定のコンポーネントやそのプロパティを選択したり、最後にファイルを参照した後に加えられた変更点を把握することは簡単ではありませんでした。現在では、デザイナーはセクションに「開発のために準備中」のラベルを付けるだけで、別のページやファイルを作成しなくても、直接送信先に送信できます。Diffのサポートにより、異なるバージョンのフレーム間の変更点を比較し、常に最新の状態に保つことができます。

ワークフローを拡張する

VS Code拡張を使用すると、開発モードの機能をコードエディター内で利用できるようになり、コーディング環境から離れることなく、デザインを確認したり、通知やコメントを確認したり、変更を常に把握したりできます。また、VS Code拡張は、検査中のデザインに基づいてコードをオートコンプリートするので、作業が大幅にはかどります。

開発モードとVS Code連携は現在ベータ版で、2023年いっぱいは全ユーザーが無料で利用できます。2024年以降、開発モードを利用できるのは有料プランのみになります。既に有料プランをご利用の方であれば、開発モードはお支払いの料金に含まれることになります。Figmaのすべての機能が必要ではない開発者のためには、新しいプランオプションを2つご用意しました。2024年からは、ビジネスでは1シート当たり月額$25、エンタープライズでは月額$35で、開発モードの利用のみを購入できるようになります。

これは、Figmaを開発者にとってさらに良いものにするための第一歩に過ぎません。開発モードとVS Codeのベータ版をご利用いただいた方からのご意見をもとに、デザイナーと開発者のコラボレーションの改善、スペックの抽出、デザインとコードの間の整合性の向上のための方法を拡大するなど、これからも機能を拡張していく予定です。

開発モードをお試しいただき、是非ともご感想をお聞かせください。