Merge pull request #4637 from syncfusion-content/BLAZ-897019-FigmaUG

897019: updated UG content for figma

Author: kmuthukumarmkm

blazor-toc.html

@@ -188,6 +188,9 @@
 			<li>
 				<a href="/blazor/appearance/icons">Icons</a>
 			</li>
+			<li>
+				<a href="/blazor/appearance/figma">Figma UI Kits</a>
+			</li>
 		</ul>
 	</li>
 	<li>Common

blazor/appearance/figma.md

@@ -0,0 +1,78 @@
+---
+layout: post
+title: Introduction to the Figma UI Kit in Blazor - Syncfusion
+description: Check out and learn about the introduction to the Figma UI Kit in the Syncfusion Blazor and more details.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Figma UI Kits for Syncfusion Controls
+
+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.
+
+The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion controls.
+
+![Material 3](./images/material3.png)
+
+## Advantages of UI kits
+
+The Syncfusion Figma UI kit offers the following key advantages:
+- 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.
+- Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
+- Developers can seamlessly match Syncfusion controls with your design requirements, ensuring alignment and accuracy.
+- By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
+
+## Downloading the UI kits
+
+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:
+
+- [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)
+- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
+
+## Structure of the UI kits
+
+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:
+
+- **Thumbnail**: This page serves as the cover page for the UI kit.
+- **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.
+- **Icons**: Contains a collection of all icons used in the design controls.
+- **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.
+
+![Layout](./images/layout.png)
+
+## Customizing the UI kits
+
+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.
+
+Here's how to customize the primary button color of the Material 3 theme within your layout:
+
+1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme.
+2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button.
+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.
+4. Identify the button you wish to customize within your layout.
+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.
+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.
+7. A popup will show the design token list. You can change the primary color using a color palette.
+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.
+
+![Customization](./images/customize.png)
+
+In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls:
+
+Feel free to experiment with these customization options to create a design that perfectly matches your requirements.
+
+## Upgrading the UI kits
+
+To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process:
+
+- Keep track of updates or new versions of UI kits from Syncfusion.
+- Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues.
+- Share your experience with Syncfusion regarding the upgraded UI kits, including any issues encountered or suggestions for improvement.
+
+## See also
+
+* [Available themes](https://blazor.syncfusion.com/documentation/appearance/themes)
+* [Customizing themes](https://blazor.syncfusion.com/documentation/appearance/theme-studio#customizing-theme-color-from-theme-studio)