エンジニアにオススメの Figma 活用

Transcript

1. エンジニアにオススメの Figma 活用 ＠devsumi 2023/02/09 by Seya(@sekikazu01)
2. Seya Figma 開発エンジニア@カケハシ @sekikazu01 @seya @yukkuri-product-development Figma to React Component Japanese Font Picker Random Cat
3. 最近猫(ルイちゃん)と暮らし始めました
4. 最近 YouTube 始めました https://www.youtube.com/@yukkuri-product-development
5. Figma (フィグマ)
6. Q. なぜ今Figmaなのか
7. A. コラボレーション
8.  Web ブラウザで動Ä  同時編集 = デザインが誰でも・いつでも開ける
9. デザインを助ける様々な機能 プラグイン コンポーネント 他にも色々あるよ！
10. もちろんエンジニアも重要なターゲット Spotify Figma with Dylan Field Listen to this episode from PodRocket - A web development podcast from LogRocket on Spotify. CEO and Co-Founder of Fi... 表示 Figmaのユーザの 1/3はエンジニアだよ
11. エンジニアにとって嬉しいことも色々 値が読み取りやすい！ フロントエンドのコードと
 ほぼ同じコンポーネント設計！ プラグイン ウィジェット プログラマブルに
 デザインにアクセス！
12. このトークのテーマ エンジニアB 9 普段の業務での Figma をフルに活用できるようにな3 9 Figma で遊びたくな3 9 ついでにデザインにも興味を持ち始める
13. 私自身が Figma がなかったら
 「そんなにデザインに興味を持ってなかっただろう」
 と感じているので同じような気持ちになる方が増えれば 嬉しいです。
