Build a Figma plugin using Vite and Preact

preview_player
Показать описание
Learn how to build a sample Figma plugin using Vite Preact template.

0:00 Intro
0:35 How Figma plugins work
1:23 Sample Figma plugin
2:48 Sample plugin code overview
4:29 Why Vite?
5:08 Vite Preact template setup
5:50 Migrating sample code
10:08 Installing TS typings
10:42 ESbuild for bundling plugin code
11:22 Adding build script for ESbuild
12:04 Running the build
12:25 Manifest file
13:21 Running the plugin in Figma
14:33 Singlefile Vite plugin
15:50 Figma plugin demo
16:20 Changing plugin window size
17:05 Outro

  1. Mykhaylo Ryechkin
Рекомендации по теме
Build your first 0:02:20

Build your first plugin: 1. Overview

Create A Figma 0:11:32

Create A Figma Plugin

Create Your First 1:12:42

Create Your First Figma Plugin | FREE COURSE

Build your first 0:45:00

Build your first plugin: 4. Building Your Plugin

A Figma Plugin 0:00:25

A Figma Plugin for Every Project

Figma Plugin For 0:00:25

Figma Plugin For Responsive designs

5 Awesome Figma 0:00:38

5 Awesome Figma Plugins for Designers

How to use 0:05:13

How to use Plugins in Figma

FIGMA CRASH COURSE: 1:14:35

FIGMA CRASH COURSE: for absolute beginners

Creating Figma Widgets: 0:16:46

Creating Figma Widgets: Introduction

Building a Design 0:01:35

Building a Design System Fast Tip

Generating Style Guides 0:10:35

Generating Style Guides in Figma Automatically

Using the Automator 0:03:32

Using the Automator plugin in Figma

8 UI Kit 0:20:10

8 UI Kit & Design System Figma Plugins 2023

Create Lottie Animations 0:00:30

Create Lottie Animations in Figma! (Bye AE 👋)

Figma plugin 0:00:28

Figma plugin

My Top Figma 0:00:30

My Top Figma Plugins in 2023 ✨

Create a Complete 0:01:30

Create a Complete Design System in Figma in Minutes with Identity by Figr!

Fake 3D animation 0:00:31

Fake 3D animation in figma. Get the figma file from our figma community, link in bio.

3 figma plugins 0:00:48

3 figma plugins you must try

Figma Plugin Demo 0:00:14

Figma Plugin Demo - Charts

Let's make a 0:00:58

Let's make a switch in Figma #shorts

Figma in 55 0:00:56

Figma in 55 Seconds: Tables with auto layout and variants

5 GAME CHANGING 0:05:16

5 GAME CHANGING Figma Plugins in 5 Minutes

Комментарии
Автор

I love this kind of videos they are unique. Great job!

codeVictor
Автор

Excellent tutorial! This method can be used for React/Vue/Svelt too. My main issue was figuring out how to turn the code.ts file into the .js file when using Vite - as in the best method. I think there's a way to use Vite config to output the code.js to .ts but that seems to be overkill? I don't know yet.

VeeDCreate
Автор

Great vid! Thanks. But surely, onChange, or handleChange, not handleOnChange.

DaveStewartLondon
Автор

Hey, how do I fix the errors and get typescript suggestions on lib/code.ts ?

habiburnabiarafat