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
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
930
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
180
kintone_aroma
Avatar for kintone kintone
0
1.7k
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
290
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
150
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
200
第18回サイゼミ
Avatar for LW lw
1
3.6k
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
9
10k
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.1k

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
250
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
220
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.2k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
300
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
150
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
5.6k

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