14. アジェンダ U Figma のキホン for エンジニ2 U 実装する時のFigma活用方' U プログラマブルに Figma を操作しよ U Figma API U Figma Plugi9 U Figma Widget
15. Figma のキホン for エンジニア エンジニアのための Figma 知識 zenn.dev
16. Inspect ペーンを使おう ねこちゃん かわいいかわいいかわいいかわいいか わいいかわいいかわいいかわいいかわ いいかわいいかわいいかわいい 会いにいく ねこちゃん かわいいかわいいかわいいかわいいか わいいかわいいかわいいかわいいかわ いいかわいいかわいいかわいい 会いにいく 会いにいく f Cmd(WindowsならCtrl) 押しながらクリックで最下層のレイヤーを選択できるぞ！
17. 要素間のマージンをみよう 2 デザインペーンでも Option 押しながら選択するとマージンが見られるぞ！
18. スタイルを見よう 色 タイポグラフィ text-normal text-italic text-bold text-uppercase text-underline Sample Text
19. 画像をエクスポートしよう $ Cmd+Shift+C で PNG としてコピーできたりするぞ！
20. Variants/Component を知ろう コンポーネント ボタン Variants インスタンス ボタン
21. Plugin を使おう ※Viewer 権限では使えないので会社にお金を払ってもらいましょう https://www.figma.com/community/plugin/789009980664807964
22. Widget を使おう https://www.figma.com/community/widget/1030479012894344777
23.  APIからスタイルのデータを取ってくる
28. Figma API
29. Figma API でできること API 経由  指定したファイルの大体のものを取得でき1  チームに紐づいたプロジェクトやファイルを取得でき1  チームのコンポーネントやスタイルとかも取得できる あとはe  Webhook でコメントとかライブラリのアップデートの通知とかもでき1  OAuth もあるので Figma ログインのアプリとかも作れる
30. 具体例: スタイルをコードにする API の操作には Figma-js (非公式の Figma API クライアント)が便利！ https://github.com/jemgold/figma-js#readme GitHub - jemgold/figma-js: Little wrapper (+ types) for... Little wrapper (+ types) for the Figma API. Contribute to jemgold/figma-js... github.com
31. 2.データを元に文字列を組み立てる
32. APIはコードと同期の文脈では Figma から生成できるものが全くいじらず
 そのままコードで使えるものに便利 q スタイg q 画像(画像圧縮系の API かませると更に V q アイコン
33. AI で自動タグ付けしてくれたり して結構ガチ 有象無象のコード生成ツールと は一線を画す感ある Locofy https://www.locofy.ai/
34. 開発の始め方 0 Figma 上から始め! 0 GitHub 上で boilerplate 探 0 create-fimga-plugin https://speakerdeck.com/mottox2/create-figma-plugin
35. "' Figma のレイヤーツリーをコードに変換 しやすい形に成形する
37. 2. 先ほど作ったツリーからJSXの文字列を
 組み立てる
39. 3. CSSの文字列も組み立てる
41. めっちゃかいつまんで説明したのでもっと詳しく知りたい方は
 解説記事や GitHub 上のコードをお読みください！ https://zenn.dev/seya/articles/105ab3e2864178 作ろう！自分だけの Figma コード 生成機 zenn.dev GitHub - kazuyaseki/figma-to- react:... Simple generator of React code from Figma. Contribute to kazuyaseki/fig... github.com
42. 生成する上での課題 ƒ 初期で未実装のコンポーネントがたくさんある時にはワークしやすい| ƒ アプデの時に使い勝手が悪H ƒ コードだけで実装したものと競合(タグを変えたり、イベントハンドラを くっつけたり)すm ƒ コンポーネント化したものはコンポーネントとして表示してほしH ƒ アイコンなどのアセット系の扱H ƒ デザイナーがしっかりデザインを作っていないとワークしなH ƒ Auto Layout 必要なところに全部使ったg ƒ レイヤー名をきちんとしたg ƒ コンポーネント設計をコードと同期したg ƒ Figma で表現できないもの(Table や Grid のレイアウトなど)は生成できなH ƒ etc...
43. プライベートプラグインの配布の仕方 1. Organization プランにして private プラグインを使う 2. 使う人各自でコードをダウンロードして使う 3. コミュニティに公開しちゃう
44. Figma Plugin
45. Figma Plugin でできること Figma ファイル上から実行でき& E API と比べると Figma を実際に使いながらの作業に有効 書き込みもできる(API は read-only) UI 側のスレッドは割となんでもできる
 (外部にリクエスト飛ばしたり)
46. https://www.figma.com/plugin-docs/how-plugins-run
47. 具体例: Figma から React コードの生成 https://zenn.dev/seya/articles/105ab3e2864178
48. Figma Widget
49. Figma Widget でできること できることはプラグインと大体同じだが
 Figma ファイル上に設置できP B 誰でも同じものを参照できP B ゴリ押しみがあるが定期実行もできる！
 (ただし、他のプラグインやWidgetを実行すると止まる)
50. 事例: Widget から GitHub Actions 実行 W やりたかったこR W アイコンが追加された時にデザイナーにポチッと押してもら うだけでコードにも反映される Widget から GitHub Actions 起動 GitHub Actions から Figma API でアイコンの画像とってくる
 スクリプトを実行してコミット or PR 作成
51.  API でアイコン生成するスクリプトを書く
53. 2. スクリプトを実行する Actions を作る
55. 3. Actions を Widget から実行する
57. この Widget のコードは公開してます https://github.com/kazuyaseki/figma-invoke-github-webhook-widget GitHub - kazuyaseki/figma- invoke-gi... Contribute to kazuyaseki/figma-invoke- github-w... github.com
58. 開発の始め方 Figma 上からも始められるが...
 Figma の Developer Adovacate が作っている CLI を使った方がい い。Vite と React が搭載されていて開発し始めやすい。 https://github.com/figma/create-widget GitHub - figma/create-widget: Create new FigJam widgets... Create new FigJam widgets with a single command. Contribute to figma... github.com
59. Plugin と Widget の使い分け ' 誰でもすぐに触れる0 ' 定期実行できる！ の二つがプラグインとの差別化点
60. おわりに
61. 最近はデザイン x エンジニアなロールも様々 デザインエンジニア UXエンジニア デザインシステムエンジニア
62. エンジニアもデザインに参加 エンジニアもデザインに参加 W 早期に実装可能性の視点をデザインに取り入れられた& W より良いデザインのコンポーネント設計をした& W 主体的に作るものを考えるようになったり
63. 「Figma いじるの楽しい！」
 からこういう道に進むのもいいかも 私がそうでした
64. ご清聴ありがとうございました！