- Creating with a Design System in Sketch: Part Two [Tutorial]
- Originally written by Marc Andrew
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: Zheng7426
- Proofread by PMwangyang
Create and play with a Sketch design system
🎁 Want to use my excellent design system for Sketch to dramatically improve your workflow? You can start yourhereGet a Cabana.
Enter the promo code MEDIUM25 to get 25% off.
In this comprehensive series of tutorials I will give you valuable insight into how to build your own design architecture (and how I built my own architecture), and then put all of these elements together and put them into practice when building a design for an App called Format (a Medium web style).
Contents of this tutorial series
- The first part
- The second speak
- The third part
- The fourth part
- The fifth part
- The sixth part
- The seventh part
- The eighth part
- The ninth part
Character design
Hey hey. Next, let’s talk about the text design of the design system (text style). For better teaching purposes, the text style in the Novice package (which we will get to when we start designing the iOS App) is a simplified version of the text style I used in Cabana.
The most time-consuming element of the Cabana design process was the text design. Creating text styles is a chore, but I can see the benefits when I start putting them into practice. In any case, it’s not easy to integrate them all.
As I mentioned earlier, IN this series OF tutorials I’ve covered only four color styles after the text style has been simplified:
- black
- grey
- white
- Primary colors
Of course, as I mentioned in the first lecture, if you want to create a very full design system, you can create text styles with the following color options:
- black
- grey
- Light grey
- white
- Primary colors
- red
- green
- … Or any other color to use as your base color
The above is the choice I made for my design system, in fact, is not much different from the choice I created before the background color.
Why so much trouble?
The other day someone asked me why I had to create so many different Font weights and Font sizes for two Font families (Font Family 1 and Font Family 2) — wasn’t that just asking for trouble?
I’ve seen design systems that can build a family of fonts just for a heading, then another family of fonts for a content body, and another for guidance…
Personally, I think this is the real trouble, and it’s easy to go wrong in the process.
Going back to my way of doing it, it’s actually more tiring (did it take a lot of time?) during the creation phase of the entire design architecture. . However, once you have all the different weights and font sizes of the two font families at your fingertips, it’s easy to say “I only used Proxima Nova throughout this project, and I have H1, H2, Body and Lead and all the other content categories. Instead of finding out halfway through the project that there was no Body in my first font family and no H1 in font number 2, and then having to go back and perfect the existing system, it was a touch of sadness!”
Why is my text design option named so strangely?
Someone else mentioned why my text design options are called…
- Font Family #1
- Font Family #2
Similarly, I have seen design systems that use the original name of the font family directly to mark the style of the text, such as — Lato, Open Sans, Proxima Nova, etc…
You should then see the following screen:
H1 > Proxima Nova > Left > Black
For the record, I’m not totally against it, but if you can get used to it, you’re great. However, I personally think that if you decide to switch from Proxima Nova to Helvetica, for example, this becomes another factor that slows the whole process down. While the Sketch plugin can do that when you want to switch to different text styles, why bother when you can avoid the hassle, right?
If you’re used to family font point 1 for headlines 90% of the time, and family font point 2 for content bodies, introductory paragraphs, etc… So it looks like it’s an old habit of yours, so… If you decide to switch font from Proxima Nova to Comic Sans and have to change the name of the text style, don’t get mad at the plugin.
First look here, my friend!
If you still want to learn more about how I build elements of text design into my design system, you can read my previous posts (skip right to text design) and come back here when you’re done.
Have you finished reading this article?” Cool! We’re on the same beat now! It’s steady!
Just as I did with the base color elements in lecture 1, after I finished debugging the two font families, I assigned them corresponding titles (font family #1 (black), font family #2 (gray), etc.). Then put them together and lock them.
I did a similar thing with font family 1 and font family 2 (white), I set the background to black for a strong contrast and locked it as well. Now I can simply select this section and drag the cursor to select a large block of text…
… Use Inspector to update fonts. Don’t accidentally change the title or drag the background layer onto the screen.
Does it hurt when you do this 20 times?
Hopefully, with the help of this extensive article and the excellent article mentioned earlier, you now have a more professional idea for creating the best text design in your own design system.
Well, that’s the end of the second tutorial in this series. Please continue reading lecture 3, in which I will mention Symbols used in the design system and more, as well as some practical and wonderful tips and tips, and how I can incorporate them into my design system. To get to part three, click here…
🎁 Want to use my excellent design system for Sketch to dramatically improve your workflow? You can start yourhereMake a copy of Cabana.
Enter the promo code MEDIUM25 to get 25% off.
Thanks for reading this article
Marc
Designers, authors, fathers, and a fan or two of weird gradients
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.