Figma&Kendo integrated development process

[Sanja Tolo]

Hi,

As you can imagine from the previous questions, we are integrating deeply Figma with our Kendo implementations, and so far it looks great.

3 questions that would be ideal if they are possible to execute:

1. Do you know or do you plan to release a plugin for Figma to generate React code which incorporates Kendo components? For example if we make a layout of the dashboard like the Coffee shop example...would be great if we could generate the sample code which already has Drawer implemented with hardcoded items inside. It would be great if it already had css and html for the App bar using Kendo App bar.
   But also, if we put Grid on the page, go the extra mile to define the columns in Figma, that it gives us a starter React code definition which includes defining the Kendo Grid and appropriate columns.
   
   The aim is not to have a perfect functional code, but to save on writing boiler plate code by hand.
   
   If not with Kendo components, closest possible option or idea?
   
   
   
2. Will the new plugin and addition to Themebuilder Pro support custom styles and tokens as well? For example, we use your components UI Kit, we restyle what we need, but for a title on the dashboard we are missing a style...we create a new color called $title-color, we create a new style called title-style...how can we export that together with Kendo theme changes?
   
   Will the new upcoming plugin be able to do that as well?
   
   So the idea being that we create a unified theme of the app or site which redefines both Kendo components look&feel, but also the custom html fragements as well.
   
   
   
3. We create a new style...for example we have a case that we need a style for 100% transparency. And we want to apply it to one of your components, which we can in the design system...in this case a Drawer item...we basically want to put a newly created style to make our drawer components fully transparent to the main background.
   
   How will the Themebuilder plugin handle this and what is the path to make this happen?

 

Thank you!

Sanja

[Nick Iliev]

Hi Sanja Tolo,

 

Thanks for your questions!

 

Q: Do you know or do you plan to release a plugin for Figma to generate React code which incorporates Kendo components?

A: While we currently do not have plans to develop a similar plugin, we understand the significance of the community's voice and are open to considering ideas that gain sufficient support. We encourage you to share your ideas by posting them as feature requests in our public feedback portal. This will allow other users to upvote the ideas they find most valuable.

 

Q: Will the new plugin and addition to Themebuilder Pro support custom styles and tokens as well?

A: We've just released a ThemeBuilder Figma plugin which allows designers to export all styles to a ThemeBuilder project. The exported styles are converted to SASS and CSS variables immediately reusable within a ThemeBuilder project. Note that ThemeBuilder only generates styles (SASS and CSS). Code generation is out of the scope of the ThemeBuilder functionality (for example, it won't generate React, Angular, or Blazor code).

 

Q: ...we basically want to put a newly created style to make our drawer components fully transparent to the main background.

A: Within ThemeBuilder, you can use the property grid to edit multiple components' properties, including applying opacity and transparency. For example, you can modify the opacity of specific components through the Opacity & Visibility properties.

Or you can create a style that adds transparency through a linear gradient on the components' background (if that suits your component styling, as it will only change the transparency of the background, but, for example, the text will remain visible).

 

 

I hope the above addresses your questions, but please do not hesitate to contact me if you need additional details.

 

Regards,
Nick Iliev
Progress Telerik

[Pero]

Hi Nick,

Sanja will answer you directly.

 

Pero

[Sanja Tolo]

Hi Nick,

Thank you for your answer!

I bought the ThemeBuilder Ultimate license right away to try it. However it doesn't work correctly for some reason, can you help me please?

I did 2 changes:

1) Is changed the $primary color to another one
2) I change the font family of H3 tag to another one

I did the export to ThemeBuilder and recognized that it has changes, however instead of adding them to the correct style and color token, it created new tokens prefixed with "figma-*".

Please see the example with primary color. Basically we've put a lighter blue, and it pulled it in ThemeBuilder, but it didn't apply it, instead it created a new figma-primary color token not used anywhere?

Can you please tell me how to change settings and export them so that they get applied to ThemeBuilder and component styles inside it?

Thank you!


Sanja

[Nick Iliev]

Hello Sanja,

 

