Build your first plugin: 4. Building Your Plugin
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Written Guide: https://bit.ly/3GCs0Un
The Petma Design File: https://bit.ly/3qkUR6X
In this video series we'll learn together, and build a plugin that creates a customizable post for a social media app design. We'll start with a basic overview, go through an introduction to plugins and APIs, walk through how to set up your environment, take you step-by step-through building our first plugin and finally, show you how to publish to the community.
This video will show you how to build your plugin.
Build your first plugin: 1. Overview : https://bit.ly/3M68D7d
Build your first plugin: 2. Introduction to Plugins & API : https://bit.ly/3wYQFxT
Build your first plugin: 3. Plugin Environment Setup : https://bit.ly/3GEr2XC
Tom Lowry’s Plugin Design System : https://bit.ly/3PkLbWT
Code: link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lo..."
Styling with CSS Overview: https://bit.ly/3N2c8MR
Query Selector Overview: https://bit.ly/3yjBx0u
Plugin API Documentation: https://bit.ly/3aiosus
Array Overview: https://bit.ly/39OkR78
00:00 - Introduction
00:10 - Overview
00:23 - The Design File
00:45 - What Are We Building and Why?
01:43 - Card Components
02:23 - Third Party APIs
03:05 - Project Requirements
04:40 - Tom Lowry's UI Library
05:09 - Logic Overview
06:30 - Building UI
07:02 - Creating A Module
07:59 - Running The Plugin
08:50 - Creating Input Fields and Labels for Username, Name, and Description
10:20 - Adding Block Styling
10:34 - Switch
11:03 - Tom Lowry's UI Library
11:36 - Adding Classes
12:09 - Adding A Switch 12:10
12:38 - Adding Radio Buttons
13:26 - Adding the Submit Button
13:48 - UI Finishing Touches
14:39 - Adding Logic
14:47 - Event Listener
16:10 - Adding The Event Listener
16:49 - Checking The Event Listener
17:15 - Creating Constant Variables
18:05 - Logging The Variables
18:43 - Dark Mode Constants
19:18 - Adding Variant Values and Query Selector
20:03 - Logging The Variants
20:33 - Parent Post Message Method
22:25 - Running The Logs
22:47 - Closing The Plugin
23:13 - Dark Mode Conditional
24:10 - Figma API Reference
25:08 - Exploring Component Set Nodes and the Find One Method
26:26 - Exploring the Property Tags
27:08 - Adding The Find One Method to Code.TS
27:45 - Checking The Component Set Node Find One Method
28:00 - Default Variants
28:48 - Creating a Default Instance
29:21 - Adding a Create Instance to Code.TS
30:00 - Creating Variations
31:03 - Checking the Dark Mode Conditional
31:39 - Creating Other Variants
32:13 - Logging the Variants
32:31 - Nested If Else Statements
33:19 - Switch Case Statement
34:41 - Other Switch Cases
35:15 - Creating Variants
36:00 - Let Variable
37:15 - Completing The Switch Case Statements
37:30 - Creating the Instance of the Selected Variant
37:41 - Testing the Switch Cases
38:15 - Selecting the Text Nodes
39:45 - Checking the Text Node Logs
39:57 - Overwriting the Default Text
40:20 - Font Loading Error
40:50 - Loading the Font Family
41:55 - Testing the Text Overwrites
42:14 - Finishing Touches
42:54 - Scroll and Zoom Into View
44:30 - Wrapping Up
#Figma #FigJam #Plugin #Tutorial #NothingGreatIsMadeAlone
Смотрите видео Build your first plugin: 4. Building Your Plugin онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Figma 31 Май 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 30,83 раз и оно понравилось 36 людям.