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
58
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
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.4k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.1k
Other Decks in Design
See All in Design
UXデザインはなぜ定着しないのか?
designstudiopartners
0
670
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
110
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
220
問いの変遷
iflection
0
130
LLMによるRAG評価用合成テストデータの生成
licux
6
1.1k
マズロー安達の弟子2期生、成功事例集(17人中17人が3ヶ月平均140万受注)
maslow_akkun
0
5.2k
Saudade typeface
tiagoporto
0
320
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
540
Bulletproof Design System with TypeScript
takanorip
6
3.3k
OLTA株式会社/デザイン紹介資料
taxy
0
320
harutaka Vision Deck
zenkigenforrecruit
0
110
クライアントワークにおける UXリサーチの実践
kozotaira
0
670
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Tale of Four Properties
chriscoyier
159
23k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
524
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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