Three Attitudes that Lead to Maintainable Design — Sketch
1 — Symbols
DRY Principle (Don’t Repeat Yourself) — Designer waste a lot of time in managing their design files, even more than time took to design it. Even though this is a programming principle it’s also applicable to the designer who wants to maintain their design file.
When working with complex documents, sending Symbol masters to the Symbols Page provides you with an overview and helps you stay organized.
Investing in some time at the beginning could save a LOT in later stages.
Using symbols in design workflow also helps a great deal to developers creating the reusable component. Especially while using as component based front-end library such as react, vue JS etc..
NAMING
If you include a slash (/) in your Symbol’s name, Sketch will treat these as group separators.
I try to differentiate the symbol’s function and state. In above example to save emoji keyboard.
- Function → Keyboard;
- State → Dark
- Sub-State → Emoji
ORGANISING SYMBOLS
One major problem that arise while using symbols is organizing the symbols page. Thanks, Jason Burns Developer of the Symbol Organiser plugin this problem is easily solved.
PS: Make sure you have properly named your symbol. This plugin organizes the symbols based on the naming structure of the symbols.
NESTED SYMBOL OVERRIDES
This is hands down one of the coolest features in the sketch. It will help you keep your file organized and will save you a lot of time in the long run.
This feature also force the designer to manage their assets better by naming and sizing it properly.
To know about best practices for nested symbol read Lloyd Humphreys article.
2 — Baseline Grids
This is probably most underrated feature on the sketch.
The baseline grid is a technique used to better your web-based typography. Essentially, it aligns all your text to a vertical grid where the bottom of each letter is positioned on the grid, just like writing on lined paper. The end result is a body of text perfectly organized, with a subconscious recognition of balance and congruity.
The first and most important step is to ensure the core structure for your documents grid. You can define the grid values by navigating View →Canvas →Grid Settings
Screen sizes, expectations, and interactions are constantly evolving, but there are two things that remain constant: Text on screens and scrolling. Baseline grids help make both of these things more aesthetically pleasing and might get you thinking a little harder about the value of vertical rhythm.
The Google Material design team does a great job defining the method of how this baseline affects the values of other type elements of the core UI.
Read the article by Anthony Collurafici which describe 8pt baseline grid workflow.
3 — Creating shared styles
Shared styles lay down the rules for the rest of your designs. With styles, we’ll set the primary colors of the brand, set the typographic rules, as well as set basic rules for buttons, links, etc.
As the project grows bigger and bigger we want to make sure styles we used in project same across everywhere in the project. We also need to ensure we can make changes to this style easily, which then reflect everywhere in the project file. For example, if were to change primary color of design it should be reflected everywhere in the project.
Creating shared style also help your fellow developer, as he will able reuse the shared style code everywhere in the project.
In order to ensure this, we should be able to zoom out of the design and identify the shared styles which we are going to be used across the project it may my color schemes, fonts, symbols etc.. It’s good practice to start creating shared styles at the early stages of the project. This makes sure we won’t have to restructure whole project file because it has become hard to maintain the sketch file.
FONT STYLES
Font is by far one of the hardest things to maintain in sketch file. One hack is to use craft plugin to create shared styles font.
When you sync style using craft plugin. It will create a page with all font styles you used in a project which includes the font with different styles and color. Start maintaining fonts at the early stage or else if you start syncing the styles at later stages of your project you will end up having 20–30 font styles.
When you have some direction regarding which font you want to use start syncing your font styles.
Make sure you start defining font styles for difference cases in document such as Primary text , Secondary text , Headline, Sub-Headline etc…
By maintaining your fonts styles like this ensure that if have to change your font color or font style later in the project you just have to make the change in font style page which craft created for you. This will change the font in rest of document.
COLOR PALETTE
The chance you have to iterate over the color in document always have high. You don’t have to be that guy who designed 78 screens. After feedback from you’re told to change primary color and you will be like sh*t you need to update all 78 screens.
Using craft plugin we can are able to create the color palette of all the color you used in the document. So to update all 78 screens color just update the color in the craft color palette, it will go ahead and change color in throughout your document.
Craft also helps to maintain the number of colors which is been used throughout the application. I am talking about those people who have 50 shades of gray in their document.
Conclusion
- Invest time in maintaining your sketch file from start.
- Follow DRY(Don’t Repeat Yourself) principle in your document.
- Make the life developer little easier by creating and maintaining a style guide.
This practice requires time. So give yourself time to adapt to this practice. It will help you to improve your workflow at later stages in the design process.
Have questions? Comments? Corrections? Want to get in contact? Feel free to shoot me a tweet.