How to build sturdy foundations for your product’s design

With a mix of developers and designers collaborating on your digital product over time, it can get messy. So, how do you keep your design consistent? Let's start with the foundations.

‍

Your digital product is growing, but keeping it consistent is only getting harder; different designers are jumping in and you’re building new features on top. With no real consistency, you are starting to lose the brand identity and the UX is getting increasingly fuzzy.

If this sounds familiar, it’s time to bring some structure to your digital product. It’s time to work on your foundations.

Foundations are the fundamental visual elements and principles that guide how you create interfaces. They include all design decisions from iconography and typography to layout and color scheme.

Creating well-structured foundations for your product’s identity goes beyond just choosing colors and typographic styles. Foundations are about codifying and documenting your design so the whole product team can use them.

Think of these foundations as the rules designers and developers can use to build a component library. And with a component library, you can develop a robust design system that keeps your product consistent. 

So, yes – building strong foundations is a little bit important!

‍

Belka's construction manual

First, there’s more than one way to build foundations. Your current design system, product complexity, team size, and assets are all unique to you. However, it doesn’t need to be complex! 

We're here to share Belka’s method on how to build effective foundations – as well as a Figma template you can use to build your own customized foundations. 

Let’s start.

‍

Step 1: Organize the elements

You probably already have a basic collection of visual elements that guide your interface design. This might include a simple color palette, a font family, and perhaps a handful of icons. It’s a good starting point. 

Your next step is to collect everything you’ve used in your product’s interface – like doing an audit (see our article on this) – along with any additional requirements from other departments (often marketing and engineering) that should be integrated in the foundations.

This will create a list of elements that must be codified for the design system to be scalable across the product. 

For example, your list might include:

• Graphic assets required by the marketing department
• A spacing and sizing system that works for the development team
• Revised versions of the brand guidelines 

These are the elements for building your foundation.

‍

Step 2: Codify your decisions

It’s now time to create the foundations in Figma.

To help you get started, we’ve created a Foundations template. This is just one of the many possible ways to structure your foundations in a file – adapt it to your team’s needs! 

Our Foundation template contains a page for each of our elements, including colors, typography, border radius, and spacing. Each page documents every decision made and makes it easy to see what is missing.

Here’s a practical example. When dealing with typography, you’ll probably start with incomplete typography guidelines that use an inconsistent naming convention. It might look something like this:

‍

‍

The problem here is that you aren’t applying your font family to the interface consistently. To fix this, you can start by expanding your typographic system to cover the entire product and be coherent with the engineering team – let’s say they use Tailwind with its t-shirt sizing approach to typography. 

With Tailwind, all your typographic styles are named in sizes like xl or sm. When you build foundations, you should use the same naming convention on Figma too. This keeps everything clear and consistent between the Figma files and code.

After adopting Tailwind’s structure and naming convention to update the typography foundations on Figma, it should look something like this:

‍

‍

By expanding all foundation elements, you’ll have a comprehensive and documented visual language for the whole team to use, right?

Well, not quite. There’s one more step. 

‍

Step 3: Communicate through tokens

The final step will actually make your foundations a common language for the whole team: we have to translate the foundation elements into tokens. 

Tokens are simply variables in design systems that store design decisions like colors, typography, and spacing. By using tokens, designers and developers can keep everything consistent across interfaces and easily update design elements globally. Any changes to a token are automatically reflected everywhere it's used.

Expressing foundations through tokens helps your team further codify design decisions. This can be done with different tools. In our template, we used Figma variables.

Once your tokens are in place, everyone in the product team will have a common language to refer to during interface-related conversations. 

‍

Foundations complete!

By listing your requirements, codifying your design decisions, and communicating through tokens, you are on your way to creating a robust, consistent and scalable design system. Good job!

Now you are ready to get your hands dirty with our Figma template and start building your customized foundations.

‍

∗ ∗ ∗

‍

Want more insights?

• A design system to build design systems
• What’s the recipe for a successful handoff?
• Let’s talk about design system audits

‍

Want a safe pair of hands to help with your own design system?

Check Design System Audit, our service to make sure your design system brings you results.