Make your design system work better for everyone

Capabilities mentioned in this post require a Figma Organization plan. Learn more.

Between sales and marketing, product design, engineering, and brand, many teams across a company need access to the design system. We recently spoke with Santosh Komaragiri, Lead Product Designer at DataGuard, who shared a detailed tour of their Figma Organization setup. For DataGuard, maintaining a well-organized set of teams, projects, and files is key to scaling cross-functional collaboration. Watch the video for how they do everything from manage complex components to hand off files to developers, and read on for our key takeaways.

Self-serve marketing collateral

All too often, designers are inundated with one-off requests from other teams who need a (seemingly) simple mock-up. Those “quick” requests can eat away at your time, so Komaragiri recommends empowering cross-functional collaborators to create their own materials by building a self-serve asset library within your design system. At DataGuard, this model allows the marketing team to move quickly, while also making sure that their collateral is on brand.

Customizable sales decks

The sales team at DataGuard talks to companies of all sizes, and with varying needs. To accommodate the wide range of prospective customers, designers created a slide template in Figma, with individual components that the sales team can customize. They have also created component sets for key slides so the content changes based on audience. For example, the sales team can toggle by company size on the pricing slide. As they adjust the number of employees—from 0-25 employees, all the way up to 600+—the pricing structure changes. Plus, they can easily switch the slide between English and German, depending on who they’re talking to.

When organizing a design system, your “users” should be top of mind. Designers and developers alike need access to DataGuard’s design system, so it was important that team, project, and file organization work seamlessly for both users. To that end, they’ve developed a unique approach to building components. Instead of building out components in Figma to pixel perfection before handing them off to developers, designers and developers collaborate more iteratively.

For any new contributions to the design system, Komaragiri recommends ideating in Figma first, without components. Once you have sign-off from the wider team, the development team should take their Figma files and code up your components. Then, the design team can build their Figma library components—the source of truth—after the product has been shipped.

The approach, which is a departure from traditional models, allows for a more fluid working relationship between designers and developers. If there’s only one designer working alongside many developers, the designer can stay on top of an evolving design system, without spending too much time perfecting pixels before code is written.

Above all, Komaragiri suggests trying out different methods for component management and finding one that aligns with your team’s unique structure.

For fast-moving teams, it can be hard to balance new updates alongside in-progress work. To keep track of projects as they evolve, DataGuard created work in progress (WIP) design and component library files. With this method, they can keep a single source of truth for “live” files while maintaining different publishing cycles on components.

You can take this approach even further by introducing branches for incremental updates within these two file types. It’s a belt and braces approach, but one that allows you to stay on top of a fast moving design process and stay consistent with component release management.

For more tips from Komaragiri and the team at DataGuard, check out the full conversation. Or, watch all of our recent customer livestreams on our YouTube playlist.