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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Hiroki Tani
November 23, 2024
Design
0
93
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
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
2
250
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
780
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
4.6k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.4k
Other Decks in Design
See All in Design
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
0
200
Ralph Penel Portfolio
ralphpenel
PRO
0
240
Liquid GlassとApp Intents
touyou
0
690
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
200
2026年、デザイナーはなにに賭ける?
0b1tk
0
450
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.8k
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
140
Emmy's Artwork
mcksmith
0
190
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2.5k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
190
root COMPANY DECK / We are hiring!
root_recruit
2
26k
Vibe Coding デザインシステム
poteboy
3
1.6k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
12k
GitHub's CSS Performance
jonrohan
1032
470k
Making Projects Easy
brettharned
120
6.6k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
190
How to build a perfect <img>
jonoalderson
1
4.9k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
Crafting Experiences
bethany
1
34
The Spectacular Lies of Maps
axbom
PRO
1
440
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
51
Building Adaptive Systems
keathley
44
2.9k
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