開発モードについて知っておくべきすべてのこと

Figmaは、決してデザインだけを目的としたツールとして設計されたわけではありません。なぜなら、デザインは単に役割だけではなく、素晴らしい製品を創り出すことそのものだからです。そのため、私たちはFigmaをウェブ上で構築しました。一つのリンクだけで、チーム全体が進行中の作業に協力し、ファイル内で初期段階の探索を共有することができます。このマルチプレイヤー的なアプローチは、チームが一緒になって共有スペースで問題を解決することを促進し、デザインにすべての人がアクセスできるようにするという、私たちのビジョンを実現するのに寄与しています。

それはまた、私たちが絶えず探求し続けているビジョンでもあります。私たちは、ユーザーの声を真摯に受け止め、各チームのニーズに合わせた機能提供を通じて、そのビジョンを具現化してきました。新しいツールの開発や体験の創出、そして作業の推進の機会がある度に、私たちは素早く対応します。それがまさに開発モードというものでした。

なぜ私たちはDev Modeを開発したのか

本日、開発者は私たちの週間アクティブユーザーの約3分の1を占めています。Figmaがまだ彼らのワークフローに完全に最適化されていない状況でも、開発者たちはデザイナーやプロダクトマネージャー、そして製品開発プロセスの他のメンバーと一緒に作業を進めてきました。私たちは彼らから、開発者のワークフローやツールチェーン、さらには好みの微妙な違いについて多くを学びました。そして彼らのフィードバックが、私たちの最終的な目標形成の一助となりました。それは、Figma内で開発者専用のスペースを作り、フロントエンドの開発者からデザインシステムを扱う開発者、デザインシステムのコンポーネントを構築するエンジニア、ブランドデザイナーと共にコンテンツレイアウトを作り上げ、アセットをエクスポートする人々まで、彼ら全てをサポートすることでした。アイデアからコードまで、さまざまなチームをサポートしたかったのです。

私たちと同じように、開発を情熱を注ぐチームが必要となりました。そのため、2021年に私たちはVislyという企業を買収しました。Vislyは、Reactを用いてUIコンポーネントを開発するツールを作成した、8人のデザイナーとエンジニアから成るチームです。FigmaのVP of ProductであるSho Kuwamotoは「たくさんの開発者と話をする私たちですが、それは本当に直感とは異なる」と語ります。「あなたたちはその世界に完全に没頭する必要があります」と彼は付け加えます。Vislyチームは、長年の実務経験と、開発者のツールに関する数ヶ月に及ぶ徹底的な調査結果を私たちにもたらしました。言い換えれば、彼らは私たちが求めていた、開発者の「直感」を具現化していたのです。

Vislyチームは、開発者がどのように作業を進めるか、また彼ら自身のチームがFigmaをどのように活用しているかといったリアルな事例を通じて、新たな視点を提供してくれました。特に彼らが共有してくれたのは、開発者がデザインツールに何を求めているのかという重要な洞察でした。Vislyチームのプロダクトデザイナー、Joel Millerは「開発者は“デザインモード”の全ての操作を覚える必要はありません」と語ります。「それよりも、Figmaの体験を彼らに合わせることが重要です。」と彼は付け加えます。

私たちの製品とデザインの意思決定について詳しくみる

開発者の独特なニーズと課題を理解したうえで、チームは製品体験の別の重要な側面に取り組みました。それは、開発モードがどのように見え、そしてどのように感じるべきなのか、という問いです。Vislyの共同創設者であるEmil Sjölanderは、「その問いについては、おそらく1年半の時間を費やした」と語ります。「何百万回もの反復を経て、全ては孤立と統合の間のスペクトラムに広がっていました」と彼は付け加えます。

チームは最終的に、開発者がツールやファイルを完全に切り替えることなく、デザインと開発の間を自由に行き来できるモードを選びました。この解決策は、まさに最善の両方の世界を兼ね備えていました。開発者のニーズに最適化するほど十分に独立している一方で、デザインパートナーからの重要な文脈を持つ開発者のためのFigma内のスペースとして統合されていました。

