TEXT STYLES IN FIGMA ANDROID
TEXT STYLES IN FIGMA SERIES

Choosing no more than two families will help you to maintain consistency across Design System. One may be used for headings, the second font for other text styles. I would like to encourage you to start with only one and, if needed, expand to a maximum of 2 font families. There is always a temptation to put multiple typefaces in UI Library. How many Font Families for Design System? With these tactics, you will solve common design issues with ease.

Join now, get the free chapter of my eBook and 10 additional design tips right to your inbox within the next 10 days. Look at the other apps – the majority of them use brand-related fonts.Ģ0 200+ designers are already receiving tips from the newsletter (no spam! Only design tips, tutorials + my design resources news).

TEXT STYLES IN FIGMA ANDROID

If you design for mobile, the first choice may be the system-related font of Android or iOS. You should also pay attention to the number of weights/styles, so your UI Library will be flexible enough.

When searching for a good typeface, you have to remember that the font has to support a specific language. If not, take your time to find the best one for a specific product. If your project already has fonts that may be used in the Design System, include them in UI Library. Picking the typeface is the key to building the brand awareness and personality of the app. However, there may be some utility styles related to specific components like buttons, actions, etc. I usually set the whole typography scale with the based visual style of text content: H1, H2, H3… H6, Subtile, Body, Caption, and Overline. I mentioned the strategy in the article for Design System Colors Keep in mind that the part with colors should be named with the same naming convention as Layer Styles & Color Variables. The naming convention in Sketch will be following: You have to define the color & alignment of a specific style inside. When you use Sketch, creating Text Styles is a bit more complex, and you have to create much more of them. Text Styles in this design tool require defining only typeface, size & some additional parameters. If you use Figma, things are pretty simple. Thanks to this text, styles are ordered from the biggest one (for example 01 Heading 1), to the smallest text style (12 Overline) The key tactic I use to define the naming convention is numeric order. Prepare names of your text styles for specific projects and platforms.

TEXT STYLES IN FIGMA SERIES

This is the series of articles helping you to create your own Design System UI Library, previous parts:Ī well-designed naming convention is a key to efficient UI Design based on the Design System. This time let’s focus on putting text styles into your Design System!

You might have a chance to learn about colors from a previous article. Have you ever thought that over 90% of UI Design is about Typography? There are two things certain in design, colors & typography.

Text styles in figma