Setting Up a Design System
Design + Sketch App — Medium | Bunin
Learn how to customize and use Sketch best practises as a solid design system that will save you hundreds of hours on the next project.
This is part of Frames for Sketch — tutorial article that will help you to get started with Frames Design System and customize it to match your brand guidelines, as well as helps you to learn something new about sketch features and tricks that you might don’t know.
- Overview — A quick look at the main sections.
- Colors — Learn how to add and use colors.
- Typography — Replacing system fonts.
- Components — Customizing symbols. 🔧
- Summary — Use cases and FAQ.
Frames is a product made by a designer with the idea to implement latest Sketch features into a single UI Library by combining best practices and helpful techniques that can save a lot of time in the long run for anyone familiar with sketch app.
The system is designed to be lightweight and adaptable to brands, that why many teams find it a really useful tool for building their own libraries based on it. 🖖
Frames Master file is divided into 4 main pages that contain lots of pre-made contents: components, styles and pre-designed layouts that can be customized and used for making your own UI Kit or a design system (at your prefer).
- Get Started — This is the starting point for newcomers, here you can adjust your colors, styles, and fonts quickly to match your brand.
- Style Guide — Color scheme, component sheet, icons, mockup and typeface styles all together serve you as the single source of truth for your project.
- Web UI Kit — Collection of pre-designed layouts built with system components that can be freely customized and used for rapid prototyping.
- Symbols — All are grouped by categories and sorted according to the symbol’s type (Colors, Buttons, Inputs etc, we will cover all groups just a bit further).
Yep, that 4 pages are making a perfect playground to quickly design apps and website, that saves me tons of hours as a designer. But now let’s move to the Get Started page to begin preparing our system to match the basics of our Brand.
Frames by default contains 10 colors that can be changed globally across the document, you only need to select Fill layers and overwrite them with new propretirs, then apply the changes, and voila everything is synced and new color is now available for all components that have Color attribute in the overrides menu!
Note: You can use gradients globally as well, just convert their layers to symbols and set new symbols size to 100x100.
To add more colors go to the Symbols page and simply copy any color artboard Copy/Paste it and assign a new color for it. ✂️
New born system elements even if they are just colors should follow a naming structure so the element fit the correct group, think about it as a path to describe your systems folder structure, so be sure to make the changes. For example, Color / Orange makes possible to find it in overrides of every other system element that have Color properties.
NOTE: the Fill style is used through the whole system and applied to all components as a Color attribute, this also includes Border style Shapes.
(Such as buttons, alerts, badges or tags).
Frames by default is using a simple font combination Roboto+Muli organized from H1 to H5 headers, a simple font combination can always help you to build eye catching typography for your project or just dribbble shot. So you can freely customize both the fonts or remove one of them if you need to.
Typography system is built into shared styles with a simple structure:
*H1 / Font Name / Alignment / Color
To change the current font system simply overwrite default text layers with new setting and spread changes across the land of Frames. (But doing so, don’t forget to overwrite old font name from shared text styles menu when you change it). By making this you can easily apply new text properties to all UI Kit layouts.
NOTE: Components such as buttons contain text symbols that will not be overwritten by any changes here, we will cover on how to customize them in the next section.
Now lets add some new fonts to the system so they follow our structure with this simple steps:
1. Select or Duplicate all layers of any font — make any changes you need, and don’t overwrite the shared styles for now.
2. Using the Rename It plugin activate “find and replace” command on the selected layers and replace default font name in the naming structure with the new one. (Example: from H1 / Roboto.. to H1 / Arial..)
3. And just generate new styles from selected text layers, to do so just use the Style Generator plugin and press “generate shared styles”, and it’s done, the new font is ready.
After you have finished with customization you can save current fonts styles as a template to quickly import them to every new project using Shared Style Plugin, it will save huge amount of time, learn more on how to master text in this article. 👇
Building blocks of the system are responsive components that are made using symbols sharing single systematic approach, to follow a Path structure and form logical groups. All symbols are divided into categories by design.
Most of the symbols are built using other symbols, when symbol is nested inside other symbol it will represent attribute of visul style that can be quickly adjusted using the overrides menu. (Such as Color, State, Shape or Device.)
Now let’s take a closer look at symbols groups to learn how we can customize them in order to scale.
Simplest and one of most useful symbols — just a block that stores a single Fill color. (width x height = 100px x 100px)
Tip: Use a 50% opacity white color to make your elements such as icons look transparent.
Text symbols are used for Buttons, Inputs and text areas, in order to change them simply overwrite the default values of text layers and changes will sync with parent element.
Tip: Use Adjust content on resizing option to fit symbols container width when overwriting defaults.
Buttons are sorted by size, and are available in the following variations: Basic, Icon on the Right, Icon on the Left, Tab and Text Button. You can also find the Flexible button type with the icon that always stays closely attached to one of the texts sides, this buttons are pretty tricky and made using this technique.
To change a button appearance you need to change the Shape attribute that contains State and Color properties, here an example of how many variations of a single button you may achieve overriding this attributes using default propreties.
The input fields can either be descriptive (with an additional label/caption) or just have a basic rectangle-like look. To customize Inputs visuals use State symbol, just overwrite any state layer style to apply your changes.
By changing Inputs State attribute you will be able to quickly switch between Basic and Material look.
Shape symbols represent the form an elemen such as Buttons, Badges, Tags and notifications — each shape can be either Fill or Border styled, the Fill color attribute applied to both of them.
Note: Shape symbols can be easily customized by changing Container layer radius properties. Border style shapes are made using outlining with subtract properties, so be sure to change both merged layers radius.
State symbols are used to describe an element interactions and transformations such as Hover, Active or Disabled states for buttons or inputs, using them you can manipulate to fit your elements into current interface situation.
To update Button or Input states you just need to update layers style. You can also add additional effects to the symbols, for example — you can add shadow symbol to any hover state to make it look floating.
Data is a place for second priority UI elements that serve to provide the user with important information and describe current interface situation with the help of positive, negative or warning feedback.
And yes, this is a JoJo reference. 🙃
All Icons are based on a 24px grid, have very material-like style and carry Color attribute that always matches your color shceme, so whenever you see an Icon element inside a button or input — know that you can easily swap it with any other icon from the list or change it color.
Most frequently used icons are made in two styles: Fill and Stroke.
Mockups are used to present your visual content like photos, nice background and device screens, you can change the appearance of mock up by changing the Device attribute.
Using Screen options you can add overlays to obscure your image with black-to-white gradient or put FIll attribute as a tint to increase text readability above the images.
Frames includes mockups of iPhone 7, Macbook and iPad Air made with the help of facebok design free resources.
You can add your own mockups as and PNG layer to a symbol and set the right proportions for the Screen symbol to match devices picture, learn more on how to use mockups here and dont forget to grab freebie file. 👇
After you configure the basic styles and bring the components to the desired view, you can have a fully charged design system at your service that is ready to be plugged into any project. You can additionally save file as a template to always have Frames by the hand.
Psst. You do not need to customize everything to get started, setting up your brand colors is pretty enough to start designing great looking products.
Using Frames is rewarding and gives you an ability to change your design on the fly by overwriting symbols, Okay, yeah — we got it. But what are real use cases this system is good at?
- Prototyping, even if the deadline is coming in 10 minutes you can quickly build a website page or style guide for you client.
- Build a brand UI kit, use pre-made style to overwrite them with yours and test your visual ideas by building your own design language.
- Wireframing, using premade content you can easily build wireframes and discuss your ideas before moving to final asset design.
- Learn something new, become more expert with Sketch and stay up to date to latest features and techniques that can save you day.
- Sync, if you are working on a project with your colleagues use Frames to collaborate and design with the same building blocks that are synchronized.
Just do more in less time 🏃🏻.
How to get the latest version?
We send email notifications via Gumroad and tweet when the new version is released so be sure to follow us, and if you already bought Frames just go to the Product page and download the new version.
Want suggest a feature or need more help?
Cool! Feel free to reach us and discuss it via email@example.com.
Are you planning to make Adobe or Figma versions?
Maybe in future, until this tools provide the same flexibility as Sketch does.
What differs your product from other design system?
Frames is built into system through tons of changes due to constant Sketch updates and a product design experience, now any one who masters it will be granted with an ability to generate and scale design systems for a mid/large client really fast.
I haven’t tried any other system on the market, but I believe the world is a big place and there are pretty many designers just like me. 😁
Before you leave
- Find more Frames related resources on Sketch App Sources.
- Help us spread the word about Frames for Sketch and get 25% off. Just email us / tweet us / DM us the link to your post and we’ll get back to you as soon as possible.
- Follow @buninux for more updates, freebies and articles.