The Figma plugin exports the designed tokens under the Figma variables groups in ThemeBuilder's THEME STYLES pane. For example, the exported color styles will be grouped under Figma Colors, and exported typography (text) will be grouped under Figma Typography. Note that the plugin does not aim to map and replace the existing kendo-* variables. Instead, the plugin creates the new figma-* variables that developers can use to apply the exported design on their behalf.

You have two approaches that you can use to apply the imported Figma styles within the ThemeBuilder project. 

- You can apply the styles atomically through the Advanced Edit option for each component and then reuse the imported figma-* variables. The approach is demonstrated in the attached screenshot.

- Alternatively, you can use the imported figma-* variables as a reference and then edit the default kendo-* variable's values through the Edit option for each variable.

 

Note that the kendo-* variables are automatically applied on Kendo & Teleri UI components utilizing the Kendo Themes. So if you would like to use custom typography on H3 or other native HTML elements, you can reuse the SCSS variables within your application's styles. You must explicitly import any custom font (the Figma plugin won't export fonts, but only the typography variables in SCSS) in the ThemeBuilder project so that they are later exported to the project's dist/fonts folder.

 

[Sanja Tolo]

Hi Nick,

Sorry if I'm pushing but I have really high expectations knowing how your great products usually work, especially now with a real license that we paid to be able to do this automatically and not manually.

I must admit this does not make much sense. If I still need to go one by one component and apply styles one by one when I change the complete theme it will take a whole lot of time. Basically the paid plugin only saved us time in a way that it created the styles in ThemeBuilder? It is not much to do with automation.

It is really too bad that you went to such big effort to make it so detailed in Figma, not to reuse it but to force the users to go apply the styles manually to ThemeBuilder.

Can you give us an option please to override original styles or to create "figma-***" ones? So that we decide on our what is better for us and have a true automated workflow from Figma to SCSS theme?

Thank you!

[Nick Iliev]

Hi Sanja,

 

While automated mapping of the imported Figma variable is not supported (due to not having a single naming convention in Figma or for all styling themes), you can map each Figma variable to an existing kendo variable. For example, assume we have an imported variable $figma-primary that you need to map to $kendo-color-primary. You can map it through the Edit window (refer to the screenshot). 

This way, when your designer updates the Figma prototype and its style values at any future moment, you can re-export them from Figma, and the mapped variables will be automatically updated. This allows you to edit the styles anytime with a few clicks. Mapping the kendo variables to your custom variables considerably lowers the overall effort, and you can still make atomic changes through the property inspector.

 

[Sanja Tolo]

Hi Nick,

Ok, understood. Not ideal but we can make it work.

An idea...could you please make it in a way that we can store mappings as a part of some config that we can re-apply to new projects?

So the process would be:

1. time create a new Figma design based on UI Kit
2. export it to ThemeBuilder
3. do the manual 3rd party or figma-styles to ThemeBuilder styles (ok, lets create it manually)
4. save the mappings between them as some external config file 
5. when I create a new project based on my customized UI kit and I export it to ThemeBuilder
6. instead of re-doing for a new project the mappings for a couple of hours again by hand, load up the mappings file which I saved from the previous project and the tools just connects the dots

Can you do that?

As Figma styles will be standardized for companies, ThemeBuilder/Kendo styles are standardized for you...this way I and others could do the mapping once, and until the base design for apps doesn't change, just reuse it instead of re-spending some hours?


What do you think?

[Nick Iliev]

Hey Sanja,

 

Indeed, the described scenario sounds like a good feature to have. For your convenience, I've logged this one as a feature request in our public feedback portal so you and the community can upvote it. You can find the logged feature request here: 

https://feedback.telerik.com/themebuilder/1612777-themebuilder-variables-mapping-export

That said, note that in case the Figma project is the same, then you could do the following:

- Export the styles from Figma to your original ThemeBuilder project.
- Apply the variable mappings in ThemeBuilder.
- Duplicate the ready ThemeBuilder project.
- Export the updated styles from the same Figma project to the duplicated ThemeBuilder project.

This would be sufficient for a case where you are reusing the same Figma prototype and want to reuse the same variable mappings.