✏️ Learn & Dev: Figma Devモード : デザイナーもちゃんと理解したい！
Devモードとは？
Devモードは、開発者と一緒に働くデザイナーが、アイデアをデザインから制作まで効率的に進めるための、Figma の新しいスペースです。このモードは、ハンドオフにおける摩擦を減らし、より良いコミュニケーションとデザインの実装を可能するために作成しました。
このモードは、開発者モードと呼ばれていますが、デザイナーにとっても重要です。なぜならDevモードは、デザイナーが開発者が閲覧できるようにファイルを準備したときに、最も効果的に機能します。デザイナーもハンドオフのためのファイルの設定方法、デザインとコードの接続方法を学ぶ必要があります。
開発者はデザインファイルをナビゲートし、デザインをコードに変換するために必要なすべての情報を得ることができます。Devモードを使うことで、デザイナーと開発者は同じページに留まり、大切な詳細がハンドオフのプロセスで失われないようにします。
Devモードを使って以下のことができます：
コンポーネントからプロパティ、値、コードを表示してコピーする
フレームのバージョンを比較して、最後にファイルを見たときから何が変わったかを確認する
シンプルなインタラクションで重要なレイヤー情報を表示して、デザインファイルを検査してナビゲートする
セクションのステータスで開発に適したデザインを素早く見つける
JiraやStorybook、GitHubなどの開発者向けの統合機能でワークフローを効率化する
コンポーネントに関連するリンクや開発者リソースを追加する
開発者、デザイナーにとっての利点
まずはスムーズなハンドオフを実現するために、どの部分に焦点を当てるべきかを理解しましょう。
Dev Modeを使用することで、開発者は以下のことが可能になります。
設計ナビゲーションを高速化する：
Devモードを使用してファイルをナビゲートし、必要な情報をより簡単に見つけることで、ビルドを開始する準備ができます。ツールキットとの連携：
毎日使用するツールを統合することで、ワークフローを合理化できます。変更とステータスの追跡：
ファイルへの最後のアクセス以降に何が変更されたかを確認し、構築の準備が整ったものを簡単に判断できます。
デザイナーにとって、Devモードの使い方を理解することには以下のメリットがあります。
より良いプロセスの構築:
Devモードを利用することで、デザインのハンドオフを効率化し、よりスムーズなプロセスを構築できます。無限のキャンバスに簡単に構造を追加できます。ファイルの準備を減らす:
開発者は、赤線や注釈を追加することなく、デザインを即座に理解することができます。つまり、デザイナーは開発者がファイルを理解するための準備作業を減らすことができます。デザインとコードの同期:
Figmaに真実の情報源を取り込むことで、開発者と同じ言語でコミュニケーションを取ることができます。これにより、デザインとコードの間の同期を図ることができます。
Devモードを使ってみよう
FigmaのデザインファイルでDevモードにアクセスすることができます。デザインモードとDevモードの切り替え方法は以下の通りです：
Figmaのデザインファイルを開く。
トップナビゲーションの右側にある</> Devモードのトグルをクリックすると、Devモードに切り替わります。またはキーボードショートカットのShiftDを使います。
開発者向けに生まれ変わったレイヤーパネル
レイヤーパネルが、開発者向けに新しく生まれ変わりました！これは、デザイナーが作った新しい要素を開発者が簡単に見ることができる特別なパネルです。開発者のために、使いやすくなっています！
レイヤーパネルは、デザイン画面の左側にあって、デザイナーが作った新しいレイヤーを見ることができます。Devモードでは、開発者がファイルを簡単に見るために、違うスタイルのレイヤーパネルが表示されます。
Devモードでレイヤーパネルを見ると、以下のものが見えます。
「Ready for dev」とマークされたセクション：
開発の準備が整っている画面のサムネイルが表示されます。キャンバス上のオブジェクト：
開発の準備がまだできていないオブジェクトは、パネルの下部に表示されます。
このように開発者にとって大切な要素が一目でわかるようになっています。
開発者がスムーズにナビゲーションできるためにとても重要なセクション
開発者がスムーズにナビゲーションできるために、ファイルにセクションを設定することはとても重要です。
フレーム：フレームはデザインする画面のことを指しています。
セクション：セクションはそれらの画面を一緒にまとめて整理するためのものです。セクションを使うと、開発者はどのフレームがフローの一部なのかを見つけることができて、デザインがビルドできる準備ができていることを示すこともできます。
💡セクションは、キーボードのショートカット(shift+S)を使うか、ツールバーのフレームアイコンのメニューから作成することができます。セクション内のフレームは、キーボードの矢印キーを使って移動することもできます。
Ready for dev「タグ付け」しよう！
セクションを「Ready for dev（開発の準備ができている）」とマークすることができます。これによって、どの画面がビルドする準備が整っているのかを伝えることができます。
セクションを準備完了としてマークするには、DevモードまたはDesignモードのいずれかでセクションタイトルの横にあるアイコンをクリックするか、上部ナビゲーションにあるアイコンをクリックします。
セクションが「Ready for dev」とマークされると、そのセクションはDevレイヤーパネルのトップに表示され、準備ができたセクション内のフレームのサムネイルが表示されます。他のすべてのレイヤーは、「Ready for dev」セクションの下にまとめられた状態となります。
①Ready for dev (開発の準備ができている)とマークされていない場合はこのように表示されます。
②デザイナーはセクションタイトルの横にあるアイコン をクリックするか、レイヤーパネルのボタンをクリックして、Ready for dev(開発の準備ができている)とマークします。
③マークされると、セクションの横に緑色のバッジが表示されます。
セクション内のフレームは、サムネイルとともにレイヤーパネルの一番上に移動します。バッジは、このコンテンツを保持するページに表示されます。
④セクションタイトルの横にあるバッジをクリックすると、開発者リンクをコピーするか、ステータス（Ready for dev）を削除するかのオプションが表示されます。
バージョン・フレーム内履歴
開発者が変更の履歴を理解しやすくするために、デザインの重要なバージョンに名前を付けることをおすすめします。これらの名前付きバージョンは、常に変更を比較するモーダルに表示されます。
現在のバージョンに名前を付けるには：
ファイル名の隣にあるドロップダウンを選択します 。
バージョン履歴を表示をクリックします。
パネルの上部にある+をクリックします。
過去のデザインのバージョンに名前を付けるには：
名前を付けたいバージョンを選択します
. . . をクリックします。
Name this versionをクリックします。
コンポーネントの設定
コンポーネントの設定は、デザインシステムのコンポーネントに関する追加の情報やドキュメントを表示する場所です。
コンポーネントの設定：
デザイン・モードでのみ編集可能です（メインコンポーネントが含まれるファイルに編集アクセスが必要です）。
コンポーネントのインスタンスと常に表示されます。
Devモードではインスペクトパネルに表示され、アセットパネルでコンポーネントにホバーすると表示されます。
複数行のテキストとリンクを表示することができます。
コンポーネントの設定に説明を追加すると、アセットパネルでの見つけやすさが向上します。もしもコンポーネントに説明がない場合、正確なコンポーネント名で検索しない限り、アセットパネルには表示されません。しかし、説明に代替名や別の言語の名前を追加すれば、説明内の検索ワードに一致する場合は、そのコンポーネントもアセットパネルで検索されたときに表示されます。
コンポーネントの説明は、アセットパネルでコンポーネントにホバーするだけでなく、インスペクトパネルでも静的に表示されます。
設計とコードにおけるVariables
Variables は、デザイン内で再利用される値にラベルを付ける方法です。FigmaでネイティブにVariablesを作成できるようになったことで、Dev Modeで要素を検査する際に、それらのvariablesが表示されるようになりました。
色や寸法など、デザイン内の要素にアタッチされたVariablesは、そのようにラベル付けされるので、開発者は、生の値ではなく、これらのトークンに依存することができます。これらのVariablesは、キャンバス上と生成されたコード内の両方に直接表示されます。
🚧 Devモードは現在オープンベータ版です。
ベータ版の機能はベータ期間中に変更されることがあります。この期間中にはバグやパフォーマンスの問題が発生することがあります。2023年までどなたでも無料でご利用いただけます。詳細はヘルプセンターをご覧ください。
この記事が気に入ったらサポートをしてみませんか？