"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about styles: help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma"
So, I'm old school and have been using Photoshop for web design for 8 years. I started using Figma...and I'm thinking I won't be using Photoshop for web design ever again.
Hi Figma, I'm very happy to see you come up with colour and character styles. One thing that really puts me off using character styles is that I can't define colour for a character style. This could lead to confusion in more complex projects. I know I could use a component, but that would deny the purpose of character styles for me. Is there any chance of you adding this functionality?
You're well into a solid foundation of users. Enough to question when we will see some more advanced features and guides like "smart find and match undefined colors to style" 🙄
Looks like Styles are almost similar to Components, in conclusion of this and the previous video. If we think about changing the colors for all buttons or stroke etc, it seems very useful. But, if we think about the text styles like font size or font family etc, that can be done by Components only. Not sure if I am right :)
So, as a user coming from Sketch, Figma has separated Symbols into both Components and Styles. Styles are, as the name implies, global presets of stylings -- namely color, text, and effects -- while Components are more likely to be full fledged, reusable UI elements, for example a button, which itself may make use of Styles, for example a blue color and a drop shadow. Is that a good summary?
That's a pretty good summary, William! I'd refer to "stylings" as "properties" in your example, as they are present in the Properties Panel. Be sure to join our Community Forum over on Spectrum here: spectrum.chat/figma
I found the text styles super cumbersome. coming from sketch, the style dropdown is detached from the text attributes section. This allows you to see text attributes after you applied a style to a text. with figma, the attributes disappear and the text style replaces its position. if I have two texts with different text styles and want to compare values, I have to go into each style to check attributes and remember the values. in general it takes too many clicks to change an existing text style (open style dropdown - tap edit - new panel opens to edit text - go back). It would also be great if one can overwrite / update (not edit) existing text styles. these little things make it a bit hard for me to make the switch because it just disrupts the workflow :/
Hey Thiago, not yet, but I'd love to see this in the future as well! We're always working on the next big thing and hopefully it's evident that we're always listening to our users. Maybe we'll see this functionality in the future. Thanks for the suggestion!
Figma This is how Sketch deals with styles. It's definitely not the right way to go! You end up with so many permutations of text style that it's a massive job to manage it all. I fear the day I need to make a change... Figmause the other end of the scale, which is better for designers as we can set up a handful of basic styles and then play with extra formatting once real text is applied to a design. Axure have taken a more complicated approach, letting users control which factors apply to each style; a style might include font face, colour, and weight, but not justification or letter spacing. This is as close to how CSS works as a design package should go, and in theory should be super handy, but in practice it's just too much fuss to bother with. Design needs to be faster & more fluid than that. I think Figma have got it right.
The line between programming and design is getting closer than ever, this is just like when programming except you use text instead of this interface. And can we copy the style CSS property of the style? it's would be awesome when I start to code the app.
But what if I want to add the styles and components in a specific file to my personal library (Starter Plan) without creating a team (as there isnt any). The whole point is, I want it to be easy to use the style and components from the main file to all of my new projects (no team involved).
Hey Agostinho, you apply both a text style and a color style separately. This helps simplify the number of combination styles you could have. If you had 10 text styles and 10 color styles, to make each possible combination you'd need to create 100 different text+color styles. Keeping them separate simplifies the style creation and management process.
Make a certain element always have a fixed horizontal/vertical margin in relationship to another element. So that when you move one, the other will follow. Does this feature exist in Figma?
Is there any way to share styles other than Team Libraries, what oif I don't have a Team plan btw, or I have multiples files by myself, I just want to access or copy them on other files? Is that even possible. Can y'all update your Team Library video btw for this?
Hey Steven, updating the Team Library video is on our list for sure! Publishing Styles to the Team Library is the only way to do share Styles, and it is available in a free Starter Team. Don't have a team? Create a Starter Team for free right here: www.figma.com/files/create-team
Hi Michael, that's correct. If you create a Component with these properties, they would be preserved in any instances of that Component. However, Styles do not currently support those specific properties.
Hi Philly, after creating a File that contains Styles, you can then Publish them to your Team Library. Check out the "Share Styles" section of this article on our Help Center for more information: help.figma.com/article/187-styles-managing-and-sharing-styles
Hi Alex, a recent update removed the unique background property that once belonged to Frames and unified the Fill property that was used for other vector shapes.
I've made custom text style and filled it with green color. When I create new text object and apply the text style - it is black. How to add also a color fill to the text style? I should separatly add a color style to the text object to work?
Hey! In Figma, Color Styles and Text Styles are completely separate. This allows for you to build flexible and modular text elements in your designs. For example, you can create a Blue Color Style named "Hyperlink Default", then create your Text Style named "Paragraph", and when you have a text element using the Paragraph Text Style, you can select a sub-string of text to apply the "Hyperlink Default" color to just that sub-string. Be sure to check out our Blog post here: blog.figma.com/figma-3-0-217d6c248f85 and our Styles article on our Help Center here: help.figma.com/properties-panel/styles to learn more.
I'm a rookie in web design so usefulness of styles is not very obvious to me. Text is ok, but i can do the same things using components, and the same true for shapes. For colors, color menu has Custom Colors... so i still confused what is the application of this (i feel it should be useful... probably it is more natural to use styles for text)
Hey Evgeny, while you can use "Color Components" for some things, Styles are often the better choice. For something like applying the fill to substrings of text elements, Styles are definitely the way to go. We don't have "Shape" Styles, so you're right there! This video was focused on Creating Styles, but we definitely would love more content about use cases and applications. I would recommend checking out the Styles article on our Help Center here: help.figma.com/properties-panel/styles You can also ask your questions on our Community Forum: spectrum.chat/figma
I hate that Figma doesn't save certain panel's custom position (e.g. that color picker panel that you moved), why not either save it globally, for the whole app, when we move it, it will show up there, or save that position only for that certain layer only? Can y'all fix this little UX bug for all of us?
This is great. But I still am limited to one group of colours per team. I work on projects for multiple clients, therefore, I'm working with multiple brands. I need a way to easily group each brand or easily differentiate each set of styles... come on! I've been asking for something like this for almost two years now... it's not rocket science.
Hey Swiftau, if you create another file with new Styles in it, you can publish it to your Team Library. After that, just enable each of the published Libraries from the Team Library in any file (Alt/Option + 3) to access it from anywhere! Organizing your Styles if multiple Files will keep them organized to use across brands and with different clients. Read more about the Team Library here: help.figma.com/editor/team-library and Styles here: help.figma.com/properties-panel/styles
Completely outdated. Now + sign creates a "variable" and it's not introduced in the palette of color styles at all. Also then impossible to delete said variable
What is the difference between text styles mentioned here and components (with styles) as i learned here: www.figma.com/best-practices/component-architecture/text-components/
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about styles: help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma"
The more I watch these videos, the more I realise how amazing this tool is. Thanks for giving us a free option to use it!
This is a HUGE time saver. This feature was missing for a long time. Thanks, Figma Team! Figma is the best!
So, I'm old school and have been using Photoshop for web design for 8 years. I started using Figma...and I'm thinking I won't be using Photoshop for web design ever again.
So you're using Photoshop? 😁
Using PS for web design after 2013. doesn't make any sense.
@@TechnoAsh Been using Figma ever since I posted about this!
not that old school, you're not using pencils...
@@MiniKodjo Has anyone ever designed a website using pencils?
The revolution has started...Figma is the real deal!
Extremely powerful, so easily explained. You are a PRO! Thank you for sharing your knowledge. Much appreciated!
I was using sketch for my internship because it was all mac... When I saw this I was in love
4:15 - Text styles #paragraphStyles
4:49 - Object styles / shape styles
5:10 - Layout grid styles
Best design tool ever created.
Hi Figma, I'm very happy to see you come up with colour and character styles. One thing that really puts me off using character styles is that I can't define colour for a character style. This could lead to confusion in more complex projects. I know I could use a component, but that would deny the purpose of character styles for me. Is there any chance of you adding this functionality?
I was watching this and a few minutes into it, I paused the video and started clapping. Figma is just awesome
Really nice new feature. Very happy to see Figma coming more and more intuitive.
THE BEST APP FOR UI/UX FOR SURE. THANKS FIGMA
Figma is the best
Thank you for this. Short and helpful. You gained a new follower.
Is like changing variables in sass. so dope..
Figma is just awesome. I have learned a lot in few days
Thank you very much. The tutorial was very helpful.
Precise. So well explained. Thank you very much.
Awesome, this features will save lot of my time. Before now i used components, but this way more comfortable. Great!!!
thank u so much, worth a speedy gold is in the software which makes any of projects faster to complete before deadline or time!
✨
You're well into a solid foundation of users. Enough to question when we will see some more advanced features and guides like "smart find and match undefined colors to style" 🙄
I am looking for a long time *_What is this font_* (Figma's font, not Roboto. I mean, you know this strange font plssssss)
Looks like Styles are almost similar to Components, in conclusion of this and the previous video. If we think about changing the colors for all buttons or stroke etc, it seems very useful. But, if we think about the text styles like font size or font family etc, that can be done by Components only. Not sure if I am right :)
This was really helpful for me. Thank you
Thank you figma
Figma - number one!!!!
So glad am learning now though it's late but it's better to be late than never
people in the future will come here and think: why i never knew about this thing called Figma?
why i never knew about this thing called Figma?
why i never knew about this thing called Figma?
What's wrong with my figma that I no longer have the edit style option in my style panel (minute 2:30) ??? Has it been removed after an update?
So, as a user coming from Sketch, Figma has separated Symbols into both Components and Styles. Styles are, as the name implies, global presets of stylings -- namely color, text, and effects -- while Components are more likely to be full fledged, reusable UI elements, for example a button, which itself may make use of Styles, for example a blue color and a drop shadow. Is that a good summary?
That's a pretty good summary, William! I'd refer to "stylings" as "properties" in your example, as they are present in the Properties Panel.
Be sure to join our Community Forum over on Spectrum here: spectrum.chat/figma
Super helpful! Thanks!
Are you exporting the videos with 10% volume?
Very usefull, thanks!
that's awesome, I can't wait to try it out
In my Figma there is no book icon in the right top corner. Din you change the interface? Is this tutorial still actual?
I found the text styles super cumbersome. coming from sketch, the style dropdown is detached from the text attributes section. This allows you to see text attributes after you applied a style to a text. with figma, the attributes disappear and the text style replaces its position. if I have two texts with different text styles and want to compare values, I have to go into each style to check attributes and remember the values. in general it takes too many clicks to change an existing text style (open style dropdown - tap edit - new panel opens to edit text - go back). It would also be great if one can overwrite / update (not edit) existing text styles. these little things make it a bit hard for me to make the switch because it just disrupts the workflow :/
Hey Figma, is there chance to create a Global Styles? Something like that: I could group styles of Color + Stroke + Effects into just one style?
Hey Thiago, not yet, but I'd love to see this in the future as well! We're always working on the next big thing and hopefully it's evident that we're always listening to our users. Maybe we'll see this functionality in the future. Thanks for the suggestion!
Figma This is how Sketch deals with styles. It's definitely not the right way to go! You end up with so many permutations of text style that it's a massive job to manage it all. I fear the day I need to make a change... Figmause the other end of the scale, which is better for designers as we can set up a handful of basic styles and then play with extra formatting once real text is applied to a design. Axure have taken a more complicated approach, letting users control which factors apply to each style; a style might include font face, colour, and weight, but not justification or letter spacing. This is as close to how CSS works as a design package should go, and in theory should be super handy, but in practice it's just too much fuss to bother with. Design needs to be faster & more fluid than that. I think Figma have got it right.
hi admin, please, how to update create color styles for all project in Figma
Excellent video. Thank you.
Thank you ❤
So i created some text styles with white type and tried to use them but the type is appearing black. Do text styles not retain color information?
The line between programming and design is getting closer than ever, this is just like when programming except you use text instead of this interface. And can we copy the style CSS property of the style? it's would be awesome when I start to code the app.
Xmas came earlier this year :D
hey , I love Figma because It's so cool and free from Viet Nam
Can you export/import or copy/paste styles from one project to another?
But what if I want to add the styles and components in a specific file to my personal library (Starter Plan) without creating a team (as there isnt any). The whole point is, I want it to be easy to use the style and components from the main file to all of my new projects (no team involved).
I'm blown away ommgg
What about styles that include a fill and a stroke?
How do I add color to a Text Style? Thank you!
Hey Agostinho, you apply both a text style and a color style separately. This helps simplify the number of combination styles you could have. If you had 10 text styles and 10 color styles, to make each possible combination you'd need to create 100 different text+color styles. Keeping them separate simplifies the style creation and management process.
This is epic! Thank you so much! :D
How do you add styles to a Rectangle, i.e. width, height, corner radius?
I believe you would want to use variables in this case.
Make a certain element always have a fixed horizontal/vertical margin in relationship to another element. So that when you move one, the other will follow.
Does this feature exist in Figma?
Still trying to figure out how to apply a text style. You'd think it'd be straight forward.
I prefer how styles and symbols work in Sketch. I'm finding it hard to apply styles to elements within components.
Thanks
Is there any way to share styles other than Team Libraries, what oif I don't have a Team plan btw, or I have multiples files by myself, I just want to access or copy them on other files? Is that even possible. Can y'all update your Team Library video btw for this?
Hey Steven, updating the Team Library video is on our list for sure! Publishing Styles to the Team Library is the only way to do share Styles, and it is available in a free Starter Team. Don't have a team? Create a Starter Team for free right here: www.figma.com/files/create-team
Constraints and rounded corners are not saved in a style???
Hi Michael, that's correct. If you create a Component with these properties, they would be preserved in any instances of that Component. However, Styles do not currently support those specific properties.
How can you export your styles you have created for one project to bring them into a new project? been trying everything :S
Hi Philly, after creating a File that contains Styles, you can then Publish them to your Team Library. Check out the "Share Styles" section of this article on our Help Center for more information: help.figma.com/article/187-styles-managing-and-sharing-styles
How can I edit a style's color?
Great!
Hi, does the style wont carry forward to new tab i open? It only appears in the same tab I created the style?
Hey there, if you want to use Styles in different files, you'll need to publish them to a Team Library!
@@Figma How do i do that though? Is this available for free version?
Cool!!! Thanks!!!
How do you get the background option? I only get the fill option.
Hi Alex, a recent update removed the unique background property that once belonged to Frames and unified the Fill property that was used for other vector shapes.
I've made custom text style and filled it with green color. When I create new text object and apply the text style - it is black. How to add also a color fill to the text style? I should separatly add a color style to the text object to work?
Hey! In Figma, Color Styles and Text Styles are completely separate. This allows for you to build flexible and modular text elements in your designs. For example, you can create a Blue Color Style named "Hyperlink Default", then create your Text Style named "Paragraph", and when you have a text element using the Paragraph Text Style, you can select a sub-string of text to apply the "Hyperlink Default" color to just that sub-string. Be sure to check out our Blog post here: blog.figma.com/figma-3-0-217d6c248f85 and our Styles article on our Help Center here: help.figma.com/properties-panel/styles to learn more.
Iguess the idea is to add styles separatly, all the styles seems to be working as independent sets (colors / type / effects )
thank you
Yes!
I'm a rookie in web design so usefulness of styles is not very obvious to me. Text is ok, but i can do the same things using components, and the same true for shapes. For colors, color menu has Custom Colors... so i still confused what is the application of this (i feel it should be useful... probably it is more natural to use styles for text)
Hey Evgeny, while you can use "Color Components" for some things, Styles are often the better choice. For something like applying the fill to substrings of text elements, Styles are definitely the way to go. We don't have "Shape" Styles, so you're right there! This video was focused on Creating Styles, but we definitely would love more content about use cases and applications. I would recommend checking out the Styles article on our Help Center here: help.figma.com/properties-panel/styles You can also ask your questions on our Community Forum: spectrum.chat/figma
I hate that Figma doesn't save certain panel's custom position (e.g. that color picker panel that you moved), why not either save it globally, for the whole app, when we move it, it will show up there, or save that position only for that certain layer only? Can y'all fix this little UX bug for all of us?
How can I make letters like S with pathtool?
would be great to create a Stroke style (color, size, etc..) or Component style (background color, corner radius, shadow)
Anyone know the font name from the video cover?
The typeface is called Whyte and available here: www.abcdinamo.com/typefaces/whyte
newbie 2021 here ^^
This is great. But I still am limited to one group of colours per team. I work on projects for multiple clients, therefore, I'm working with multiple brands. I need a way to easily group each brand or easily differentiate each set of styles... come on! I've been asking for something like this for almost two years now... it's not rocket science.
Hey Swiftau, if you create another file with new Styles in it, you can publish it to your Team Library. After that, just enable each of the published Libraries from the Team Library in any file (Alt/Option + 3) to access it from anywhere! Organizing your Styles if multiple Files will keep them organized to use across brands and with different clients. Read more about the Team Library here: help.figma.com/editor/team-library and Styles here: help.figma.com/properties-panel/styles
I'm also old school but I've been using Illustrator all the time, wishing it has all the features Figma has lol I was a fool. Bye-bye Ai!
So it's been a month i used style. And i just knew that i have been editing my style coz i haven't detached them. 😅 Rookie mistake
silence for those who still use Photoshop for web designing
Completely outdated. Now + sign creates a "variable" and it's not introduced in the palette of color styles at all. Also then impossible to delete said variable
👍👍
Wow..
3:23 Dude, do you actually know the color code for that type of yellow? xD
why the hell aren't they more advertised? or have i been living under the rock
What is the difference between text styles mentioned here and components (with styles) as i learned here: www.figma.com/best-practices/component-architecture/text-components/
You showed how to create style but you did not show how to apply them
Macho, actualizame la cosa...5 años...
Fuck I didn’t knew that :( frustrated
FIGMA SUCKS!
How complicated have they made it though? God damn
thanks