Create A Figma Plugin

Create a Figma plugin to generate pages in your file.
Contents
0:00 - Introduction
0:30 - Creating A New Figma Plugin
1:00 - Install Visual Studio Code (code.visualstudio.com/)
1:15 - Opening the Project in Visual Studio Code
1:30 - Installing Node
brew install nvm
nvm install node
nvm use node
2:10 - NPM Dependencies
npm install @figma/plugin-typings
npm install typescript
npm install webpack
npm install webpack-cli
npm install ts-loader
3:13 - Webpack Configuration
webpack.config.js
(www.typescriptlang.org/docs/h...)
5:32 - Creating an Array of Pages
7:32 - Creating the Loop
8:27 - First Demo
9:08 - Creating the Toast Notification
9:32 - Second Demo
10:00 - Renaming the Default Page 1
11:00 - Final Demo
11:09 - Conclusion
Stay in touch
/ jgeizerux
dribbble.com/jordangeizer/
jordangeizer.com/
Music from Uppbeat:
uppbeat.io/t/infraction/live-it
License code: UYMMWNAGD3A3SVCQ

[@iamfrankstallone]

Jordan, great tutorial! I like that you had a small idea that let you get the boilerplate for IDE/Tools out of the way quickly, setup for webpack/TS and showed how to work with a few Figma APIs. +1 for the audio and video quality of your videos. 💫

[@JordanGeizer]

Thanks Frank!

[@davouchristopherpaul-fu6lq]

❤❤ You got a subscriber

[@mansukhkaur9494]

Hey, loved the tutorial! What extension have you used to get emojis in vscode?

[@JordanGeizer]

So welcome! I believe it's native to MacOS. I press CONTROL+CMD+Space and a dialog pops up that allows me to pop those emojis in. Hope that works for you 🤞

[@hugovan5322]

"command not found: brew" what happened ?

[@liamrahimian1588]

kardashiääääään

[@Mexxokere]

Hi, I cant find the plugin section for figma at the top level nav. It only shows chrome top level nav options. How can i work around this ? and do the top level nav options only appear when using the desktop app?

[@JordanGeizer]

Hey! That's right, they only appear when using the desktop app. You'll need to download the Figma desktop app to create or add a development plugin.

[@JordanGeizer]

@@Programmieren Ah yes, apologies! Figma moved the plugin menu last month. It's now on the app home screen, under the profile avatar in the top right, under "plugins". :)

[@randomguyonsake]

There's some issue going on and I am facing issues few errors loading the plugin. Can you help me with this?

What was the issue and how you solved it?

[@DanTraianRoman]

3:36 Just expand the entire window to be full screen man....