Sketch Tutorials
The Simplest How-To Guide for Sharing a Design System with Your Team
From zero to hero in 9 lightning-fast steps.
--
Design systems are hotter than your mom right now, so I’m gonna answer the question on everyone’s mind:
Hey Jon, how do I share my fresh design system with my team?
Woah, I’m glad you asked! Tighten your suspenders, because here we go:
1. Download this plugin (direct download, no nonsense)
2. Sign up and Sign in (it’s fast)
3. Go to the “Text” tab and click “Add Type Styles”. Select all and add.
Your design team will be able to use all of these text styles.
4. Go to the “Styles” tab and click “Add Shared Styles”. Select all and add.
Your design team will be able to use all of these shared styles, too.
5. Go to the “Components” tab and start adding symbols.
From the symbols page in your Sketch file, select your component artboards (buttons, inputs, nav bars, etc.) and click “Add Layers” in the plugin window. Give the section a useful name. Here’s a GIF. It’s like 15 seconds long:
If you’re using a system like UX Power Tools that has “helper symbols”, DO NOT select those supporting symbols (like color and text symbols). These will be uploaded automatically! Only upload the final, constructed component symbols.
7. Upload other stuff (logos, icons, and images…if you feel like it).
There are tabs for each of those to keep you organize. You can even upload entire artboards if you want to have predefined page types available for your designers to pick from (grid page, login page, etc).
8. Invite your team.
Get ready to party.
9. Done! Go buy yourself a lightsaber churro.
FAQs
Is it really that fast to set up?
Yes.
My symbols have nested symbols and overrides in the Inspector panel. Can I upload these? Will they work?
You know how Sketch allows you to override nested symbols (like icons) with other symbols that have the exact same dimensions? Brand.ai does this in reverse when it uploads your symbol(s) to the library. It first uploads all of the immediate nested symbols in the component you added, then goes out and uploads ALL of the other symbols that match the dimensions of those nested symbols. Color symbols. Icons. You name it. How rad is that?!
What makes this so cool?
Every other shared design library that exists only looks one level deep when adding components and symbols. Since Brand.ai pulls all override symbols with it, when a designer drags a button onto their artboard, it brings ALL related symbols with it, so they can use the full power of overrides. That fancy button symbol you made will work just the same for your teammates.
So then won’t it keep importing nested symbols every time I add a component to my document from the shared library?
It won’t! The plugin is smart and will check the document to see if they already exist. If they do exist, it won’t import them again. If they don’t, they’ll import those new symbols as expected.
What if I update a component?
If you’re the owner of the library, just add your updated component into the library like we did earlier. It will ask you if you want to create a new symbol, or overwrite the one that already exists.
Will my team see my updates?
Heck yeah, dude! Team members are notified of updates and presented the option to update their file to match the components and styles in the library.
Won’t that overwrite all of the symbol overrides in their document?
Nope! It’ll only update what has been changed. Cool, huh?
Summary
Lightsaber churros are apparently a thing that exists, and shared design systems are awesome and super easy to set up.
