Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
Design + Sketch App — Medium | Christopher Deane 
Getting ourselves ready to create a free design system called Dezin.
About this series
What is it?
I’ve been creating and using design systems for over 5 years and you can read about that journey here:
5 years of Design Systems. A personal journey into scalable design
It’s time to take everything I’ve learnt over this time and create Dezin with a series of video tutorials that will teach you how to master Sketch and learn how to create your own design systems along the way.
A practical approach
I’ll keep things practical and won’t weigh you down with a lot of documentation before anything even exists. The principles and guidelines will be informed and formed as we go.
About me
I’m a Dad and when I’m not at work I’m all about my wife and daughter. When they’re asleep, I’ll be working on Dezin and should get a tutorial out once a week.
When you consider the nature of design systems it’s going to keep growing and continue to be refined over the months that follow. If you stick with it and stay for the long run, it’ll be very rewarding… so let’s prepare 😃.
Preparation
If you Google “Quotes about preparation” you’ll get a few indirect results before finding this gem:
Give me six hours to chop down a tree and I will spend the first four sharpening the axe.
– Abraham Lincoln
To set ourselves up for success we’ll talk about discipline and the software, plugins and services you’ll need for this series.
Discipline
The most valuable thing you’ll learn in this series is discipline. Building an entire design system inside Sketch that has hundreds if not thousands of individual elements, is robust, clean, easy to use and brings a new level of efficiency to your company or project is a big challenge.
The ability to follow a workflow and each step in its process will turn your team into a design symphony where anyone can be the conductor.
There is intent behind everything we’ll do. From workflow, naming conventions, folder and layer structure, to colors, shared styles and symbols; When it all comes together you’ll become a more efficient and purposeful designer.
Sketch
Dezin will live inside the most popular design tool, Sketch. If you’re not already using it, do yourself a favor and buy a license for it. It’s helped renew my love for design, given Photoshop back it’s day job of being a photo editor and became my go-to app for illustration.
Sketch Libraries
We’ll harness the power of Sketch’s Libraries feature, make a set of external libraries you can daisy-chain to use in a new project and have all of the linked libraries symbols ready to go.
You can read more about this approach here:
Sketch Library Inception for Projects and Design Systems
Open Sketch, then…
Customize your toolbar
Take the tools and actions you use more often and place them in your toolbar by right clicking or control clicking on your toolbar, selecting Customize Toolbar and dragging items to it or from it. The one I use the most is the symbol icon, it becomes a great way to place symbols and build layouts from one place.
I turned this
The default Sketch Toolbar.
Into this
Where I can now add a Symbol, Styled Text or Create Symbol. Easily place a Rectangle, Oval, Line, use the Pen Tool, add Text, a Slice or an Artboard and edit paths with the Scissors.
We’ll rely on these less as we move through this tutorial series and start learning some new keyboard shortcuts. Speaking of which…
Customize your keyboard shortcuts
If you want to override Sketch’s keyboard shortcuts with your own, follow these steps:
- Open the System Preferences app
- Select Keyboard
- Select Shortcuts
- Select App shortcuts
- Click the + icon
- In the drop down menu select Sketch.app, enter the exact name of the menu item you want to make into a shortcut then in the last field press the keys you’d like for the shortcut
- Select Apply
You’ll now be able to use the shortcuts that make you more efficient. I turned the existing ones that move a layer forward or backward and show your grid and guides into the ones I had used in Photoshop for many years.
Plugins
The Sketch community has spent years giving us more functionality with plugins. We’ll install a few that will help us achieve those out of the box tasks and save time.
Sketch Runner
Run menu commands, jump to pages and artboards, insert and create symbols and shared styles and install plugins. Once installed we’ll use it to install all the plugins in this list.
Auto Layout
We’ll use Auto Layout by Anima, the original plugin solution for Sketch that creates responsive layouts and pinned nested symbol setups when Sketch’s own resizing options aren’t enough for our requirements.
Nudge
We can now override nudge settings to match our 8px grid.
Renameit
Rename multiple layers at once. This one is a massive time saver.
Rename It – Sketch plugin that batch renames layers and a lot more.
Color Contrast Analyzer
Check the contrast of two layers, great for accessibility.
getflourish/Sketch-Color-Contrast-Analyser
Sketch Palettes
Once you’ve got all of your brand colors ready, export and distribute them to your team.
andrewfiorillo/sketch-palettes
Versioning
We’ll be using Abstract to host the master Sketch files. It acts like Github for designers. Their free account is all you’ll need to manage your own design system.
Secure version control and design workflow management
This is an optional step but if you’re working with multiple designers I’d suggest you use it. It will allow you to quality check new commits to the design system and keep the master Sketch file clean of duplicate symbols and shared styles.
Sign up for an account, download the desktop app and get ready to create your first project so you’re ready for when I finish the next part of this series.
Congratulations!
You’re ready for the rest of the series where I’ll be adding new parts every 1–2 weeks:
For updates:
Follow me here at Medium, Twitter and YouTube.
Design Systems: Preparation – software, services and plugins. was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.
