FigmaのDev Modeを使うにはどうするか

TL;DR

Dev Modeはデザインと開発の橋渡しを目的とした専用ワークスペースで、ハンドオフの明確化、アノテーションと測定情報の共有、デザインシステムの拡張を実現する。デモはデザイナー視点とデベロッパー視点の操作差を示し、通知連携やリソース統合も解説する。

Transcript

え、本日のウェビナーではフィグマのデブ モード、開発モードについてご紹介させて いただきます。え、デブモードがどのよう にデザインから開発へのワークフローの 効率化において有効になってくるのかの、 え、理解を深めていただけるような セッションになっておりますので、是非 最後までお付き合いいただければと思い ます。 そしてまず本題に入る前に簡単なご案内を させていただきます。え、セッション中に ご質問がございましたら、Zoomの パネルのQ&Aというボタンございますの で、このQ&Aパネルに、え、ご記入 ください。そしてご質問ではなく、皆様の 反応だったりリアクション、何かコメント ございましたら是非どしどしチャットの 機能に、え、お送りください。そして チャットをする際は宛先を全員 ever... Read More

Key Insights

• Dev Modeはデザインファイルのハンドオフを明確化する。デザイナーとデベロッパーが同じ認識を共有できる点が特徴である。
• Dev Modeはアノテーション機能を通じてデザインの意図やプロパティを伝えやすくする。
• 測定機能によりスペーシングやパディングなどの寸法情報を素早く共有できる。
• 開発準備完了ステータスが進捗を視覚的に示し、変更点の通知も自動で届く。
• セクション機能で関連フレームを整理すると、多数デザイン要素のナビゲーションが容易になる。
• フォーカスビューはエンジニアが関係のない要素を排除して検証できる。
• デザインシステムの利用拡大を促進するコンポーネントプレイグラウンド機能がある。
• 他ツール連携（GitHub/Jira/SB)により、設計と開発の連携作業を削減できる。

Questions & Answers

Q: Dev Modeの主な目的は何ですか

Dev Modeの主な目的はデザインと開発の橋渡しを円滑にすることです。デザイナーとデベロッパーが同じ情報を共有し、ハンドオフの品質を高め、デザインシステムの適用を組織全体で促進します。

Q: デザインからコードへのハンドオフはどう改善されますか

ハンドオフは開発準備完了ステータスとアノテーション、測定機能で改善されます。これにより開発者は実装すべき範囲を一目で把握し、コードに反映する情報を素早く取得できます。

Q: アノテーション機能とは何ですか

アノテーション機能は特定要素のプロパティと意図を付箋のように表示する機能で、カラーや配置、パディングなどのデザイン意図を詳しく伝えます。

Q: 測定機能はどのように役立ちますか

測定機能はスペーシングやパディングの寸法を迅速に追加でき、デザインと実装の差異を減らし、開発者の誤解を防ぎます。

Q: フォーカスビューの利点は何ですか

フォーカスビューは関連するデザイン要素だけを表示して検証できるため、エンジニアはノイズなく変更点を確認できます。

Q: デザインシステムの拡張にはどんな機能がありますか

デザインシステムの拡張にはコンポーネントプレイグラウンド機能があり、他パターンを即座に確認できます。

Q: 通知機能はどのように活用しますか

デザイン変更時に関係者へ通知が自動送信され、 Slack や Teams などのツールで即座に共有されます。

Q: 外部ツールとの連携はどれくらい有効ですか

GitHubや Jira などの開発ツールと連携することで、デザインとコードの参照を一元化し、作業の行き来を削減します。

Summary & Key Takeaways

• デブモードは開発準備完了ステータスを用いてデザインと開発の進捗を一元管理する仕組みである。

• デザイナーはアノテーションと測定機能を活用して開発者へ伝えるべき情報を整理できる。

• デベロッパーはフォーカスビューで変更点を差分確認でき、実装用の情報を迅速に取得できる。