|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Introduction to the Figma UI Kit in ##Platform_Name## control | Syncfusion |
| 4 | +description: Check out and learn about the introduction to the Figma UI Kit in Syncfusion ##Platform_Name##. Also, listed the icons by theme-wise. |
| 5 | +platform: ej2-asp-core-mvc |
| 6 | +control: Common |
| 7 | +publishingplatform: ##Platform_Name## |
| 8 | +documentation: ug |
| 9 | +--- |
| 10 | + |
| 11 | +# Figma UI Kits for Syncfusion Controls |
| 12 | + |
| 13 | +Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion controls. |
| 14 | + |
| 15 | +The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion controls. |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +## Advantages of UI kits |
| 20 | + |
| 21 | +The Syncfusion Figma UI kit offers the following key advantages: |
| 22 | +- The UI kit includes detailed information about Syncfusion controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion controls. |
| 23 | +- Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient. |
| 24 | +- Developers can seamlessly match Syncfusion controls with your design requirements, ensuring alignment and accuracy. |
| 25 | +- By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects. |
| 26 | + |
| 27 | +## Downloading the UI kits |
| 28 | + |
| 29 | +Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links: |
| 30 | + |
| 31 | +- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme) |
| 32 | +- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme) |
| 33 | +- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme) |
| 34 | +- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme) |
| 35 | + |
| 36 | +## Structure of the UI kits |
| 37 | + |
| 38 | +Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages: |
| 39 | + |
| 40 | +- **Thumbnail**: This page serves as the cover page for the UI kit. |
| 41 | +- **Index**: Here, users can find a detailed list of all control names, making it simple to identify and locate specific controls within the UI kit. |
| 42 | +- **Icons**: Contains a collection of all icons used in the design controls. |
| 43 | +- **UI Controls**: At the core of the UI kit, this section features a wide range of essential UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants. |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +## Customizing the UI kits |
| 48 | + |
| 49 | +The Syncfusion Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants. |
| 50 | + |
| 51 | +Here's how to customize the primary button color of the Material 3 theme within your layout: |
| 52 | + |
| 53 | +1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme. |
| 54 | +2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button. |
| 55 | +3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion fig file you want to import and click the **Open** button. |
| 56 | +4. Identify the button you wish to customize within your layout. |
| 57 | +5. On the right side of the Figma interface, find the color variable options listed. For example, the variable for a particular button color might be labeled as `$primary-bg-color`, derived from the primary color variable. |
| 58 | +6. To customize this primary button control color, click outside the button to see the **Local variables** option on the right side of the Figma interface. It contains the design token for the color variables. Click the **Local variables** option. |
| 59 | +7. A popup will show the design token list. You can change the primary color using a color palette. |
| 60 | +8. Once you've selected the new color (e.g., pink) for the primary variable, the button's color pattern will be updated accordingly. You'll see the changes reflected in real-time within your design. |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls: |
| 65 | + |
| 66 | +Feel free to experiment with these customization options to create a design that perfectly matches your requirements. |
| 67 | + |
| 68 | +## Upgrading the UI kits |
| 69 | + |
| 70 | +To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process: |
| 71 | + |
| 72 | +- Keep track of updates or new versions of UI kits from Syncfusion. |
| 73 | +- Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues. |
| 74 | +- Share your experience with Syncfusion regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. |
| 75 | + |
| 76 | +## See also |
| 77 | + |
| 78 | +* [Available themes](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) |
| 79 | +* [Customizing themes](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme-studio#customizing-theme-color-from-theme-studio) |
0 commit comments