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
You Don’t Know Figma Yet
Search
Hiroki Tani
November 23, 2024
Design
0
71
You Don’t Know Figma Yet
2024-11-23 JSConf JP 2024
Hiroki Tani
November 23, 2024
Tweet
Share
More Decks by Hiroki Tani
See All by Hiroki Tani
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
600
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.1k
Other Decks in Design
See All in Design
minpaku-community-scrum-patterns
norinity1103
1
180
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
9.8k
How to get a Tiger to Tulsa
mcduckyart
0
120
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
770
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
840
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.6k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
720
アクセシビリティに取り組むメリット
magi1125
1
220
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
390
ポートフォリオ_webデザイナー
nami_webdesigner
0
130
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
350
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Code Reviewing Like a Champion
maltzj
524
40k
The Language of Interfaces
destraynor
158
25k
Six Lessons from altMBA
skipperchong
28
3.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Being A Developer After 40
akosma
90
590k
Practical Orchestrator
shlominoach
189
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
You Don’t Know Figma Yet JSConf JP 2024 Hacking Figma
with JavaScript
Why is Figma here?
None
Figma https://www.figma.com
Dev Mode: the fastest way from idea to IRL.
Teams of all sizes can now bring design and development closer together in Figma.
Hacking Figma with JavaScript
Hiroki Tani Designer Advocate, Figma @hiloki 中小企業向けのSaaS、フリーランスでの受託、起 業やスタートアップでの開発チーム立ち上げを経 験。Webのフロントエンド開発や、UI・UX設計を おこなう。
著書『CSS設計の教科書』/ OSS: FLOCSS
Figma https://www.figma.com ⌘ + ⌥ + I
Figma https://www.figma.com ⌘ + ⌥ + I
const rect figma () rect ( ) = . ;
. , ; createRectangle resize 320 480
None
<canvas/>
Figma Developers figma.com/developers H Plugin AP@ H Widget AP@ H
REST API
None
DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
figma figma figma figma figma .root; .currentPage; .viewport; .clientStorage; .variables;
Scripter
ファイル上でのJavaScriptやプラグインを実行するには編集権限が必要です。 権限がない場合は「Draft(下書き)」のファイルで試してみましょう。 ファイルの編集権限が必要 Attention!
Demo → Color Swatch → Color Extraction → Text Scaling
→ Confetti → Move Rectangle → Post Comment → Placeholder Images → Article with data
None
Razorpay Boosting design system adoption, and design-to-dev collaboration with Figma
DMM.com Streamlining workflows and fostering creativity with the Figma API
Play with JavaScript
Communicate with designers
Resources → Plugin API Reference → Basic of plugins →
Development guides → github.com/figma/plugin-samples
Thank you JSConf JP 2024