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