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
64

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

Other Decks in Design

See All in Design
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
480
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
120
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
580
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.5k
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
540
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.2k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
4
1.2k
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.3k
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
250
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
240
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
680

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
820
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.4k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.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

OSZAR »