Tweet
Tweet

Slide 1

Slide 1 text

You Don’t Know Figma Yet JSConf JP 2024 Hacking Figma with JavaScript

Slide 2

Slide 2 text

Why is Figma here?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Figma https://www.figma.com

Slide 5

Slide 5 text

Dev Mode: 
 the fastest way from idea to IRL. Teams of all sizes can now bring design and development closer together in Figma.

Slide 6

Slide 6 text

Hacking Figma with JavaScript

Slide 7

Slide 7 text

Hiroki Tani Designer Advocate, Figma @hiloki 中小企業向けのSaaS、フリーランスでの受託、起 業やスタートアップでの開発チーム立ち上げを経 験。Webのフロントエンド開発や、UI・UX設計を おこなう。 著書『CSS設計の教科書』/ OSS: FLOCSS

Slide 8

Slide 8 text

Figma https://www.figma.com ⌘ + ⌥ + I

Slide 9

Slide 9 text

Figma https://www.figma.com ⌘ + ⌥ + I

Slide 10

Slide 10 text

const rect figma () rect ( ) = . ; . , ; createRectangle resize 320 480

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode

Slide 16

Slide 16 text

DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode

Slide 17

Slide 17 text

DocumentNode PageNode PageNode PageNode RectangleNode TextNode FrameNode

Slide 18

Slide 18 text

figma figma figma figma figma .root; .currentPage; .viewport; .clientStorage; .variables;

Slide 19

Slide 19 text

Scripter

Slide 20

Slide 20 text

ファイル上でのJavaScriptやプラグインを実行するには編集権限が必要です。 権限がない場合は「Draft（下書き）」のファイルで試してみましょう。 ファイルの編集権限が必要 Attention!

Slide 21

Slide 21 text

Demo → Color Swatch → Color Extraction → Text Scaling → Confetti → Move Rectangle → Post Comment → Placeholder Images → Article with data

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Razorpay Boosting design system adoption, and design-to-dev collaboration with Figma

Slide 24

Slide 24 text

DMM.com Streamlining workflows and fostering creativity with the Figma API

Slide 25

Slide 25 text

Play with JavaScript

Slide 26

Slide 26 text

Communicate with designers

Slide 27

Slide 27 text

Resources → Plugin API Reference → Basic of plugins → Development guides → github.com/figma/plugin-samples

Slide 28

Slide 28 text

Thank you JSConf JP 2024