Skip to main content

Editing someone else's styles or component library in Figma

Lesson 116 from: Figma Advanced: Become a Figma Pro

Daniel Walter Scott

Editing someone else's styles or component library in Figma

Lesson 116 from: Figma Advanced: Become a Figma Pro

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

116. Editing someone else's styles or component library in Figma

<b>Learn how to safely edit and customize someone else's styles or component library in Figma with this step-by-step guide. Perfect for team collaboration!</b>

Lessons

Class Trailer
1

Intro to the Figma Advanced Course

03:14
2

Getting Started in Figma Advanced Course

02:31
3

Auto Layout & Responsive Design 101: It's use in responsive design

10:19
4

Designing in Figma with Auto Spacing in Auto Layouts

10:07
5

When and when not to use Components in Figma

06:00
6

What is good spacing to use in Figma

06:58
7

What spacing should I use for web & app design in Figma

05:16
8

Auto Layout vs Constraints in Figma

03:52
9

Autolayout shortcuts: Tips and tricks to work with Auto Layout faster

03:06
10

Class Project 01 - Responsive Lower Navigation

09:49
11

How to handle files in Figma and become a File Handling Master

06:39
12

How to use advanced Copy, Paste, and Selection Tricks in Figma?

06:35
13

How to do crazy things with your Figma fields?

03:33
14

Frame Tricks: Tips and Tricks to work with Figma frames effectively

04:40
15

Advanced Zooming Techniques in Figma

01:40
16

Light or Dark vs System Theme: Which one to use in Figma?

02:29
17

Class Project 02 - Event Card Constraints

01:35
18

Class Project 02 - Event Card Constraints - Completed

08:40
19

Grid vs Constraints vs Auto Layout in Figma

05:16
20

Copy, Paste & Export Grid Styles in Figma

05:29
21

Add Rows and Column Grids to Layout in Figma

04:19
22

How to update Grid Styles in Figma

01:32
23

Grids inside of frames that aren't the main frame

03:44
24

Class project 03 - Event Branding

04:19
25

Logos using Iconscout: How to use Iconscout to create logos in Figma?

06:47
26

What are widgets compared to plugins in Figma?

03:33
27

How to create UX color variants using a Figma Widget

05:13
28

Intro to Nested & Responsive Auto layouts Section

04:01
29

Production video - Tidying up my frame & component mess

05:52
30

Bring in images using the unsplash plugin in Figma

06:34
31

Production video - Making the parts for our nested autolayout

05:36
32

Nesting Multiple Auto Layouts inside each other in Figma

05:13
33

Autolayout Nesting with variants and responsive text in Figma

08:55
34

Auto Layout on different device sizes

09:34
35

Responsive text that adjusts for 2 lines in Figma

02:26
36

Abstract Gradient Background in Figma the easy way

11:50
37

How to copy and paste Interactions in Figma

01:23
38

Animate Gradient Mesh Using Variants in Figma

15:42
39

How to give feedback on a UX project - The Critique Sandwich

09:00
40

Class project 04 - Background Animation

04:50
41

Houdini Text: How to make a text mask animation Figma?

08:30
42

How to use the Spring Animations in Figma

06:33
43

Spring Animation: How to make custom Spring Animation in Figma

12:16
44

Why is interaction on tap on click grayed out or missing in Figma?

01:51
45

Class project 05 - Houdini Text Animation

01:38
46

Create & remove bulk multiple noodles wires at once in Figma

03:05
47

Bulk Update Nav Links in Figma Prototypes

03:15
48

How to set the right phone and find old prototype phones in Figma

04:01
49

How to make sticky scroll position search bar in Figma

06:10
50

How to stack multiple sticky text vertical scrolling in Figma

13:56
51

Class project 06 - Multiple Sticky Headings

02:25
52

How to make Interactive Components in Figma

03:42
53

How to make a checkmark turn on and off in Figma

02:38
54

Create Interactive Components with Sliding Nav Figma

06:55
55

Class project 07 - Sliding Button Nav Challenge

04:14
56

Class project 07 - Completed

03:51
57

How to use Sections in Figma for organizing your content

04:49
58

How to use sections for prototyping in Figma

06:38
59

How to add iOS battery wifi notch status bar to Figma

07:11
60

How to add iOS or Android Snack Bar UI to Figma

10:38
61

Class project 08 - Operating System UI

01:47
62

Be careful what you create in Figma

03:43
63

What are the advanced Layer shortcuts in Figma

07:38
64

How to find layer Zen shortcuts in Figma

04:37
65

How to hide and lock unlock all layers in Figma

01:05
66

How to use Locked layers in Figma

02:11
67

How to Find Replace and Multi-select Layer Search in Figma

03:58
68

How to Bulk Rename Layers with advanced tricks in Figma

09:57
69

How to replace instances and variants with shortcuts in Figma

08:58
70

How to use Instance Swap Component Properties with preferred in Figma

07:01
71

How to use Component Text Property in Figma

02:21
72

How to use Boolean Component Property in Figma

03:10
73

Input Fields Using Component Properties in Figma

09:52
74

How to Combine Variants with Component Properties in Figma

09:37
75

How to apply component properties to existing design systems

08:18
76

What is Simplify Instances in Figma