FigmaのCTOであるKris RasmussenによるConfig 2023のトークをぜひご覧になり、Dev Modeを開発する背景にある思考をみてみましょう。

Config 2023でのオープンベータ版のローンチにより、開発者向けのこれらの問題を解決することができました。そして、ユーザーからのフィードバックが、私たちが途中で行った多くの製品の意思決定に大きな影響を与えました。(なお、Emilはユーザーからのリクエストが来ると通知するSlackbotを使用していまし。) ベータ版がローンチされてから最初の2ヶ月間で、私たちはユーザーから最も要望の多かった200以上のアップデートを開発モードに反映しました。

Dev Modeが可能にすること

私たち自身の製品開発プロセスを見つめ直す中で、私たちは常に自問し続けました:「私たちはFigmaを開発者にとってどのようにより効果的に機能させることができるのか？」 その結果、開発者が必要とするものを、必要なときに、彼らが日常的に使用しているツールを活用して手に入れることができるように設計されたFigma内のワークスペースが誕生しました。デザインを行い、ドキュメントを作成し、高精細なデザインを見つけて実装するのが容易なほど、チームは作業の途中で互いを見失うことなく、より良い製品を作り出すことができます。

Dev Modeとその完成までの過程を詳しく見てみましょう

デザインの意図を明確に伝える

これまでデザイナーは、開発者が自信を持ってビルドできるように必要なコンテキストを提供するため、手動で寸法やコールアウト(指示)を作成し、デザインを丁寧に整理する必要がありました。しかし、私たちはDev Modeによりアノテーション機能を導入し、これらのプロセスを効率化を目指します。デザインが変更されるとリアルタイムで更新されるアノテーションを使用することで、デザイナーは追加のコンテキスト、仕様、寸法を直接デザインに関連付けて共有することができます。また、開発者は作業中にデザイナーのメモを簡単に確認することが可能となり、ハンドオフの過程で重要な指示を見落とすことなく作業を進めることができます。

アノテーションを使って時間を節約（新機能）

• クリックしてドラッグで測定
• ライブの変更で常に最新の情報を保持
• キャンバスをごちゃごちゃさせずに、重要な詳細を強調
• プラグインを使ってアノテーションの自動化とカスタマイズ

デザイナーは、「開発準備完了」というラベルをセクションに簡単に付け、別のページやファイルを作成することなく、そのまま開発者に手渡すことができます。また、変更差分のサポートにより、フレームの異なるバージョン間での変更を比較し、最新の状態を保つことが可能となります。

任意の2つのフレーム間の変更を比較（新機能）

私たちはデザインのイテレーション間で違いを確認するため、任意の2つのフレーム間で比較ができるように差分表示のモーダルを再設計しました。これにより、メインコンポーネントへのオーバーライドや、分離したコンポーネント間でも比較が可能となりました。さらに、差分表示のモーダルはよりインタラクティブになり、コードの差分も表示できるようになりました。これにより、視覚的な差分だけでなく、コードレベルでの差分も確認できるようになりました。

好みのツールでより速く作業する

Dev Modeは、使用するツールと実装コンポーネントをデザインファイルに接続することで、あなたの生産性を向上させることを目指しています。作業方法は一つではないため、私たちは様々なツール、プロセス、ワークフローに対応できるようにDev Modeを設計しました。Storybookを使ってデザインとコードをリンクさせることも、Starkを用いてアクセシビリティを確保することも、Jira、Linear、GitHubなどでプロジェクト管理を効率化することも可能です。プラグインを使えばFigmaの機能を拡張し、あなたのチームの作業スタイルに合わせて柔軟に対応することができます。

コードエディタで必要なものにアクセスする

