Improving Designer-Developer Collaboration With Figma UI Kits

Figma UI Kits create consistency and ease communication by providing a single source of truth that all parties can reference—learn how you can start using one today!

Ah, the infamous designer-developer handoff. I’ve often felt that it’s a bit like negotiating a truce: Two groups have agreed to work together, but still don’t really know how. They both have something the other needs. Will they be able to work something out? Or will someone make an unexpected move and break the uneasy peace?

It’s an unfortunate reality that designers and developers often have to overcome a level of distrust when working together. They’re coming to the table with vastly different perspectives, and the finished work requires the skill sets of both parties. There’s often a lack of understanding and empathy on both sides.

Sometimes this misunderstanding has to do with high-level things, like skill sets, workload, time requirements or prioritization. That kind of problem is a larger one, which must be negotiated by team leads and management working together to find middle ground and rebuilding lost trust. It’s a systemic problem that requires a serious look at how the teams are working together, and where the existing systems of communication are failing.

Just as often, though, the gap between the two teams is caused by miscommunication on a more technical level: designers and developers using the same words to mean different things (“grid” is a common example), lack of understanding about technical capabilities and what’s possible or impossible for each side, or just the natural clash that happens when two parties are approaching the same problem with different methodologies. Unlike the previous situation, this (thankfully) has an easier solution—all they need is a bridge. They need something to close the gap between them by aligning them around the same single source of truth.

This is one of the major problems that UI design kits (which I will also refer to as just “UI kits” in this blog) attempt to solve: creating consistency and reducing miscommunication by providing that single source of truth that all parties can reference. UI kits are often a fundamental part of larger design systems—they naturally provide documentation of the components and design tokens that are regularly used in your UI. A full design system is a wonderful asset to your teams, but creating one is a large and time-consuming undertaking. If you’re just starting this process (or still in the phase of getting buy-in for such a project), a UI design kit is a great place to start because you can start seeing the benefits right away, with a much smaller upfront time investment.

What Is a UI Design Kit?

A UI design kit (sometimes called a Figma kit, Sketch kit, etc. depending on the design software used) is a collection of all the elements of your UI design, including (but not limited to) fonts, colors, icons, component design files and documentation. These are useful on their own, both as a form of documentation and to speed up the design process by providing a set of base elements that can be reused in new designs, but are especially powerful when combined with an existing UI component library—such as the Telerik and Kendo UI Kits for Figma.

Figma is a popular design software, used and loved by many teams for its extensive collaborative features. With the Kendo UI Kits for Figma, you have a perfect 1-to-1 correlation between the components that the developers are using and the components that the designers are using. Think of it like the Rosetta Stone of UI: the exact same elements, translated into different “languages.”

Originally launched in September 2021, the Telerik and Kendo UI Kits are a tool that our team continues to enhance as our design themes evolve. You can check out our currently available Figma Kits here:

• Telerik UI for Blazor
• Telerik UI for ASP.NET Core
• Telerik UI for ASP.NET MVC
• Kendo UI for Angular
• KendoReact
• Kendo UI for Vue
• Kendo UI for jQuery

How Can Designers Use Telerik and Kendo UI Figma Kits?

Many third-party component libraries are primarily focused on developers and the development experience but neglect the design experience. Developers are often the ones who get to make the final decision about which technical tools to use, and designers can feel frustrated when they discover that they’re stuck with a library that doesn’t provide them with the resources and support they need to do their jobs effectively. These UI component libraries might have restrictions on the level of customization that’s possible or have so few components that designers struggle to make their vision work within the confines of what’s available. If you’ve ever heard a designer express a negative opinion about working with a pre-existing component library, these concerns are probably at the front of their mind.

The Kendo UI family of component libraries is built to eliminate that concern by prioritizing the design experience. We believe that the goal of any set of tools should be to make everyone’s lives easier—not just the developers. To that end, we’ve partnered with designers, both internally and externally, to ensure that our libraries meet their needs as well. The Figma Kits are a huge part of that offering, combined with the extremely high level of customization available on all our components.

With our Figma Kits, we offer designers an inside look at how all our 100+ components are designed, all their various user interaction states, and the atomic design principles we’ve used to build our library. This gives them an innate understanding of how the components work, and how visual styles are carried through from our smallest tokens all the way up to our most complex components. Our UI Kits make use of Figma components, allowing designers to make changes at the base component or token level and see the edits at once across the entire suite of Kendo UI components. Explore, customize and build—all from one incredible resource.

How Can Developers Use Telerik and Kendo UI Figma Kits?

When your designs and your component library aren’t aligned, it can be an exhausting experience to try to translate the designer’s intentions into your available components. They often don’t line up exactly, and you’re stuck either pushing the design back for revisions and explaining the technical limitations or trying to adjust the design during implementation to just get as close as possible. These are (obviously) not ideal solutions, and they both usually end with designers and developers frustrated with each other due to limiting factors that neither party has full control over.

But when you’re using a Kendo UI library, the Figma Kit has already given your designers the full insight on available components and customization, and the designs and prototypes they hand off to you already exactly match the components you’re using. If they want to adjust the styling, the design tokens in the Figma Kits map exactly to SASS properties used in the library, making it easy for designers and developers to synchronize on the look and feel of the Kendo UI components. Designers can tell developers which property they adjusted (because the names of every property are the same in the Figma Kit as they are in the SASS files), and the Figma inspect tool will show the exact values of those new styles.

Say Goodbye to Frustration During Designer/Developer Handoff!

To give a quick recap, using the Telerik and Kendo UI Figma Kits with the Telerik and Kendo UI family of web component libraries can eliminate confusion between designers and developers in the following ways:

• Ensuring everyone is synchronized on what components, states and properties are available—including what they look like and what they’re called.
• Enabling designers to make changes at a granular level, see the changes reflected across the library, and then quickly and easily communicate those changes to developers.
• Enabling developers to inspect the changes designers have made, and then quickly and easily apply those styles to the equivalent SASS properties.

Oh, and did we mention—the Figma Kits are completely framework agnostic! So, for example, if you have an Angular project using Kendo UI for Angular, and then begin a new project in React using KendoReact, you can quickly and easily carry over the design system you created for your original project. This ensures a consistent user experience across your entire suite of applications—no matter what your tech stacks look like behind the scenes, your users will never feel the difference in your UI.

Curious? Our Figma Kits are free, so you can download one and start exploring right away! And if you’re not already using Kendo UI, you can give that a shot too, free for the first 30 days. Use that month to synchronize your design and development flows, and we’ll bet you won’t ever want to go back to the pre-Kendo UI handoff!