Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアにオススメの Figma 活用
Search
seya
February 09, 2023
Design
16
14k
エンジニアにオススメの Figma 活用
seya
February 09, 2023
Tweet
Share
More Decks by seya
See All by seya
継続的な評価基準と評価の実行の仕方をアップデートするワークフロー
kazuyaseki
2
120
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
3
2.1k
なぜ私はコードをデザインに使いたいのか
kazuyaseki
9
3.6k
フロントエンド開発のための Figma
kazuyaseki
20
25k
PWAに取り組む前に知っておきたい SPAとSEO
kazuyaseki
10
4.2k
State of SEO for SPA 2018
kazuyaseki
8
5k
Selenium あるある
kazuyaseki
0
1.7k
Vue コンポーネント実装パターン
kazuyaseki
16
3.8k
Other Decks in Design
See All in Design
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
560
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
180
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
760
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
270
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.9k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
470
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
680
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
110
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
459
140k
A Philosophy of Restraint
colly
203
16k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
380
KATA
mclloyd
29
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
A designer walks into a library…
pauljervisheath
205
24k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Transcript
エンジニアにオススメの Figma 活用 @devsumi 2023/02/09 by Seya(@sekikazu01)
Seya Figma 開発エンジニア@カケハシ @sekikazu01 @seya @yukkuri-product-development Figma to React Component
Japanese Font Picker Random Cat
最近猫(ルイちゃん)と暮らし始めました
最近 YouTube 始めました https://www.youtube.com/@yukkuri-product-development
Figma (フィグマ)
Q. なぜ今Figmaなのか
A. コラボレーション
Web ブラウザで動Ä 同時編集 = デザインが誰でも・いつでも開ける
デザインを助ける様々な機能 プラグイン コンポーネント 他にも色々あるよ!
もちろんエンジニアも重要なターゲット 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はエンジニアだよ
エンジニアにとって嬉しいことも色々 値が読み取りやすい! フロントエンドのコードと ほぼ同じコンポーネント設計! プラグイン ウィジェット プログラマブルに デザインにアクセス!
このトークのテーマ エンジニアB 9 普段の業務での Figma をフルに活用できるようにな3 9 Figma で遊びたくな3 9
ついでにデザインにも興味を持ち始める
私自身が Figma がなかったら 「そんなにデザインに興味を持ってなかっただろう」 と感じているので同じような気持ちになる方が増えれば 嬉しいです。
アジェンダ U Figma のキホン for エンジニ2 U 実装する時のFigma活用方' U プログラマブルに
Figma を操作しよ U Figma API U Figma Plugi9 U Figma Widget
Figma のキホン for エンジニア エンジニアのための Figma 知識 zenn.dev
Inspect ペーンを使おう ねこちゃん かわいいかわいいかわいいかわいいか わいいかわいいかわいいかわいいかわ いいかわいいかわいいかわいい 会いにいく ねこちゃん かわいいかわいいかわいいかわいいか わいいかわいいかわいいかわいいかわ
いいかわいいかわいいかわいい 会いにいく 会いにいく f Cmd(WindowsならCtrl) 押しながらクリックで最下層のレイヤーを選択できるぞ!
要素間のマージンをみよう 2 デザインペーンでも Option 押しながら選択するとマージンが見られるぞ!
スタイルを見よう 色 タイポグラフィ text-normal text-italic text-bold text-uppercase text-underline Sample Text
画像をエクスポートしよう $ Cmd+Shift+C で PNG としてコピーできたりするぞ!
Variants/Component を知ろう コンポーネント ボタン Variants インスタンス ボタン
Plugin を使おう ※Viewer 権限では使えないので会社にお金を払ってもらいましょう https://www.figma.com/community/plugin/789009980664807964
Widget を使おう https://www.figma.com/community/widget/1030479012894344777
APIからスタイルのデータを取ってくる
None
None
None
None
Figma API
Figma API でできること API 経由 指定したファイルの大体のものを取得でき1 チームに紐づいたプロジェクトやファイルを取得でき1
チームのコンポーネントやスタイルとかも取得できる あとはe Webhook でコメントとかライブラリのアップデートの通知とかもでき1 OAuth もあるので Figma ログインのアプリとかも作れる
具体例: スタイルをコードにする 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
2.データを元に文字列を組み立てる
APIはコードと同期の文脈では Figma から生成できるものが全くいじらず そのままコードで使えるものに便利 q スタイg q 画像(画像圧縮系の API かませると更に
V q アイコン
AI で自動タグ付けしてくれたり して結構ガチ 有象無象のコード生成ツールと は一線を画す感ある Locofy https://www.locofy.ai/
開発の始め方 0 Figma 上から始め! 0 GitHub 上で boilerplate 探 0
create-fimga-plugin https://speakerdeck.com/mottox2/create-figma-plugin
"' Figma のレイヤーツリーをコードに変換 しやすい形に成形する
None
2. 先ほど作ったツリーからJSXの文字列を 組み立てる
None
3. CSSの文字列も組み立てる
None
めっちゃかいつまんで説明したのでもっと詳しく知りたい方は 解説記事や 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
生成する上での課題 初期で未実装のコンポーネントがたくさんある時にはワークしやすい| アプデの時に使い勝手が悪H コードだけで実装したものと競合(タグを変えたり、イベントハンドラを くっつけたり)すm コンポーネント化したものはコンポーネントとして表示してほしH
アイコンなどのアセット系の扱H デザイナーがしっかりデザインを作っていないとワークしなH Auto Layout 必要なところに全部使ったg レイヤー名をきちんとしたg コンポーネント設計をコードと同期したg Figma で表現できないもの(Table や Grid のレイアウトなど)は生成できなH etc...
プライベートプラグインの配布の仕方 1. Organization プランにして private プラグインを使う 2. 使う人各自でコードをダウンロードして使う 3. コミュニティに公開しちゃう
Figma Plugin
Figma Plugin でできること Figma ファイル上から実行でき& E API と比べると Figma を実際に使いながらの作業に有効
書き込みもできる(API は read-only) UI 側のスレッドは割となんでもできる (外部にリクエスト飛ばしたり)
https://www.figma.com/plugin-docs/how-plugins-run
具体例: Figma から React コードの生成 https://zenn.dev/seya/articles/105ab3e2864178
Figma Widget
Figma Widget でできること できることはプラグインと大体同じだが Figma ファイル上に設置できP B 誰でも同じものを参照できP B ゴリ押しみがあるが定期実行もできる!
(ただし、他のプラグインやWidgetを実行すると止まる)
事例: Widget から GitHub Actions 実行 W やりたかったこR W アイコンが追加された時にデザイナーにポチッと押してもら
うだけでコードにも反映される Widget から GitHub Actions 起動 GitHub Actions から Figma API でアイコンの画像とってくる スクリプトを実行してコミット or PR 作成
API でアイコン生成するスクリプトを書く
None
2. スクリプトを実行する Actions を作る
None
3. Actions を Widget から実行する
None
この Widget のコードは公開してます https://github.com/kazuyaseki/figma-invoke-github-webhook-widget GitHub - kazuyaseki/figma- invoke-gi... Contribute to
kazuyaseki/figma-invoke- github-w... github.com
開発の始め方 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
Plugin と Widget の使い分け ' 誰でもすぐに触れる0 ' 定期実行できる! の二つがプラグインとの差別化点
おわりに
最近はデザイン x エンジニアなロールも様々 デザインエンジニア UXエンジニア デザインシステムエンジニア
エンジニアもデザインに参加 エンジニアもデザインに参加 W 早期に実装可能性の視点をデザインに取り入れられた& W より良いデザインのコンポーネント設計をした& W 主体的に作るものを考えるようになったり
「Figma いじるの楽しい!」 からこういう道に進むのもいいかも 私がそうでした
ご清聴ありがとうございました!