You Don’t Know Figma Yet

2024-11-23 JSConf JP 2024

Transcript

1. You Don’t Know Figma Yet JSConf JP 2024 Hacking Figma with JavaScript
2. Why is Figma here?
4. Figma https://www.figma.com
5. Dev Mode: 
 the fastest way from idea to IRL. Teams of all sizes can now bring design and development closer together in Figma.
6. Hacking Figma with JavaScript
7. Hiroki Tani Designer Advocate, Figma @hiloki 中小企業向けのSaaS、フリーランスでの受託、起 業やスタートアップでの開発チーム立ち上げを経 験。Webのフロントエンド開発や、UI・UX設計を おこなう。 著書『CSS設計の教科書』/ OSS: FLOCSS
8. Figma https://www.figma.com ⌘ + ⌥ + I
9. Figma https://www.figma.com ⌘ + ⌥ + I
10. const rect figma () rect ( ) = . ; . , ; createRectangle resize 320 480
12. <canvas/>
13. Figma Developers figma.com/developers H Plugin AP@ H Widget AP@ H REST API
15. DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
16. DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
17. DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode
18. figma figma figma figma figma .root; .currentPage; .viewport; .clientStorage; .variables;
19. Scripter
20. ファイル上でのJavaScriptやプラグインを実行するには編集権限が必要です。 権限がない場合は「Draft（下書き）」のファイルで試してみましょう。 ファイルの編集権限が必要 Attention!
21. Demo → Color Swatch → Color Extraction → Text Scaling → Confetti → Move Rectangle → Post Comment → Placeholder Images → Article with data
23. Razorpay Boosting design system adoption, and design-to-dev collaboration with Figma
24. DMM.com Streamlining workflows and fostering creativity with the Figma API
25. Play with JavaScript
26. Communicate with designers
27. Resources → Plugin API Reference → Basic of plugins → Development guides → github.com/figma/plugin-samples
28. Thank you JSConf JP 2024