Styles and style tips

Styles in shared libraries

You can also include styles like colors and text styles in your shared libraries—they are much simpler to create, but there are still some best practices that will make using them easier.

Text styles: Figma has decoupled properties like alignment and color from being included in the style, so you won't need to create a separate unconnected text style for every color or justification. This results in fewer styles, making them easier to manage. Many users will have two sets of type styles which include a type ramp for mobile and another for desktop.

Color styles: Make sure you have styles created for all of your documented colors in your design system, and name them appropriately so they are easy to identity, use and implement.

Effect styles: Effect styles allow you to consistently reuse effects like layer blurs, background blurs, drop shadows, and inner shadows. For example: the Material design system includes an entire set of drop shadows to coincide with different layers that are stacked in the UI—shadows are repeatedly used used to create the effect of different "elevations" tied to certain elements like modals and buttons.

Grid styles: Often overlooked, grid styles can help standardize layout grids across multiple projects and viewports. If you have specific grids you use from desktop down to mobile phones, consider defining grid styles so they can be easily shared.

Style tips

Style names: Style names are critical for alignment with predefined properties in your design system. You can also use prefixes separated by a forward slash in the names to group styles in the style picker (note: you can only add one level of hierarchy). For example, if you add "Alerts/" before several styles, they will all appear together under the subheading "Alerts". You might use these prefixes to:

group colors by hue
group colors by theme or type
group accessible colors together
group type styles by font family or size
group grid styles by viewport size

Style descriptions: Add descriptions to your styles—these will appear in tooltips in much the same way they do for components. The descriptions can help clarify their intended usage by surfacing additional information to help designers select the right style.

Style names and descriptions can be helpful to clarify usage, or create alignment with naming used in your codebase.

Note: when developers are inspecting your designs, in the code panel, style names will show up as comments in CSS mode and as a line item in table view. The names of color, type, and effect styles will be displayed in addition to their attributes.

Image fills for Placeholder images: You can create styles for image fills. Lets say you have some user avatars, or placeholder photos you commonly use. You may not know what shape, aspect ratio, or size they will need to be applied to. By creating image fills, you can easily apply them to any shape.

Create styles from image fills and easily apply them to objects of all shapes and sizes.

Layout grids for visualizing spacing: You can create grid styles which are comprised of multiple layout grids. For example, a column and a row grid can be applied to a frame or component to help visualize margins or padding. These can be very useful for teams that have defined standardized spacing as part of their system.