Being a junior designer can be intimidating, and it’s easy to get lost among the numerous guidelines (often conflicting!), and other things you should absolutely know. Well, I’m here to break the news: it shouldn’t be as difficult as it sometimes seems. In this article, I will cover some very basic concepts you should know as an aspiring designer working in Figma — and I will keep it as a mini-series to share some easy and on-point advice to make your design experience run smoothly!

Typography

What is typography anyway, and why is it important? It makes your written language readable and appealing, and yes, it’s one of the most important elements of interface design. Whether you’re trying to convey certain information or even make a statement, typography is a very versatile concept you can use to achieve your design goals. Most contemporary interfaces (at least on the web) are responsive, which means you will need responsive typography. Here is what it means:

• Consistency is key. Avoid using too many typefaces and keep them consistent throughout your work: you want to stick to the general style of your project.
• The user interface should have a consistent set of text styles for a smooth experience. The styles are represented by category, scale, and breakpoint — and you should make sure your text style remains consistent across all of the breakpoints. Namely, if you assign an H1 to the headline, it can’t suddenly become an H2 on a different breakpoint.
• Pay attention to the spacing. Don’t exaggerate with letter spacing in normal texts, but smaller texts, such as labels, should have more space between the letters. Alternatively, you can capitalize these texts to make them readable.

Colors

Colors are important in more ways than just aligning with the brand (although you’ll have to keep note of that, too!). Besides making your product stand out and appeal to the user, colors communicate information, influence people’s perception of the product, and make it memorable. When working with colors, don’t forget that every tiny element of your interface will require attention. Here are a few things to pay attention to:

• Choose your primary color. This should be the main color you’ll be using across the project, but it can have variations in a form of different shades of the same color.
• If you choose to use basic shades, like grey or black, in the background or for the borders, or however you choose to use them — make sure to add a subtle splash of your primary color. Not only it creates a nicer shade that will be pleasantly aligned with the rest of the elements, but it also makes things look more natural!
• Make sure the color contrast is high enough on every screen. You don’t want your colors to change on different devices. Remember, the color is conveying essential information about your product, and you can’t allow it to change based on the devices your users will be using. Pay extra attention to older screens and the ones for people with limited accessibility.
• Keep in mind that colors have strong associations with brands and products, so try to avoid using colors that are similar to the ones your competitors are using.

Icons

Icons are essentially symbols that are reduced in size to their minimum but still keep the essential characteristics. Icons are just as important in communicating with users; they can have different styles and sizes, too. You may need to work with different sizes, so make sure you have enough options; personally, I prefer having every frame in 24px and 16px. Do not just simply scale your icons down — it’s an error many junior designers do — always make sure that the outlines for both, bigger and smaller icons, are the same.

• Always outline the stroke. It’s a pain for developers to work with something that’s just a stroke, and it takes you literally 0.01 seconds to outline your icon. Do this, and watch your happy developers thank you for a millionth time over.
• Using multiple icon styles is fine, as long as you can justify it. For example, you can use filled icons for buttons and outlined ones everywhere else. Whatever you do, make sure you’re not just making random choices — a thought-through project is always best.

Effects

Effects (such as shadows or blurs, to name just a few) are usually used to elevate the element, so you highlight it, or to bring dimensions into the interface and create a hierarchy.

• Once again, don’t be afraid to add colors to your shadows! They aren’t simply grey but are actually tinted by colors around them, as happens in nature, too.
• Adjust the sharpness. Based on the element’s position, the shadow can become sharper or softer. The higher your element is positioned, the softer its shadow will be, and vice versa, if you lower it down, the shadow will become sharp and well-defined.

These are, of course, just the very basics — but your design journey will not take off unless you feel confident with them. Practice the easiest things first, and move to more complex concepts — just always keep learning, as this is crucial for every designer, beginner or not! My advice for the next step would be to learn the components, and I will tackle this topic the next time.

In the meantime, check out these resources (all easy to find and get online) for more design-related content:

Grid Systems in Graphic Design, this book provides a fundamental base for every graphic designer and explains how and why grids are constructed.

Icon Design Guide, this book offers some great advanced insights into an icon design, and it’s highly recommended to those wanting to learn more about the topic.

Screen — Product Design Guidelines, this easy-to-digest guide is suitable for everyone starting on their design journey with its set of clear guidelines and useful suggestions.

The Design of Everyday Things, this book explains why design shouldn’t be complicated, offering important insights into usability and aesthetics.