Figma for VS Code拡張機能を使用すると、コードエディタにDev Modeの機能を取り込むことが可能となります。これにより、デザインを確認したり、通知やコメントを表示したり、そして変更を把握することができ、そのすべてをコーディング環境を離れることなく行うことが可能となります。また、拡張機能は、検査しているデザインに基づいてコードを自動補完します。これにより、より迅速に作業を進めることができます。

VS Codeでデザインファイルをもっと簡単にナビゲートし、プラグインを実行する（新機能）

私たちはFigma for VS Codeの体験を再設計し、デザインファイルのナビゲーションと探索性を向上させました。大きなキャンバスをパンする代わりに、フレームのグリッドから簡単に選択して、フォーカスビューで個々のフレームを確認することができます。さらに、VS Codeでプラグインを実行する新機能も提供しました。これにより、サードパーティのツールやカスタマイズされたコードを、コードエディタを離れることなく使うことが可能となります。詳しくは私たちのドキュメントをご覧になり、VS Codeでプライベートプラグインを動作させる方法を学んでみてください。

コード生成をカスタマイズし、デザインシステムの採用を推進する

生成されたコードがすぐに使えるわけではないことは理解しています。それはむしろ、毎回ゼロからスタートする代わりに、一歩進んだスタート地点となるものです。Dev Modeでは、おなじみのボックスモデルの視覚化やツリービューを持つモダンな構文を確認することができます。さらに、あなたのコードベースに合わせて次元単位をremsとpxの間で切り替えることも可能です。HTML & CSS、React、Tailwindなど特定の言語で素早く動作するコードを生成する必要がある場合は、AnimaやFigma to Codeのようなプラグインがすばやく作業を始めるのに非常に便利です。

デザインシステムと同期を保つには、システムのコンポーネントライブラリに対応するコードを用いてデザインを構築することが必要です。そのために自分だけのコード生成プラグインを開発してFigmaを拡張したり、またCode Snippet Editorを活用して自分のコンポーネントコードを反映した動的なコードスニペットを追加することも可能です。さらに、Variables REST APIを使ってデザイントークンを双方向に同期するツールを作り上げることもできます。

プラグインをピン留めし、自動実行を設定する（新機能）

多くのチームが、Figmaとコードの両方でデザインシステムの採用を促進するためにカスタムプラグインを作成するのを見てきました。この機能により、エンタープライズの管理者は、組織内のすべてのファイルでDev Modeをデフォルトで実行するプラグインをピン留めし、設定することができます。

新しい開発モードのすべてについてぜひご覧ください。

デザインとコードの間の壁を取り払う

本日、Dev Modeが無料のベータ版から正式版へと移行するにあたり、私たちはDev Mode内のアノテーションを含む、デザインとコードをより深く結びつける新機能をリリースしました。また、変更の比較、プラグインの改善、そしてFigma for VS Code拡張機能の改良も行いました。

これらの多くの変更は、デザインから開発への移行を容易にするためのもので、私たちは実装コンポーネントをデザインコンポーネントにさらに密接に結びつける方法を継続的に改善していきます。またハンドオフを一時的な瞬間と捉えるのではなく、デザイナーと開発者間の継続的な協力の一環として考える助けになることを願っています。なぜなら、一緒に構築しているのであれば、それは引き継ぎ(ハンドオフ)ではありません。

これらのアップデートをローンチすることに興奮しています。これらすべての改善は、ベータ版期間中に寄せられたユーザーの皆様からのフィードバックに基づいています。皆様のご意見に対する感謝の意を表し、これからも継続的に学び、改善を重ねて参ります。Dev Modeの開発を続けていく中で、私たちは開発者の体験を改善し、Figmaでの作業をよりスムーズに進められるよう努力してまいります。

開発モードについてもっと知りたい方のために、オンラインのセミナーを開催します。日本語によるセッションとなるので、気になる方はぜひこちらから申し込みをしてご参加ください。