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

You Don’t Know Figma Yet

Avatar for Hiroki Tani Hiroki Tani
November 23, 2024
Design
0
53

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
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.2k
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
970

Other Decks in Design

See All in Design
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
Avatar for ちげ chige
7
1.1k
デザイン・イネーブルメントの理論構築と実践 / 現場から組織にデザインを浸透させる：実践例と最新研究から学ぶボトムアップ戦略
Avatar for Akira Motomura akiramotomura
1
120
札幌の雪を観光資源に変える：デザインプログラムSESSAの挑戦
Avatar for Ittyanm ittyann
0
210
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
3.4k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
4
1.3k
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
150
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
310
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
840k
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
270
Generating Momentum | Yasuhiro Yokota
Avatar for Yasuhiro Yokota | 横田泰広 yasuhiroyokota
1
340
Masked shaman-Storyboard 2025
Avatar for ashley ashley0521
0
290
私とデザインの10年
Avatar for なつ iflection
0
110

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
122
52k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
640
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Done Done
Avatar for chrislema chrislema
184
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k

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