Shared Colors for Design Systems

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