「Figma開発モードで実装との合流点を語る | UI＋FE合流点 feat. CyberAgent」に参加してきました

• 2024/3/27
• https://gaji-lt.connpass.com/event/310872/
• FigmaのDevModeはベータの時に使ってましたが、知らない機能がたくさんあることが分かりました
• デザイナーにとっても嬉しいということを初めて知ったので仕事でも使いこなしていきたいと思いました

Dev Mode

• 谷 拓樹さん

DevModeとは

• デザインをプロダクトにつなげる
• 編集はできなくて参照だけ
  • デザインを壊す心配がない
• 実装OKのマークを付けられる
  • dev modeで実装OKのものが識別される
• Annotation
  • 注釈をつける機能
  • コメントだけじゃなくてstyleの値も選択して表示できる
• 変更差分
  • 2つの要素を選択して差分を確認できる？
  • CSSのdiffも見える
• Dev resource
  • 各データにリンクをつけられる
• Component Playground
  • プレイグラウンドを開くとprimary/secondaryとか設定を変更して確認できる

ハンドオフ

• デザイナーが作って開発者に渡す
• 実際は一本道ではいかないことごおい
• デザイナーと開発者のコラボレーションを助ける

共通言語の採用

• Align(整える)
  • Variablesで名前をつければ出力されるCSSを見るとそれが反映される
  • Componentに名前をつけて実装とも統一していくといい
• Inform(伝える)
  • コンポーネント自信のドキュメント化
  • 仕様やStorybookへのリンク
  • ボタンにどのアイコン使っていいかfigma上で設定できたり
  • annotationで注意すべきポイントに注釈できる
• Connect(つなげる)
  • FigmaからGitHubなどにインテグレーション
  • FigmaからReactコンポーネントを出力したり

座談会

• 谷 拓樹さん
• 原 一成さん
• 出口 裕貴さん

DevMode事情

• Qiita まだエンジニアは使ってない
  • 編集権限あるデザイナーがannotationとか使ってる
• Ameba
  • エンジニアは申請したら使えるように使える
    • 10人くらいのうちの半分くらい使ってる
• プラン
  • DevMode専用のプランはまだない
  • proプランから使えるけど編集もできる

DevModeの推し機能

• annotationでマークダウンが書ける
  • コードブロックが書ける
• Annotationにメモを書いてコメントに議論を書いて使い分けられる
• Compare Changesがない時は差分を伝えるために赤入れしてた

DdevModeの将来性

• エンジニアがFigmaをさわる機会が増えそう
• ハンドオフ(引き継ぎ)ではなく一緒に構築していく助けになる