The Drum Awards for Marketing - Extended Deadline

-d -h -min -sec

Engineering Digital Agency Product Design

How Tailwind streamlines Product Design and Engineering

Mediablaze

|

Open Mic article

This content is produced by a publishing partner of Open Mic.

Open Mic is the self-publishing platform for the marketing industry, allowing members to publish news, opinion and insights on thedrum.com.

Find out more

July 7, 2021 | 5 min read

The more we can remove inefficiencies in our processes, the more opportunity we have to spend time on the things that really matter

In the Mediablaze product team, we continually work to improve our processes and deliver better products for our clients. It means we don’t consider Product Design and Product Engineering as two separate teams; we are a single team working towards the same goals, with the same end user stories in mind.

This approach is exemplified in how we use Tailwind to make product design and engineering processes more streamlined…

Highlighting the problem

Ensuring that the developers’ build matches the design output often leads to inefficient use of time. Even when the design is pixel perfect, it can still be laborious to set up the spacing variables, text styles, colours and shadow properties. The design team has already spent countless hours perfecting this so why is another member of the team doing the same thing but in code?

We began exploring this further and looking at possible solutions…

Making better use of existing tools

Figma, as a cloud-based tool, has APIs that enable developers to create custom plugins that wouldn’t be possible with other applications. This usually means that there are ways of integrating the app with other platforms. We began looking at the automation of Figma Design Tokens, which allows a design system to remain in sync with development.

The traditional design-to-developer scenario demands that the designer communicates any changes to the Token to the developer, to ensure they make the change in the code. This can become tedious and time consuming, but there are ways to automate the updating of these to keep development and design in sync.

One answer is blowing in the Tailwind

In our exploration into automating Design Tokens, we discovered Tailwind. Tailwind is known as a Utility First CSS framework. A utility-first CSS framework is a CSS library made up of very small, specific CSS statements that perform one function only. Similar to the “composition over inheritance” pattern that we’ve seen become more popular due to frameworks like React, the industry as a whole has seen a shift away from ‘semantic naming’ in CSS, toward a more functional, compositional approach.

Using these rules, naming conventions and a plugin for Figma - which gets some of the up-front work started - we can generate the beginnings of a Tailwind config file. This config file is used to define the classes which the developers reference in the code.

This loads some more time up-front in the design process, but it does improve development, removing a lot of the initial setup as well as reducing the need for consistency between design and development.

We put this to the test to see how it would work in a real-life scenario…

Test driving Tailwind

We began by creating a test file in Figma. The team found a powerful Tailwind CSS UI kit file within the Figma community, created by Florentin Eckl. We were able to use this to test the process from design to development, thereby reducing set-up time.

The kit included existing text styles using the Tailwind syntax for the text style names, defined colours for the default Tailwind values, and spacers using Tailwind’s default 4px increments. This gave the team a strong system on which to build and test a basic layout.

Figma has a helpful feature called Auto Layout. This feature allows designers to quickly create very flexible and scalable layouts. This improves productivity and makes it easy to add another row into a form field or a new tab in a card — just pop it into place and everything else shifts for you, maintaining the spacing rules you’ve defined.

We used the Tailwind spacers as part of our design workflow using Auto Layout. This allowed us to create flexible layouts using the Tailwind classes as the spacing properties, maintaining consistency and making it easy for any designer to pick up.

We created two very simple three card modules, with a simple background variant using the Tailwind library. This enabled us to test the use of the design system in nested components.
We then used the Figma Tailwind CSS plugin to generate a base Tailwind Config file for development. When we ran the plugin, it asked to check and define the following;

- The naming and values for the colours that we had defined in the system

- The font families used, and selecting the “base” font-size from the sizes that were available in our text-styles (this would then generate the rem values for the text styles that we had defined in the system)

- The shadow styles that have been defined in the system

- “Group colours” in the config file

Once this was complete, and we were happy, we generated the file and used it for the build process. Our Tech lead, Chris Till, took this config and rapidly built the design to ensure the inspection was clear and simple, and that the implementation was efficient. It was.
We are now actively looking to implement this process into more appropriate projects, and we are excited about giving it a proper run. Stay tuned…

Talk to Mediablaze

If you have a project that would benefit from a bit of Mediablaze flair, please get in touch.

Engineering Digital Agency Product Design

Trending

Industry insights

View all
Add your own content +