You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To enable efficient collaboration between designers and developers, we created three Telerik UI Kits for Figma: Material, Bootstrap, and Telerik Default. Each kit corresponds to one of the themes that ship with the Telerik UI for Blazor components.
19
+
To enable efficient collaboration between designers and developers, we created three Telerik and Kendo UI Kits for Figma: Material, Bootstrap, and Telerik Default. Each UI kit corresponds to one of the themes that ship with the Telerik UI for Blazor components.
20
20
21
21
These polished UI kits include pre-made, reusable design components that follow the [atomic design principles](https://atomicdesign.bradfrost.com/chapter-2/).
22
22
@@ -30,7 +30,7 @@ You are free to decide if or how much to customize the UI kits:
30
30
31
31
- You can use them as a starting point for your own component design library or unique design system.
32
32
33
-
## Why Use the Telerik UI Design Kits for Figma?
33
+
## Why Use the UI Kits?
34
34
35
35
When you use the UI kits, you enjoy the following advantages:
36
36
@@ -40,54 +40,56 @@ When you use the UI kits, you enjoy the following advantages:
40
40
41
41
- You can quickly turn a template into a [shared Figma library](https://www.figma.com/best-practices/components-styles-and-shared-libraries/).
42
42
43
-
## Downloading the Telerik UI Design Kits
43
+
## Downloading the UI Kits
44
44
45
-
To download a Telerik UI Design Kit for Figma, navigate to the desired kit and follow the instructions on [duplicating a file from the Figma Community](https://help.figma.com/hc/en-us/articles/360038510873-Use-files-from-the-Community#Duplicate).
45
+
To download the Telerik and Kendo UI Design Kits for Figma, navigate to the desired kit and follow the instructions on [duplicating a file from the Figma Community](https://help.figma.com/hc/en-us/articles/360038510873-Use-files-from-the-Community#Duplicate).
46
46
47
-
-[Telerik UI Kit for Material](https://www.figma.com/community/file/971704350762479492)
47
+
-[Telerik and Kendo UI Kit for Material](https://www.figma.com/community/file/971704350762479492)
48
48
49
-
-[Telerik UI Kit for Bootstrap](https://www.figma.com/community/file/971704996235717509)
49
+
-[Telerik and Kendo UI Kit for Bootstrap](https://www.figma.com/community/file/971704996235717509)
-[Telerik and Kendo UI Kit Default](https://www.figma.com/community/file/971702824494731137)
52
52
53
53
## Exploring the UI Kits' Structure
54
54
55
-
The Telerik UI kits for Figma utilize [nested instances and base components](https://www.figma.com/best-practices/creating-and-organizing-variants/using-variants-effectively/) to provide better manageability of the components. To make them more intuitive to use, we added support for [variants](https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-variants) to some of the components, like the chip.
55
+
The Telerik and Kendo UI Kits for Figma utilize [nested instances and base components](https://www.figma.com/best-practices/creating-and-organizing-variants/using-variants-effectively/) to provide better manageability of the components. To make them more intuitive to use, we added support for [variants](https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-variants) to some of the components, like the chip.
56
56
57
-
Each Telerik UI Kit for Figma contains the following pages, most of which provide multiple frames that group similar design assets:
57
+
Each UI kit for Figma contains the following pages, most of which provide multiple frames that group similar design assets:
58
58
59
-
***_Getting Started**—Briefly explains what you need to know to start using the UI kits.
60
59
***_Cover**—The cover page of the UI kit.
61
-
***_Change Log**—A list with the changes in the UI kit.
62
-
***_Styles**—An informational page with all styles that are applied to the components such as typography, colors, and effects.
63
-
***Components & Variants**—Contains all components with all their variants.
60
+
***_Getting Started**—Briefly explains what you need to know to start using the UI kits.
61
+
***_Table of Contents**—An index with hyperlinks that you can use to quickly navigate within the UI kits.
62
+
***UI Components**—Contains all components and their variants.
63
+
***Data Visualization**—Contains visual equivalents of all charts supported by the Telerik and Kendo UI web component libraries.
64
64
***Icons**—Contains all icons in the form of convenient components.
65
-
***Scenarios**—Contains complex design examples that build upon the components on the **Components & Variants** page and add custom content.
66
-
***Unite UX (Export Preview)**—The page with the frames that you need to export to [Unite UX](https://docs.telerik.com/unite-ux/introduction). Use this page if you plan to create matching libraries on the design and development sides with Unite UX.
67
-
68
-
>tipThe Telerik UI Kits are complex and contain various components with multiple variants and parts. The developers who will use the component design in their apps don't need to know about all variants that are available in the component design library or the design system. That’s why when you export your design to [Unite UX](https://docs.telerik.com/unite-ux/introduction), you must export frames only from the **Unite UX (Export Preview)** and **Icons** pages. This will make the life of the developers easier.
69
-
>
70
-
>The **Unite UX (Export Preview)** page contains the most essential component instances derived from the **Components & Variants** page. Whenever you update the components on the **Components & Variants** page, the instances on the **Unite UX (Export Preview)** page will also update to reflect your changes.
65
+
***_Styles**—An informational page with all styles that are applied to the components, such as typography, colors, and effects.
66
+
***_Change Log**—A list with the changes in the UI kit.
73
69
74
70
Most pages contain multiple frames that group similar design assets.
75
71
76
-
72
+
73
+
74
+
## Customizing the UI Kits
75
+
76
+
The Telerik and Kendo UI Kits for Figma are flexible and fully customizable to your vision and needs. Also, the UI kits enable the scalability of the changes that you apply to the design.
77
+
78
+
To achieve the highest impact and to propagate your changes to multiple components and variants, customize the components on the **_Base** frames of the **UI Components** page.
77
79
78
-
## Customizing a Telerik UI Design Kit
80
+
>tip Once you attain the desired look, you can [publish the modified template as a library](https://help.figma.com/hc/en-us/articles/360041051154#h_b9cf5ead-791e-4ae2-9dd8-aded2fe54fe6).
79
81
80
-
The Telerik UI Kits for Figma are flexible and fully customizable to your vision and needs. Furthermore, the UI kits enable the scalability of the changes that you apply to the design.
82
+
## Upgrading to Newer Versions
81
83
82
-
To propagate your changes to multiple components and variants, customize the base components on the **_Base (Structural Components)** page or the components on the **Components & Variants** page. If you make changes to the components on the **Unite UX (Export Preview)** page, you change only the instances on that page.
84
+
To upgrade to newer versions of the UI kits while keeping your styles, download the free <ahref="https://www.figma.com/community/plugin/1047874318864404919/InstaRelinker"target="_blank">InstaRelinker tool</a> that is available as a plugin in the Figma community. With this tool, you won’t have to manually swap instances and replace remote with local styles.
83
85
84
-
>tip Once you achieve the desired look, you can [publish the modified template as a library](https://help.figma.com/hc/en-us/articles/360041051154#h_b9cf5ead-791e-4ae2-9dd8-aded2fe54fe6).
86
+
The InstaRelinker plugin enables you to re-link nested remote instances and styles within selected local main components to their local equivalents. When the plugin runs, it scans the current Figma file for local main components and automatically re-links any remote instances with names that match a local main component. If the plugin doesn't find a match, it allows you to manually select the local main component for each remote instance and re-link it. The InstaRelinker applies the same process for remote styles.
85
87
86
88
## Choosing How to Use the UI Kits
87
89
88
90
Depending on your requirements, you can take advantage of three distinct levels of component customization:
89
91
90
-
1. Out-of-the-box components—You can use the UI kits as they are and start creating your application design by selecting [one of the available kits](#downloading-the-telerik-ui-design-kits). This is the fastest solution. Designers enjoy matching building blocks with the developers, seamless handover and implementation of the design.
92
+
1. Out-of-the-box components—You can use the UI kits as they are and start creating your application design by selecting [one of the available kits](#downloading-the-ui-kits). This is the fastest solution. Designers enjoy matching building blocks with the developers, seamless handover and implementation of the design.
91
93
92
94
1. Components with customized colors—You can modify the UI kits and apply colors that match your brand guidelines. The developers can use the [Theme Builder]({% slug themes-custom %}) application to transfer the colors from the design to the Telerik UI for Blazor components.
93
95
@@ -98,3 +100,5 @@ Depending on your requirements, you can take advantage of three distinct levels
0 commit comments