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
17
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
Rayout Pattern 01
one0
0
380
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
130
Design System for training program
mct
0
300
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
root COMPANY DECK / We are hiring!
root_recruit
1
16k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
210
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
220
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
420
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
540
発表資料テンプレート / My slide template
thatblue
0
140
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.3k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
21k
KATA
mclloyd
29
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Scaling GitHub
holman
459
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Gamification - CAS2011
davidbonilla
80
5.1k
Facilitating Awesome Meetings
lara
50
6.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Music & Morning Musume
bryan
46
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
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