Styles in Figma are custom properties for objects that can be saved and reused from a dropdown on the object properties panel on the right-hand side. Styles can be defined for fonts, colors, and effects like shadows, blurs, and even grids.
Let’s optimize how you manage and create your styles so you can free up more of your time and do your job effectively.
- The benefits of Figma styles
- The 4 types of Figma styles
- Creating styles in Figma from scratch
- Managing styles
- Publishing libraries
- Organizing libraries
- Bonus tips and plugins
- Maintaining your Figma styles
The benefits of Figma styles
There are several advantages to defining styles in Figma, which include:
- Styles ensure design consistency. Defining styles in Figma allows for the reuse of set styles, reducing the chances of creating an excessive number of variations that can make the design look inconsistent
- Styles save time by streamlining the process of creating new objects and components. By selecting a predefined style already applied to other objects and components, the design remains cohesive without having to cross-check and reapply properties manually
- Styles can be updated at any time, with the changes automatically applied to all objects and components using that style. This feature ensures that design operations are scalable, regardless of the size of the design operation
The 4 types of Figma styles
The four main types of styles in Figma are text styles, color styles, grid styles, and effect styles.
Text styles define attributes such as font family, size, color, and line spacing. Establishing a font hierarchy for different use cases, like body, small body, heading, subheading, and others, ensures that these styles are utilized in developer files, such as CSS. Line spacing for font sizes can vary, but it generally involves multiplying the font size by the golden ratio of 1.6 to create an aesthetic line height with pleasant white space.
Color styles help maintain a consistent palette that is suitable for the brand and product. Consistency in colors establishes familiarity, builds trust and credibility, and tangibly improves the user experience by making the UI more organized.
Users can distinguish between different elements and their functions using colors—for example, always using the color red for critical actions like deleting. Colors also aid with accessibility by designing color palettes with ample contrast ratios to accommodate colorblind users.
Grid styles are another crucial aspect of UI design, and they can vary for different device sizes like desktop, mobile, and tablet. Grid styles define attributes like the number of columns, gutter size, and alignment. Maintaining a responsive system that adapts to varying screen sizes is essential, as is designing the UI in a way that is ready for implementation from a frontend developer’s perspective.
Effect styles are just that: special effects. These can include drop shadows, layer blurs, background blurs, and so on. Effects are the finishing touches on your design.
The component library in Figma allows for the creation of components with varying styles that can be easily toggled on a need basis. A more mature and sophisticated version is called a design system, which usually requires greater effort and ongoing development.
Creating styles in Figma from scratch
The style creation process in Figma is intuitive. First, select an object that has the property you want to create a style for — it could be a font or color. Then, click on the four-dot icon in the right-hand sidebar with the property defined.
In the menu that opens, there’s a plus icon — clicking that will open up the option to create a style. If you want to group your style under a certain name, first type the group name, followed by a “/”, and then the style name.
Learn more →For instance, a shade of green could be named “Green/Light,” and another could be named “Green/Dark.” They would then appear under the Green group as two separate styles.
Examples of styles grouped together include:
Managing styles
Instead of naming styles with a “/”, Figma also has the option of selecting local styles, right-clicking on them to either put them inside a folder or delete as needed for cleaning and organizing.
Updating styles is easy: clicking on the adjust icon opens up the style properties. Anywhere the style exists, hover over it to reveal the adjust icon, which then opens up the properties box to update the style. Reordering these styles can be accomplished with the drag-and-drop interaction.
On certain occasions, you might need to move styles between files. To do this in Figma, right-click on the style and click Cut style. You can then paste the style into the destination folder by right-clicking again on the local styles panel on the right sidebar.
Publishing libraries
The true magic of defining styles comes alive when we publish them as a library. Next to the filename that has our file, there’s an arrow icon that opens a menu with the Publish library option. Clicking on Publish library makes the styles in our file available to all other files in our Figma team plan.
When creating a new file, open the Figma menu and select Libraries. In the libraries list, toggle on the file you just published. Doing so makes all the styles in that file available to you in your new file. Using this system of libraries helps organize styles in a global file and easily reuse them for different projects. For large projects, this feature is essential.
Organizing libraries
Thomas Lowry (Designer Advocate at Figma) recommends using several small libraries for organizing libraries for medium to large operations. However, small teams often start with one large library with all the styles and components. A single library becomes unsustainable in the long term because it ends up exceeding the working memory available to use the file reliably without Figma crashing.
Lowry also suggests using pages and frames to organize components.
Following is an example of how to structure a style guide in Figma. The page Shadows and blurs contains all the shadow and blur effect styles. The styles are then demonstrated inside a frame in a neat chronological manner with supporting documentation, such that any consumer of the style guide can understand the utility of the different styles with ease.
Creating a style guide can be intimidating for beginners. The best approach is to take inspiration from existing style guides and design systems created by reputed institutions — examples include Microsoft Fluent, Shopify Polaris, and the Atlassian Design System.
Compare the typography style guides for the mentioned systems:
The style guides vary quite a bit because they’re custom tailored for their unique use cases, but the basics are the same. All of them define a font stack and different sizes, weights, character spacing, line heights, and other relevant properties. In addition, they document when to use ech style with illustrated examples.
Bonus tips and plugins
There are numerous plugins to help with complex tasks, and each new article or tutorial will introduce a new one. By going to the Figma community, using keywords such as “style,” and sorting by trending, you can identify the best plugins for your needs.
The most relevant and useful plugins will vary based on the designer. For instance, a batch styler can be quite handy for use cases where we are updating an entire project with new aesthetics. However, this might not be something that happens frequently and may be more of a one-off need.
Based on personal experience, a helpful plugin for starting a new project is Automatic Style Guides – Figma. This plugin automatically generates a style guide based on the styles defined in the local file. Designers can focus on exploring different styles without worrying about defining style guides.
Once satisfied with the outcome, you can use the Automatic Style Guides plugin to generate a guide. The initial basic style guide can then be refined and iterated over time as the project scope allows.
An alternate, less popular plugin is Auto Documentation – Figma, which serves the same purpose as the aforementioned plugin. Another alternative is Color Style Guide – Figma.
Bulk renaming
The bulk renaming option in Figma is often underutilized by beginners. Renaming layers as a key part of creating organized style guides and components can simplify the creation process.
To create style guides quickly, create a group of objects with the desired styling. Select them in bulk and press Control + R on Windows or Command + R on Mac to open the bulk renaming option. Rename the objects to something appropriate, such as “Success/$N00” — which renames the rectangles to “Success/100,” “Success/200,” and “Success/300.”
Then, select these rectangles and run the Styler – Figma plugin to automatically generate styles for the “Success” use case.
This method provides more control over defining the style guide rather than letting the plugin create a style guide without context. Use both methods together to enhance productivity gains.
Bulk updating styles
Another common use case for designers is bulk updating styles of objects. To accomplish this, some users rely on plugins such as Style Swap – Figma and Batch Styler – Figma. Style Swap works only for fonts, while Batch Styler covers both fonts and colors.
Maintaining your Figma styles
Ensure the style guide is powerful yet easy to understand. Following the structure of other style guides should make it easier to gain stakeholder buy-in. The maturity and utility of the style guide will evolve over time.
To communicate new styles and aesthetics and update old ones, it is helpful to compare old and new visuals side by side. Some stakeholders may be wary of changes, as many people are creatures of habit and unfamiliarity can be uncomfortable. In such cases, communicate the merits of the new styles, whether it’s a more soothing color palette or tangible benefits like improved accessibility.
LogRocket: Analytics that give you UX insights without the need for interviews
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
