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
79
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
660
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.9k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.2k
Other Decks in Design
See All in Design
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
110
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
Installing and Running decksh/pdfdeck
ajstarks
1
840
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.3k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
250
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
Featured
See All Featured
Building an army of robots
kneath
306
46k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
Music & Morning Musume
bryan
46
6.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Building Applications with DynamoDB
mza
96
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Agile that works and the tools we love
rasmusluckow
330
21k
Designing for humans not robots
tammielis
253
25k
The Invisible Side of Design
smashingmag
301
51k
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