04:01
77

What does Expose Nested Instances do in Figma

10:15
78

Class project 09 - One button to rule them all

04:16
79

What are some font tips and tricks in Figma

05:10
80

How to truncate text and set max lines in Figma

02:44
81

How reset fonts & set default fonts in Figma

02:20
82

How to Use Line Height Percentage in 8pt grid in Figma

04:42
83

How to use Leading trim to cap height to baseline in Figma

04:16
84

How to set Hanging Punctuation for pull quotes & call outs in Figma

01:04
85

What are the Advanced Type Options in Figma

09:38
86

How to use Variable Type in UX app design in Figma

07:38
87

How to curve text with type on a path in Figma

06:44
88

How to use adobe fonts & local fonts in Figma

04:52
89

How to Preserve text overrides or not in Figma variant

04:42
90

How to use Chat GPT AI to create placeholder and personas in Figma

03:48
91

How to create an image style in Figma

03:47
92

What's the difference with Images inside frames vs fills vs Masked in Figma

04:15
93

How to crop images using shortcuts in Figma

02:13
94

How to mask images with text in Figma

06:21
95

Class Project 10 - Text Mask

02:49
96

How to mask using transparent PNGs with alpha channels in Figma

06:35
97

Class Project 11 - Alpha Mask

01:23
98

How to create a luma mask in Figma

03:02
99

Class project 12 - Luma Mask

01:00
100

How to make a spillover mask outside of the frame in Figma

09:49
101

How to use the pen tool to make image masks in Figma

11:04
102

How to use color layer blending modes in Figma

09:13
103

Class project 13 - Social Ad

02:28
104

How to add video in Figma

08:05
105

How to make a background autoplay video in Figma

01:45
106

How to get a video play when you hover in Figma

04:29
107

Class project 14 - Hover Play

00:54
108

How to make a play pause button for video in Figma

07:28
109

How to build a video card in Figma

08:38
110

Class project 15 - Video Card

02:28
111

What are some advanced color tricks in Figma

06:26
112

How to change replace colors in Figma

08:56
113

How to create Color Themes for light and dark in Figma

02:16
114

How to group color styles using slashes or folders in Figma

02:35
115

How to add descriptions to your styles in Figma for others to use

02:39
116

Editing someone else's styles or component library in Figma

04:30
117

How to hide color font styles & components from team library in Figma

04:45
118

How to compare changes in component with overlay in Figma

03:52
119

How to refactoring styles to another design file in Figma

04:09
120

How to move relink refactoring components to another design file in Figma

05:40
121

How to swap parts or entire component & style library in Figma

06:10
122

What are some advanced drawing tips and tricks in Figma

07:46
123

How to draw in Figma with the pen tool- Anchor point mastery

07:24
124

How to draw with Bend & Mirror angle in Figma

02:49
125

Can you animate anchor points or booleans in Figma

03:00
126

How to animate a mobile nav menu in Figma using a dip

14:12
127

Class project 16 - Alt Nav Animation

01:08
128

How to overlap & stack things in a Figma Autolayout

03:16
129

What are the shortcuts for hug & fill in Figma

03:36
130

How to set absolute spacing so things ignore Autolayout in Figma

02:47
131

How to absolute position something that is responsive in Figma

02:23
132

How stick things to the bottom right of an auto layout in Figma

04:02
133

How to resize a box automatically in a Auto Layout to match text in Figma

04:52
134

What are the autolayout padding and resizing shortcuts

01:51
135

How to create a minimum width height button in Figma

03:55
136

How to wrap auto layout objects in Figma

01:42
137

What does stroke included excluded mean in Figma auto layout

02:00
138

How to set custom spacing in auto layouts in Figma

03:15
139

How to organize Components into groups in Figma

05:57
140

How to create slot placeholder components in Figma

07:21
141

How to convert an existing website into a Figma design

05:04
142

How to make a drop down using overlays in Figma

13:58
143

How to make a multi level drop down menu in Figma

14:14
144

Class project 17 - Nested Dropdown Menu

01:47
145

How to create a hover grow effect for images in Figma

18:22
146

Class project 18 - Hover Grow Effect

02:15
147

How to make an expanding Search Bar in Figma

10:25
148

Class project 19 - Expanding Search Bar

00:56
149

What are Variables in Figma

03:26
150

How to create cart total using number variables in Figma

05:40
151

How to add add conditions to variables in Figma

02:26
152

Variant change using Boolean variable - change cart color

05:41
153

Turning our boolean variable to false in Figma

01:50
154

Making a Overlay Popup in the Variable action panel in Figma

02:53
155

Light and Dark Modes using Collections & Color Variables in Figma

07:04
156

How to change spacing with Number Variables in Figma

04:57
157

What are Design Tokens in Figma

06:50
158

How to create Design Tokens in Figma

09:46
159

Creating spacing & radius design tokens in Figma

07:46
160

When would you use design tokens in Figma

05:06

Lesson Info

Editing someone else's styles or component library in Figma

Class Materials

Bonus Materials

Exercise_Files-Figma_Advanced.zip
Figma_Advanced_Cheatsheet_v2.pdf

Ratings and Reviews

Student Work

RELATED ARTICLES

RELATED ARTICLES