Make your design system work better for everyone

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.

The Total Economic Impact of Figma

This Forrester report shows how teams are using Figma to speed up their workflows, consolidate their design stack, and build better products.

Read the report

See how Figma can help you scale design

Great design has the potential to differentiate your product and brand. But nothing great is made alone. Figma brings product teams together in a fast and more inclusive design workflow.

Get in touch to learn more about how Figma can help companies scale design.

We’ll cover how Figma can help:

  • Bring every step of the design process—from ideation, to creation, to building designs—into one place
  • Accelerate design workflows with shared company-wide design systems
  • Foster inclusivity in the product team process with products that are web-based, accessible, and easy to use

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.