This content originally appeared on Telerik Blogs and was authored by Kathryn Grayson Nanz
The ThemeBuilder Figma-to-HTML import plugin empowers you to create your own custom components and add them to ThemeBuilder—where they can be tweaked and styled alongside the Telerik and Kendo UI components.
With more than 100 components in each version, Progress Telerik and Kendo UI component libraries have done a pretty good job of anticipating … well, just about every component you’ll ever need.
Still, every now and again you may find yourself in need of something truly custom—the kind of component that just isn’t possible for a third-party library to offer. We get it, and (more importantly) we don’t think that using a third-party library like Telerik or Kendo UI should ever make it harder for you to do your own thing.
In fact, we’ve created tools that make it easier: like the ThemeBuilder Figma-to-HTML import plugin, which empowers you to create your own custom components and add them to ThemeBuilder where they can be tweaked and styled (either by editing the code or using our no-code tools) alongside all the Telerik and KendoUI components. By doing this, you can create a single source of truth for all your design decisions—a place where designers, developers, product managers and more can all come together to see the design system implemented across your full suite of components.
Sounds like something that might be helpful for your team? Let’s dig in!
Using the ThemeBuilder Figma Plugin
The ThemeBuilder Figma plugin can do a few different things; you might have already read one of our earlier blogs about importing design tokens with it. But did you know that you can also import full components?
Just install the plugin for your Figma account, launch it, sign into ThemeBuilder, and you can choose the “Components” option from the “What Do You Want to Export?” screen.
Then, you’ll be prompted to choose a ThemeBuilder project to add your custom component to. Once you’ve picked your project, select a component in Figma. It’s important to note here that you need to have actually created a component instance within Figma—we’re not just using “component” as a general term here!
Once you’ve selected a component, you can start doing the really cool part (at least, in my opinion): mapping subcomponents. After all, most custom or complex components are still made up of smaller, more basic components, right? That’s the whole idea behind atomic design! We want to help keep that structure intact, so you can always leverage Telerik or Kendo UI components to build your unique custom components.
To map subcomponents, just click the “Map” button, then start matching up the listed components with any Telerik or Kendo components you might have used. For example, this custom header could use our AppBar component, and my clickable icons could be Buttons that use SVG Icons!
After getting everything mapped and ready, just click “Export.” You’ll see a confirmation notice; when you open up your ThemeBuilder project, the new component will be there under the “My Components” tab.
Best Practices for Your Best Exports
To get the most out of the ThemeBuilder component export, here’s what we recommend:
- Use clear and unique names for components and nodes to generate meaningful CSS classes.
- Create lean components; avoid unnecessary layers wherever you can.
- Embrace composition: build your custom components with Telerik or Kendo UI components whenever possible (super easy if you’re also using the Figma UI Kits), and use the mapping function to keep everything connected.
- Leverage styles and variables; these export as reusable tokens, making updates easy and centralized.
Ready to Try?
This workflow flips the traditional handoff cycle: no more do developers have all the say in how custom components get interpreted and built. Designers now have the capability, using the ThemeBuilder Figma plugin, to define which components are used to build more complex custom UI elements—and then to make any small adjustments and confirm that they look and behave exactly how they expect, thanks to the ThemeBuilder live preview.
Avoid re‑coding visuals, eliminate manual syncing and shorten time-to-production—all while preserving design fidelity and maintainability. What’s not to love?
This content originally appeared on Telerik Blogs and was authored by Kathryn Grayson Nanz
Kathryn Grayson Nanz | Sciencx (2025-06-25T14:04:16+00:00) Making the Most of ThemeBuilder’s Figma-to-HTML Import. Retrieved from https://www.scien.cx/2025/06/25/making-the-most-of-themebuilders-figma-to-html-import/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.