Before we create wireframes, I'm gonna teach you 2 features of Figma, that we haven't covered yet. 1
We're gonna need them to create our wireframes. 2
These are Styles and Components. In this video, 3
we're going to cover Styles. 4
You know, how in Webflow we can style classes and tags? 5
We can do something similar in Figma as well. 6
For example, let's take a heading and style it. 7
Under these dots, we have option for Tex Styles. 8
If we click on that plus icon, this will create a new Text Style from the currently selected text. We 9
can name it H1, similar to what we do in Webflow, when styling all H1 tags. 10
Now we can take any other text and apply H1 style to it. 11
In the properties panel, you'll see that a lot of text editing options are disabled. Like the font, 12
size, line height and others are gone. But we still have things like fill color and text alignment. 13
They don't become part of the Text Style, so they can always be edited. And it's not going to affect the 14
Text Style itself, it will be applied only to that instance. 15
If this was Webflow, we wouldn't be able to do this. Everything would be editable and reflected on all 16
instances with the same tag or class. Inside the interface designers like Figma, 17
this behavior makes more sense. To edit a style, 18
click on it and then go to the Edit Style. We have an option to Edit the Style from here. 19
You can change whatever you like and you will see changes to the style instantly reflect on all of the 20
instances. 21
This doesn't seem like much, but when you have several pages with multiple headlines on each page, then 22
you'll realize how big this is. 23
We also have an option to detach the style. That's going to let you edit all the text properties. And 24
any future changes to the original text style, is not going to affect the second headline because it's 25
now detached from the textile. 26
If you want to delete the style, this is not very evident, but right-click on it and you'll get a delete 27
option. 28
Text styles are not the only thing we have in Figma. 29
Almost every other property in the panel can have these global styles. Fill, stroke, effects even the grid. 30
The second most useful is always the color styles. From the same place, 31
you can add a new color style. 32
And just like text styles, it can be applied to all other elements that have color 33
property. Doesn't matter if it's text or rectangle. Just like Text Styles, 34
color styles are big. 35
I often end up changing colors several times while designing a website. 36
Very picky with colors and can change my mind easily. 37
God bless the colors styles. 38
So that's the Styles in Figma. Applies to nearly everything fill, color, text, layout, grid. 39
Up next, we're gonna cover Components. 40
Stick around.