TLDR: We’re excited to announce the launch of Pretine 7. This is a major update to our Figma Design System. Pretine is an essential companion for the React component library Mantine. Having a well organized design system is a critical component to a high performing product team. Check out Pretine and let us know what you think!

Greetings!

We’re well into the fall and the leaves are turning here at Ravn HQ in Utah. We’re all trying to fit in the last of our warm weather activities before the snow starts falling. Thankfully, building world class software is a year round activity ☀️ 🌧️ ❄️ 

Introducing Pretine 7: Bridging the Gap Between Design and Development

At Ravn, we've always been committed to pushing the boundaries of digital product creation. Today, we're excited to share a new update to Pretine, our design system that is transforming how we approach design and development.

Not interested in the origin story? Check out “What’s New in Pretine 7” below.

The Evolution of Design Systems

Over the years, we've witnessed the rise of sophisticated design systems built for Figma, which greatly enhanced our design process. These systems brought organization and efficiency to our workflows, elevating the quality of our designs. As we further embraced these new tools, we uncovered a new challenge: insufficient quality in the corresponding code libraries.

While our design capabilities soared, we experienced increasing friction in the development process. The component libraries accompanying these design systems often fell short, lacking consistent updates and robust architecture. This misalignment was causing frustration and inefficiencies in our development teams.

Rethinking the Approach: The Birth of Pretine

Instead of accepting the status quo, we decided to flip the script. We asked ourselves: What if we built a design system around a rock-solid code library, rather than the other way around?

Enter Pretine – our answer to seamless design-to-development workflow.

Why Pretine?

1. Built on a Solid Foundation: We chose Mantine, a highly customizable and feature-rich component library beloved by our developers, as the backbone of Pretine.

2. Perfect Synchronization: Pretine achieves full feature parity with Mantine, ensuring designers have the full set of tools to get the job done.

3. Cutting-Edge Figma Integration: We've leveraged the latest Figma features to create an efficient and powerful design experience.

4. Bridging the Gap: Pretine strengthens the understanding between designers and developers, fostering better collaboration and outcomes.

5. Clarity and Organization: Our Figma files are meticulously structured, making it easy for teams to navigate and utilize the system effectively.

The Results Speak for Themselves

We've been using Pretine internally and across numerous client projects. The impact has been profound. Our teams are working more cohesively, our development cycles are smoother, and the end products are more polished than ever.

Our Figma community file has been copied over four thousand times and is receiving enthusiastic feedback from the community. Our work has also grabbed the attention of the creator of Mantine and is an officially recommended Figma design system as seen here.

What’s New in Pretine 7

Since the launch of the first version of Pretine there have been some improvements in both Figma and Mantine. Our goal for Pretine 7 was to leverage the new updates to Figma and incorporate the new components and designs of Mantine 7. Here are some of the new key features that will help product teams:

• Full set of Mantine design components, including Mantine Charts and UI Elements.

• Versioning strategy to match Mantine versioning.

• Fully responsive components for all screen sizes.

• Variables for colors, borders, spacing and shadows.

• Light and Dark mode support via variables.

• 1:1 matching of Figma pages and Mantine component groups for added synergy between design and dev.

Pushing Boundaries in Product Design

Pretine 7 is already helping our teams advance how digital products are conceived, designed, and brought to life. We're excited to share this innovation with you and explore how it can elevate your projects.

Interested in learning more? Let’s chat over a quick demo. We’d love to show you around and answer any questions you might have.