Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You Don’t Know Figma Yet

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Hiroki Tani Hiroki Tani
November 23, 2024
Design
1
110

You Don’t Know Figma Yet

2024-11-23 JSConf JP 2024

Avatar for Hiroki Tani

Hiroki Tani

November 23, 2024
Tweet

More Decks by Hiroki Tani

See All by Hiroki Tani
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
4
1.5k
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
1
820
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
3
4.9k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
2
1.5k

Other Decks in Design

See All in Design
デザインするために「多様性」について考える
Avatar for なつ iflection
0
240
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
890
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
160
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.1k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
2.9k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
3
200
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
430
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
120
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.7k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
580
インハウスデザイン組織で挑む自社ブランディング
Avatar for MIXI DESIGN mixi_design
PRO
0
130

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
160
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
650
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
130
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
410
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k

Transcript

  1. You Don’t Know Figma Yet JSConf JP 2024 Hacking Figma

    with JavaScript

  2. Why is Figma here?

  3. None

  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
  11. None

  12. <canvas/>

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

    REST API
  14. None

  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
  22. None

  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