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
61
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
180
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.1k
Other Decks in Design
See All in Design
クライアントワークにおける UXリサーチの実践
kozotaira
0
680
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
590
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
360
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
Kid Cowboy 103
marilutwin
0
260
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
280
「デザイン」を信じるには
iflection
0
260
sachi_y_portfolio
sachi337
0
250
線で考える画面構成
natsuume
1
880
Featured
See All Featured
Done Done
chrislema
184
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Building Applications with DynamoDB
mza
95
6.5k
The Invisible Side of Design
smashingmag
299
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Producing Creativity
orderedlist
PRO
346
40k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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