You Don’t Know Figma Yet

You Don’t Know Figma Yet JSConf JP 2024 Hacking Figma
with JavaScript

Why is Figma here?

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

const rect figma () rect ( ) = . ;
. , ; createRectangle resize 320 480

Figma Developers figma.com/developers H Plugin AP@ H Widget AP@ H
REST API

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

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

You Don’t Know Figma Yet

You Don’t Know Figma Yet

Hiroki Tani

More Decks by Hiroki Tani

Other Decks in Design

Featured

Transcript