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
84
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
710
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
4.2k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1.3k
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
520
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.2k
Findyのプロデチームの 歩みとこれから
satty9556
0
320
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
550
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
Installing and Running decksh/pdfdeck
ajstarks
1
870
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
630
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
The Cult of Friendly URLs
andyhume
79
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Making Projects Easy
brettharned
120
6.4k
For a Future-Friendly Web
brad_frost
180
10k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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