Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Styles | Creating Visuals
UI/UX with Figma
course content

Course Content

UI/UX with Figma

UI/UX with Figma

1. Figma Basic Tools
2. Creating and Organizing Objects
3. Creating Visuals
4. Prototyping
5. Submitting Work

book
Styles

Styles help organize colors and text in a project, eliminating the need to remember their properties. It is a fast way to organize your project.

  • To create a color style, select an object, go to the Design Panel, click the Fill icon, then click the (+) icon to create a new style;
  • Name the style and optionally add a description;
  • You can apply styles by selecting the object, navigating to Fill, and clicking the four dots to access saved styles;
  • Create text, go to Typography in the Design Panel, and click the four dots;
  • Click + to create a new text style, name it, and set properties;
  • Using the slash naming technique (e.g., Red/Brick and Red/Pastel) is very helpful if you want to organize the styles in groups. These grouped styles can be collapsed or expanded in the Local Styles panel;
  • To modify a style, detach it (similar to detaching an instance) and apply desired changes;
  • To delete a style, right-click the style in the Local Styles panel and select Delete.
1. What is the primary purpose of styles in Figma? (choose two)
2. What is the function of the slash naming technique in Figma?
What is the primary purpose of styles in Figma? (choose two)

What is the primary purpose of styles in Figma? (choose two)

Select a few correct answers

What is the function of the slash naming technique in Figma?

What is the function of the slash naming technique in Figma?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 7
We're sorry to hear that something went wrong. What happened?
some-alt