Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Figma Design – Figma Learn
  • Build design systems
  • Styles

Create color, text, effect, and layout guide styles

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

From local styles From an existing object

Before you start

Who can use this feature

Creating styles is available on all plans can create styles. Publishing styles is available on Education, Professional, Organization, and Enterprise plans.

Anyone with can edit access to a file can create and edit styles.

Anyone with can view access to a published file can use styles from that library in files where they can edit.

Styles allow you to define a set of properties of an object, that can be reused across your designs.

Create styles for:

  • Text: font family, size, line height, spacing
    • Text styles can be applied to an entire layer or portions of text. This is perfect for defining the styles of headers, body text, and text within paragraphs—such as linked text.
    • Because text styles can’t be created for text alignment, you must set alignment for each block individually.
  • Colors: fill, stroke, image, gradient
    • When creating a style for a gradient, both the colors used and the gradient direction, or angle, will be saved to the style.

  • Effects: drop shadow, inner shadow, layer blur, background blur
    • A style can include more than one effect and all applied properties will be saved to the style.
    • Shadow styles are represented as icons in the Effects section of the right sidebar and vary according to their direction. These icons can also vary between drop or inner shadows and their x, y values.
  • Layout guides for frames: row, column, uniform grid
    • This is useful for replicating a specific format or structure across multiple designs.
    • Guide styles are represented as icons in the Layout guides section of the right sidebar and vary according to type: Uniform grid, Columns, or Rows. Learn more about layout guides.

From local styles

Local styles are style definitions that exist in the current file. You can access local styles in the right sidebar when nothing is selected, or from the style picker. Styles are grouped by type:

  • Text
  • Color
  • Effect
  • Layout guide

To create a new local style:

  1. In the right sidebar, click next to Local styles.
  2. Select the property you’d like to create a new style for.
  3. Give the style a name and description and click Create style. Descriptions display when hovering over the style in the style picker.

From an existing object

  1. Select the object or frame you’d like to create a style for.
  2. In the right sidebar, click next to the section corresponding to the style you want to create.
  3. Click in the style picker. In the Create new style modal, you can click Show more options to view and edit style properties.
  4. Give your style a name and description and click Create style. Descriptions display when hovering over the style in the style picker.

Tip! You can give Styles both a name and a description. We recommend using the name and description to communicate how Styles should be used in your designs, versus simply using a description of the color. 

To make finding and selecting styles easier, you can also organize your styles into folders. Learn more about naming, managing, and sharing styles.

Tip: If you are using Figma’s new design, UI3, then you can create a new style using the eyedropper tool.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Manage and share styles
  • Styles in Figma Design
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand