開発モードの次のステップ：アノテーション、変更内容の比較、プラグインなど

「デザインツールを開発者にとってより使いやすくするには？」と問い始めた瞬間から、開発モードユーザーの増え続けるコミュニティから、フロントエンド開発者やデザインシステムエンジニアがFigmaから本当に必要としているものについて耳を傾けてきました。昨年6月に無料ベータ版をリリースして以来、ユーザーからのフィードバックに応えて200以上の新機能と修正を提供しました。来週にベータ版が終了するにあたり、より早く作業を進め、ハンドオフを改善し、ワークフローをカスタマイズするための一連の改善と機能を追加します。

開発モードのアノテーションで時間を節約

ファイルをハンドオフするための準備には一定の技術が必要です。現在、デザイナーは手作業で寸法や補足説明を作成し、デザインを丁寧に整理して開発者が自信を持ってビルドできるように必要なコンテキストを提供しています。このプロセスを効率化するため、開発モードにアノテーションを導入します。アノテーションを使用すると、デザイナーはデザインに直接関連した追加のコンテキスト、仕様、寸法を共有でき、開発者は作業中にデザイナーのノートを簡単に確認でき、ハンドオフの際に重要な補足説明を見落とすことがないようにします。

クリックとドラッグで測定

デザイナーは数回のクリックだけでプロパティやデザインの詳細を追加し、寸法をピン留めすることができます。

ライブアップデートで最新の情報を維持

アノテーションはキャンバス上のレイヤーに接続されているため、デザインが変更されると、任意のプロパティや寸法も変更されます。

キャンバスを散らかさずに重要な詳細にハイライト

アノテーションは特定のズームレベルで自動的に表示されたり、非表示になったりします。これにより、邪魔にならずに開発者が簡単に見ることができます。

プラグインによるアノテーションの自動化とカスタマイズ

プラグインAPIを使用すると、チームはカスタムの開発モードプラグインを作成して、アノテーションを一括で作成・管理することができます。

アノテーションと連携して、視覚的にもコード上でも差分を確認できるように、変更内容の比較のモーダルを再設計しました。そして、ハンドオフをさらに効率化するために、チームがそれぞれのワークフローで既に使用している多くのツールを一つにまとめています。Figma for Jiraアプリを使用すると、デザインのコンテキストをJiraのイシューに取り込み、デザインが変更されたときにJiraで通知を受け取ることができ、アップデートを見逃すことがありません。

開発モードでプラグインを使ってコードをカスタマイズ

コードに関しては、組織ごとに異なる特性があります。例えば、ある企業ではコード生成を重視するかもしれませんし、他のチームはTailwindやBootstrapなどの特定のフレームワークを使用しているかもしれません。また、一部の組織では、既にコンポーネントレベルでコードが書かれているデザインシステムを採用しているかもしれません。これらの特定的で多様なニーズに対応するために、HTML、React、Tailwindなど、選択したフレームワークでコードを生成するための様々なコード生成プラグインを使用することができます。

Razorpayでは、開発者がデザインに相当するコードを自動生成するカスタム開発モードプラグイン、RazorSharpを構築しました。彼らのストーリーはこちら。

私たちは、チームが自分たちの組織のデザインシステムと同期を保つ必要があることを理解しています。そのため、デザインのコードを生成するだけでは十分ではないことがよくあります。例えば、デザインがデザインシステムを正しく使用しているか確認したり、デザインシステムのドキュメンテーションへのリンクを表示したり、使用する内部APIに関する情報を含めたり、あるいはデザインがコードベースに既に存在するコンポーネントを使用しているかどうか確認したりすることがあります。私たちは、多くのチームがFigmaとコードの両方でデザインシステムの採用を促進するためにカスタムプラグインを作成しているのを見てきました。そして今では、エンタープライズ管理者は、自分のチームのすべてのファイルで開発モードがデフォルトで実行されるようにプラグインをピン留めし、設定することができます。

Figma for VS Code 拡張機能でワークフローを最適化

ツール間を移動することは、チームの作業を遅らせ、摩擦を引き起こす可能性があります。Figma for VS Code拡張機能は、開発者がVS Codeから直接デザインにアクセスし、インスペクトするための簡単な方法を提供することで、この問題を解決することを目指しています。無限のキャンバスを持つ複数のページを含むファイルの柔軟性はデザイナーにとって最適ですが、開発者が必要なものを見つけるのは難しい場合があります。私たちはFigma for VS Codeのエクスペリエンスを再設計して、デザインファイルのナビゲーションと発見性を向上させました。大きなキャンバスをパンする代わりに、フレームのグリッドから簡単に選択し、フォーカスビューで個々のフレームを見ることができます。

VS Codeでプラグインを実行

また、VS Codeでプラグインを実行できるようになったため、コードエディタから離れることなく、VS Codeで動作するようにアップデートされたサードパーティツールやコード生成機能を活用することができます。プライベートプラグインをVS Codeで動作させる方法については、ドキュメントをご覧ください。

その他に知っておくべきこと

1月31日(PST)から、開発モードは無料ベータ版から移行し、有料シートが必要となります。プランとシートのタイプにより、開発モードを続けて利用するためにはアップグレードが必要な場合があります。Config 2023で発表した通り、組織プランでは1シートあたり月額￥3,750、エンタープライズプランでは1シートあたり月額￥5,250で、Dev Modeのアクセスを購入するオプションがあります。

• スタータープラン: 開発モードは含まれません
• プロフェッショナルプラン: 開発モードはフルデザインシートにのみ含まれます
• ビジネスプラン: 開発モードはフルデザインシートに含まれるか、単体で月額￥3,750で利用可能
• エンタープライズプラン: 開発モードはフルデザインシートに含まれるか、単体で月額￥5,250で利用可能

現在有料シートを持っていないユーザーは、開発モード内でFigmaの管理者からそれをリクエストすることができ、管理者は管理パネルでリクエストを承認することができます。スタータープランのユーザーや、開発モードのシートにアップグレードしない閲覧者は、プロパティや寸法を見る、コードをコピーする、アセットのエクスポートをすることができます。

1月31日(PST)に何を期待するべきかの詳細はこちらをご覧ください。全ての価格とプランの詳細はこちらで見ることができます。

開発モードが新たな章に入るにあたり、私たちはFigmaでの開発者のワークフローの改善とデザイナーと開発者の協力に引き続き取り組んでいきます。皆様から共有いただいたフィードバックに心から感謝しており、進行しながら学び、反復していくことを続けます。1月31日(PST)に公開予定の全てのアップデートについて詳しく知るために、私たちの今後のライブストリームにぜひご参加ください。