SetSail: Shared foundations for design and engineering

Product summary

Autotelic needed shared interface foundations that designers and engineers could apply across client projects. I built the agency’s first documented design system in Figma, organized reusable components, and mapped its tokens to Tailwind CSS.

I utilized Design Tokens to bridge the gap between Figma and the codebase, ensuring that spacing, typography, and color variables matched the Tailwind configuration perfectly.

Problem Statement

My company is a software development agency. With the growth of the company, there is a rising need to manage and reuse designs and code to speed up development. The design system focuses on reusing the company’s previous designs and utilizing design tokens from Tailwind.

Deliverables

• Component library in Figma
• Presentation of design system introduction

Approach

To start the project, I conducted interviews with engineers and other stakeholders to understand their needs and pain points. This gave me valuable insights into what was lacking in our current system and what features and components would be most useful to our engineers. I learned that our current process was disjointed and lacked consistency, leading to inefficiencies and confusion. I then researched the best practices of other design system pioneers on the internet, reading numerous articles on Medium, attending Figma's online conference, and learning how other companies manage their design systems and utilize Figma components, design tokens, and libraries.

Based on my research, I established the white-labeled design system in Figma, starting from atoms and moving to organisms and then templates. I used design tokens from Tailwind, as it was the framework that our engineers were already familiar with. To ensure flexibility, I tried to use Figma’s new features, Auto Layout, and Property Variants as much as possible.

Throughout the process, I also made sure to write detailed documentation on how to use the design system. This was important to ensure that our engineers could easily adopt and understand how to use the new system.

The completed library organized reusable foundations, components, and templates in Figma, supported by documentation for designers and engineers.

Obstacles

Despite my best efforts, there were obstacles along the way. One of the main obstacles was resistance to adopting new technology. Not everyone was on board with using Figma's Auto Layout and Property Variants, which I believed were essential to creating a flexible and scalable design system. To overcome this, I conducted internal workshops with a 45-page presentation to help stakeholders understand the benefits and ease of use of the structure of the design system.

Constraints & Tailwind Integration

Another challenge was the limited budget and time frame for the project. I had to carefully balance the need for thorough research and planning with the need to deliver a finished product on time and within budget. Additionally, ensuring that the design system was compatible with Tailwind (a popular framework used by our engineers) was a complex task that required a lot of trial and error. To overcome these challenges, I adopted an agile approach to development, regularly checking in with my team and making adjustments as needed. I also relied heavily on documentation to ensure that my colleagues could easily understand and use the design system, which helped to minimize any potential confusion or roadblocks.

I established a white-labeled design system that included atoms, organisms, and templates in Figma, using design tokens mapped to Tailwind CSS.

The design and usage

The purpose of this video is to instruct other designers or engineers in the company about how to use the Figma library for their future projects.

Lessons Learned

Overall, this project has taught me a lot about the importance of collaboration and communication when it comes to creating a design system. It’s essential to work closely with stakeholders and involve them in the process to ensure the system meets their needs. Additionally, it’s important to stay up-to-date with the latest design system trends and technology, while also being patient and understanding when it comes to resistance to change.

SetSail strengthened my practice in design-system structure, engineering collaboration, internal teaching, and documentation. I would next validate the library against new project requirements and document clearer contribution and maintenance practices.