![]() ![]() When we’ve assigned all the variables and are happy with how the new styles are looking, we can use the Export tool in ThemeBuilder to export application-ready CSS that captures all the changes we made. Then, we just assign those new Figma design token values to our existing theme styles! Note how the updated color is immediately applied to the components in the Live Preview. Prefix, so we can easily tell them apart from any styles we might have created earlier. All the imported styles will have a “-figma” If we follow the “Open in ThemeBuilder web app” link, we’ll be taken to our ThemeBuilder project where the Figma design tokens are now visible in the left-hand Theme Styles column. In just a few seconds, the export will run and we’ll see a confirmation message telling us that the export was successful! We would want everything, so let’s leave it all checked and click the “Export” button. They’ll all be selected for export by default, but we can customize that if (for example) we only want the colors and not the typography. ![]() Then, we’ll be shown a list of every single design token in that Figma file. Choose the project for import, and click “Select.” When we return to Figma, our available ThemeBuilder projects will be available for selection in the modal window. We’ll be prompted to log in to ThemeBuilder. When the ThemeBuilder Plugin is open, click the “Run” button and select “Export Styles” from the dropdown menu. We can run the plugin by clicking on the Add-Ons button in the toolbar, switching to the Plugins panel, and selecting Progress ThemeBuilder from the list. Then, we open the Figma file sent by the design team. This will add the plugin to our Figma account, so we can access it in all of our files. The first thing we do is install the ThemeBuilder Figma Plugin by clicking the “Try it out” button in the top right corner of the Progress ThemeBuilder page in the Figma Community. They’ve sent us the mockup, and it’s our job to implement those styles in the app. Our design team has aįigma file where they’ve created a new look and feel for the application UI. Let’s assume that we already have an application using KendoReact. We can use the associated Telerik or Kendo Figma Kit for this, but we don’t have to-any Figma file will work!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |