Using a Design Library to Accelerate Your Workflow

How to reuse common layouts across projects effortlessly

Todd Wilson

July 2, 2024

Enhanced workflows using predefined templates and layouts

In today's fast-paced development environment, incorporating a design library can significantly speed up your workflow. Tools like Clonify.io, Figma, and Builder.io allow you to reuse common layouts across projects effortlessly, translating these formats quickly into React components with the Figma plugin from Builder.io. Let's explore how to leverage these tools for faster development and enhanced workflows.

I recently began experimenting with integrating Clonify.io into my projects. The ability to select individual sections or entire templates as a project base is transformative. Here’s how you can do it too:

Choosing a Design Library:

Tailwind CSS and Material UI: These open-source collections of components provide styles and preferences that can be customized to fit your design.
Open Source Components: Utilize components that require more complexity but offer rich user experiences with accessibility.

Leveraging Common Layouts:

Reusing layouts across projects saves time and ensures consistency. For quick prototyping, predefined templates in Figma allow you to develop and present many variations rapidly.

Open Source Components and Design Libraries

You can also leverage other open source components that might require a bit more complexity but give you the accessibility and support to deliver rich user experiences. This rapidly accelerates the development time and allows you to also leverage additional AI generative content.

As these capabilities increase, we can also designate a set of custom components which can also be reused across projects. One library I've been leveraging for this purpose with primitives is Radix UI.

There are so many common layouts that can be reused across projects while adapting to a custom design or brand style. For the purpose of quick prototyping, these give you the ability to rapidly develop and present many variations to your clients. Within Figma, you can also adjust the formats to be a bit more custom depending on your needs.

Orbe (Portfolio) Template

In this example, I created a simple static page with reusable components such as typography, links, and common elements. The home page included custom elements not available in the Wedges component library, so I incorporated a Radix UI element and customized it for the accordion design.

This is still an ongoing experiment and by using Storybook further can help to organize each of the core elements shown in the style guide.

Enabling Design and Collaboration

Collaborating with designers using these tools fosters creativity and efficiency. You can explore different ideas with minimal cost by swapping various wireframes until you find the perfect fit. Learning these tools enhances your ability to create cohesive and consistent user experiences that align with your brand.

This level of collaboration I find brings the best of both worlds and really reduces and enhances the time it takes to present ideas to clients or for your own projects.

Conclusion

Adopting design libraries and tools like Clonify.io, Figma, and Builder.io can revolutionize your workflow. Start by defining a set of guidelines and rules based on existing frameworks and design libraries. Then, utilize generative UI tools to build and create layouts based on predefined styles.

Challenge: What project or idea will benefit from leveraging these professional layouts? How might it reduce your time to market?

Take a look at new ways to accelerate your workflows by adopting design libraries. Guide the design process, reduce production time, and create rich user experiences that delight your users.