Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
12
You Don’t Know Figma Yet
2024-11-23 JSConf JP 2024
Hiroki Tani
November 23, 2024
Tweet
Share
Other Decks in Design
See All in Design
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
590
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
460
プロダクトデザインの「守破離」の「破」について
hayashirine
0
210
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
410
Design System for training program
mct
0
290
アフォーダンスとシグニファイア
ryokanakai
1
340
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
170
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
230
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.5k
How to go from research data to insights?
mastervicedesign
0
160
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
110
Credence
lratmansunu
0
500
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
It's Worth the Effort
3n
183
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Writing Fast Ruby
sferik
627
61k
The Cult of Friendly URLs
andyhume
78
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Optimising Largest Contentful Paint
csswizardry
33
3k
How to Ace a Technical Interview
jacobian
276
23k
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