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
81
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
690
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
4k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.2k
Other Decks in Design
See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
170
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.5k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
「UXとUIの違い」v2
shirasu3
0
250
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
620
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
330
Yumika Yamada Portfolio
yumii
0
1.7k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Designing Experiences People Love
moore
142
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
GitHub's CSS Performance
jonrohan
1032
460k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Docker and Python
trallard
46
3.6k
Code Reviewing Like a Champion
maltzj
525
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
What's in a price? How to price your products and services
michaelherold
246
12k
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