Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

Shared Colors for Design Systems

Now you and your team can use the same shared colors in all of your projects—and keep them updated with no extra work.

Jonas Treub

JT

by Jonas Treub

Jonas Treub

JT

Twitter

Jonas Treub

Product Engineer at Framer.

We recently announced Framer Bridge, which connects your design system to production code. At the heart of many design systems lies a style guide, including a set of standardized colors. To continue our efforts in supporting your design systems, we’re excited to introduce shared colors.

This release allows you to add new colors to any project, publish them to your Team Store, and keep them updated, so your style guide is always in sync. This means that anyone on your team can use the same set of colors, so you won’t have to manually copy and paste them every time. When you update a shared color, it will update everywhere on your canvas and for anyone who has your package installed. They’ll also be available in the code editor, so you can reference them in your code components. If this sounds like something that might make life a little easier, we’re excited to share that this is only the beginning. We’re working on more ways to keep design systems in sync, so keep an eye out for updates.

Creating Colors

To allow for shared colors, we’ve updated our color picker. It’s more compact than ever, and now shows your shared colors by default. Click the + icon to create a new shared color, give it a name, and you’re all set. To update your color, simply double click it. You can then use it throughout your projects as a fill, gradient, shadow, stroke, and even in your code components by importing them in Playground.

When creating a new shared color, you may be inclined to name it by its appearance, such as Blue or Cyan for the accent color of your product. Instead, we recommend naming it by describing its function, as in: Accent or Paragraph. Following a semantic naming convention makes it easier to maintain a consistent color scheme when visual changes arise. Whether it’s only updating one color—like changing the accent color to violet—or altering a scheme altogether by switching to a dark theme.

Sharing Workflow

Once you’ve settled on your color scheme, you can publish them to the Store. To do this, navigate to the Store, click Publish, and fill in the metadata of your package. You can update this package at any time, and everyone that has your package installed will be able to update within their designs with a single click.

You’ll find a few links to learn more below. Feel free to reach out on Twitter or join our Spectrum Community if you have any questions, and let us know what you think.

  • App Docs
  • API Docs
  • Updates

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.

Visual

Guides

Understanding Interactions and Events in Framer

April 7, 2021

Visual

Customers

Messenger De-risks Engineering Investment Through Prototypes

March 16, 2021

Visual

Guides

Creating Unique Scrolling Interactions

February 24, 2021

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement