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
64
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
430
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.1k
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
270
線で考える画面構成
natsuume
1
880
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
NAHO SHIMONO_Portfolio2025
nahohphp
0
860
Kid Cowboy 103
marilutwin
0
260
「デザイン」を信じるには
iflection
0
280
Echoes Boomerang
artcloudyu
PRO
0
240
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
530
AI時代に淘汰されないデザインのしごと
akinen
1
130
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
250131_product meetup
motokoishida
0
210
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Documentation Writing (for coders)
carmenintech
72
4.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Gamification - CAS2011
davidbonilla
81
5.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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