Create, edit, and share colors. These colors can be published to the Store, and can then be used in Frames, text, and more.
To create a new color, select any existing Frame or create a new one with the Frame tool. Then click the
fill property to open the color picker. You can click the empty row or the
+ icon to create your first shared color. You can also use shared colors within gradients, but you can’t create a shared color that consists of two colors yet.
Here, you can set a name and pick your color. We recommend choosing a semantic name that describes the function or purpose of the color rather than its appearance. Enter a name and click
Done to create your first shared color.
To edit a shared color, select its row and click
Edit. Notice that when you select it, the color wheel is hidden to avoid any accidental selections. Once in edit mode, you can rename your shared color and pick a new color entirely. Clicking Done will save your changes, and update it anywhere it’s being used on the canvas.
You can also import your shared colors in code and use them in your code components. For more info on how this works, see our API Docs.
Once you’ve created a set of colors, you can share them with others by publishing them to the Store. as part of a package. To learn more about publishing, see our Store docs. You’ll find shared colors installed from packages in the color picker as well, and you can use them in the same way. By clicking on the dropdown menu, you’ll be able to toggle between your presets and any installed package that contains shared colors. To prevent any accidental local changes, shared colors from packages can only be edited by their author. If you maintain a package of shared colors, updating it will reflect the new colors for everyone, keeping them in sync across multiple projects.