From Chaos to Consistency - Figma Styles for Designers and Developers

I know you do not want to read another article telling you why you should create and use styles in your Figma design files or projects, but fortunately this is another one & I will really try to convince you dear digital designer on why you should do just that.

A lot of people are saying this is a good time to be a product designer or an interface & experience designer... which no doubt i think it is, designers are being respected, considered and given responsibilities and ownership in the product development process. They are seen as an essential part. And if one is seen as an essential part, it's only right one rises up & lives up to that responsibility. And that could mean seeing a project or product through to production, owning that process of communicating ideas to stakeholders, making sure design files matches production code and ensuring other stakeholders especially engineers have a smooth experience implementing your designs.

A lot of times I have gone through Figma design files where styles (texts, colours, effects...) are not used in the projects and in trying to collaborate with other designers I just get lost on where to start. Because of the lack of visual style there could be no one way to maintain consistency in the UI elements and that affects reusability and if you want to get too deep in component driven development for your engineers.

Let's say I want to make a heading for a section, what typeface, font-size, font-weight should I use? Because it isn't defined in that file, I'll either have to create mine or have to go through the file finding out what this designer used as heading in their sections and continue with that.

For small projects, i.e. projects with less than 20 screens it wouldn't affect the process but as your project scales or other designers join in, it really can make or break that project with the presence or absence of a defined visual style.

Some time back, I went through a design file I was to collaborate on regarding a certain project and in trying to get acquainted with the project and the workflow of the other designer I was going to collaborate with, I found out there was no visual styles (text, colours, effect) used in this file in a project of over 80 screens!

Moreover, to my dismay there were also over 9 different typefaces or typeface family existent in this file not talking of the varying font sizes and weights used in the project design files.
My initial thoughts were this must be quite some work, on really the side of the designer but also on the side of the engineers or developers who were going to implement these designs.

I can not imagine myself designing like that. In over 80 screens, a process like that needs you to probably memorise all the styles or just be too inconsistent with the variations which I am too lazy & too neat for!

Imagine the scenes of me always searching for & choosing the typeface "Inter" with a font size of "18px," weight of "bold," a line height of "24" and having to repeatedly do that for 9 other typeface families x number of times?
Or having to always input the hex codes of different colours again x number of times.
Or having to repeatedly create a certain shadow or blur effect x number of times?
Yea, that's a lot of work! A sh*t ton of work honestly.

Text styles creation repetition

And not only is that a lot of work that takes time, but it is also a bad practice to follow. First, designers are not designing for themselves and someone has to go through those designs at the end of the day to implement in code and make them functional. And a practice like that does not only make things hard on your part as a designer but it also makes it excruciating on the developer's part.

That's why Figma created styles to begin with. Now someone might ask, what are these STYLES you have just been going on about?

What is or are Figma styles?

According to Figma, Styles are reusable collections of properties which you can easily apply to elements in your designs.

Tanzir Rahman in his blog for Log Rockets also defined Styles in Figma as custom properties for objects that can be saved and reused from a dropdown on the object properties panel on the right-hand side. Styles can be defined for fonts, colours, and effects like shadows, blurs, and even grids.

Steph Ango, CEO of Obsidian in one of his writings said a Style is a set of constraints that you stick to.

And in that perspective of sticking to something, styles let you reuse UI objects so you can maintain design at scale. Designers or other stakeholders in leadership mostly control the creation of styles, no doubt! Though, that's dependent on the team, ecosystem or culture you'd find yourself in.

In a Software Design & Development agency or a team that renders digital solutions services or creates digital products, styles for projects are determined by the clients style guide if existing or created anew for that specific or unique product that's being worked on. (A digital product here can be a website, a mobile application, a web application or another customised software built for a certain purpose. )

Why is creating styles necessary in your Figma files as a designer?

Creating a visual style is important for consistency, efficiency, collaboration, reusability, scalability, branding, maintenance, flexibility and reducing errors.

• Consistency: A defined visual style ensures that all elements of a project adhere to a consistent look and feel. This consistency is crucial for creating a professional and visually appealing user experience.
• Efficiency: A visual style guide streamlines the design and development process. Designers and developers can refer to the style guide for guidelines on typography, colours, spacing, and other design elements, saving time and effort.
• Collaboration: A visual style guide serves as a common reference point for designers and developers, fostering better collaboration. It helps bridge the gap between design and development teams by providing a shared understanding of the project's aesthetics.
• Reusability: Components and design elements created in accordance with a visual style guide can be easily reused throughout the project. This reusability accelerates development and reduces redundancy.
• Scalability: A well-defined visual style makes it easier to scale the project. As new features or pages are added, designers and developers can ensure that they align with the existing design language, maintaining a cohesive user experience.
• User Experience: A thoughtfully designed visual style contributes to a positive user experience. It enhances usability, readability, and overall user satisfaction by providing a familiar and user-friendly interface.
• Branding: For businesses and organisations, a consistent visual style is essential for brand recognition. It helps reinforce brand identity and ensures that all communication materials, including the website or app, align with the brand's image.
• Maintenance: Projects with a clear visual style are easier to maintain and update. When design changes are needed, the style guide serves as a reference for making consistent adjustments across the entire project.
• Flexibility: A visual style guide can include rules for different use cases, such as responsive design for various screen sizes and devices. This flexibility ensures that the design looks great across a range of contexts.
• Reducing Errors: Having a visual style guide reduces the likelihood of design and development errors, as it provides clear guidelines and standards to follow.

Takeaway

Creating styles in Figma as a designer goes a long way than just maintaining consistency, it saves you time introducing reusability and the power to update from one source of truth in your design files. It impacts how you collaborate with other stakeholders and how that project is built and maintained over time.
Your styles created makes things easy for you, other designers you collaborate with or that may work on that design file after you and developers or engineers.

Styles in Figma are implemented by developers in a theming or a config file depending on the technology that developer is using, it makes it easy for developers to just reference when they are writing codes.

Building software is about continuation or iteration which you already know, so try to make things simple for the person that has to collaborate or take over you as a designer or the engineer who will be working close to you to implement your designs.