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
0
100

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
3
1.5k
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
810
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
4.8k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.4k

Other Decks in Design

See All in Design
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
0
690
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
660
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1k
Treasure_Hunting
Avatar for Sol Metts solmetts
0
300
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
120
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
hicard_credential_202601
Avatar for hicard hicard
0
200
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
720
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
2
540
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
170
Signull 団体説明資料
Avatar for Signull signull
0
130
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
110

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
380
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
130
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
140
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5.1k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
710
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
160
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k

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