Meet FigJam, our new online whiteboard for teams to explore ideas together. Learn more.

···

    Publish styles and components

    Who can use this feature

    Publish styles on any team or plan.

    Publish components on the Education, Professional, Organization, and Enterprise plans.

    When you first create styles and components, you can only access them in the current file. Publish styles and components to a library to share them with others, or use them in other files or projects. 

    Browse published styles and components in the library modal and enable libraries to access them in drafts and team or organization files.

    Who can publish styles and components

    • Starter plan: team members with can edit team permissions can publish styles.
    • Education plan: team members with can edit team permissions can publish styles and components.
    • Professional plan: only team members with an editor design role on the team can publish styles and components.
    • Organization and Enterprise plans: only members with editor design role can publish styles and components.

    Caution: Component libraries are a paid feature. You can still create and use components on the free Starter plan, but you can't publish them to access them in other files.

    Publish styles and components

    You can choose exactly which styles and components you want to publish using the checkboxes. You can also hide components in your file throughout the publishing process.

    View, manage, and publish libraries from the Library modal. The publishing process is the same for new libraries, as well as changes to existing libraries.

    There are a few ways to access the library modal from within a file:

    • A

      Editor toolbar

      1. Click on an empty spot in the canvas to deselect.
      2. Click the next to the file name in the toolbar.
      3. Select Publish styles and components from the options.
      Expanded menu from the file name in the toolbar with publish styles and components menu option highlighted
    • B

      Assets panel

      1. Click on the Assets panel in the left sidebar.
      2. Click the to open the library modal.
      Assets panel open in the left sidebar with the cursor hovering over the team library icon
    • C

      Use the keyboard shortcut

      • Mac: ⌥ Option 3
      • Windows: Alt 3

    Publish to library

    Every time you publish to your library, you'll be prompted to add a description. This allows you to communicate decisions and changes to the people who use your library.

    Figma shows descriptions when accepting updates from a library, as well as in the file's version history.

    Publish styles and components from the file where they live.

    1. Open the library modal from the file ↑
    2. In the Current file section, click the Publish button.
    3. Add a description of the library's purpose, or a summary of any decisions or changes.
    4. View a list of changes to the library. This details any styles and components added, modified, or removed.
    5. Choose which changes you want to publish:
      • Check individual components you do want to publish
      • Uncheck individual components you don't want to publish
      • Uncheck Changes to deselect all styles and components
    6. When you've finalized your styles and components, click the Publish button. Figma will show a notification to confirm your file has been successfully published.

    Publishing_modal__4_.png

    Publish individual styles and components

    If you are missing styles and components from a published file, or want to add more styles and components, you can publish these individually. There are a couple ways to do this:

    • A

      Use the right-click menu

      1. Select the components you want to publish.
      2. Right-click the selected components.
      3. Click Publish selected components.
    • B

      Use the Assets tab

      1. Click on the Assets tab in the left sidebar or use the keyboard shortcut:
        • MacOS: ⌥ Option 2
        • Windows: Alt 2
      2. Scroll down to the Hidden section, which will list any components that exist in the file, but haven't been published.
      3. Right-click on the component and select Show when publishing. If you have hidden the component using the . or _ prefix, you will need to remove this.
      4. Figma will notify you that your updates are successfully published.

      Show_when_publishing.png

    Publish updates to a library

    If you make changes to a published style or component, this will only apply those changes to instances in the current file. If you want those changes to be reflected in your library, you will also need to publish those changes to the library.

    Figma will display a blue dot on the icon in the Assets panel of the left sidebar to let you know if there are any updates that need to be published:

    1. Click either the Assets panel at the top of the left sidebar to open the library modal.
    2. Add a description of any decisions or changes. This will show in the file's version history, and the Updates tab of the Libraries modal.
    3. View a list of changes to the library. This details any styles and components added, modified, or removed.
    4. Choose which changes you want to publish:
      • Check individual components you do want to publish
      • Uncheck individual components you don't want to publish
      • Uncheck Changes to deselect all styles and components
    5. When you've finalized your styles and components, click the Publish button. Figma will show a notification to confirm your file has been successfully published.

    Note: If you are a member of an organization, you can also choose to share the library with your organization. This will allow other members of the organization to find and use styles and components from this file.

    Check the box next to Allow any member of organization to access this file before you click Publish. Learn how add and remove libraries in an organization →

    Hide styles and components

    If you have styles and components that you don't want to share, or are still a work in progress, you can hide them from publishing. When you're ready to share you can show them again to publish and share them.

    There are a few ways to hide styles and components:

    • A

      Add a prefix to style or component

      To prevent Figma from publishing your styles and components, you can add a prefix or modifier to the component's name in the layers panel.

      Figma will skip over these styles and components during the publishing process and list them in the Hidden section of the Assets panel and Library modal.

      • Add a period . in front of the component layer's name.
      • Add an underscore _ to the beginning of the component layer's name.
      Hidden_styles_and_components.png

      Note: If you add a period or underscore after a style or component is published, Figma will remove it from your library the next time you publish changes to the library.

      If you want to publish these styles and components at a later date, you will need to remove the prefix and then publish the components individually.

    • B

      Remove via the assets panel

      Remove a component from a library in the Assets panel. It's not possible to remove a style from a library via the style picker.

      1. Click on the Assets tab in the left sidebar.
      2. Right-click on the component in the list.
      3. Select Hide when publishing from the options.
    • C

      Remove during the publishing process

      Remove styles and components from the library modal from the publish modal.

      1. Open the library modal using any of the entry points above.
      2. Right-click on the component or style and select Hide when publishing.

    Related Videos

    See more