diff --git a/content/en/docs/howto/front-end/atlas-ui/figma-ui-kit.md b/content/en/docs/howto/front-end/atlas-ui/figma-ui-kit.md index 89afd6acba4..be7e0203e67 100644 --- a/content/en/docs/howto/front-end/atlas-ui/figma-ui-kit.md +++ b/content/en/docs/howto/front-end/atlas-ui/figma-ui-kit.md @@ -7,6 +7,15 @@ description: "Learn how to set up and use the Atlas UI Kit for Figma." ## Introduction +The Mendix Figma UI Kit is a library of ready-made UI components, layouts, and widgets that you can use as a visual reference when designing your Mendix application. Figma is for design and visual reference. It is not where you build or export working Mendix components. + +The Figma UI Kit helps you understand what UI components are available in Mendix, how they look, and how to use them consistently. Using it provides the following benefits: + +* **Save time** – Start with ready-made components instead of designing everything from scratch. +* **Stay consistent** – Keep your application aligned with the Atlas UI design and styling. +* **Design with confidence** – Preview components and their variations before implementing them in Mendix Studio Pro. +* **Bridge design and development** – If you work with designers in your team, use the UI Kit to align on designs and simplify task transfers. If you do not have a designer, you can use Figma yourself to explore, plan, and communicate your UI designs before building them in Mendix. + To start creating your designs with a UI kit, you must download [Atlas UI Kit for Figma](https://www.figma.com/community/file/1291681319513425134). You can design using any components that are up-to-date with the most recent [Atlas framework](https://atlasdesignsystem.mendixcloud.com/p/dashboard). Inside the kit you will find the following: @@ -20,10 +29,24 @@ To use the Atlas UI Kit for Figma to its fullest potential you will need the fol * A Figma subscription (required to use the kit's file as a library) * The Figma desktop app (download it to take advantage of Figma's best features) + * To install the Figma desktop app, go to the [Figma website](https://www.figma.com/), download the app, and install it + +## Basics + +Here are the basics for working with Studio Pro and the Mendix Figma UI Kit: -## Basics +1. Open the UI Kit in Figma: + 1. In Figma, open the Atlas UI Kit for Figma. + 1. Explore the available components, widgets, and layouts. + 1. Find the component you want to use and check its appearance and available variations. +1. Use the component in Mendix: + 1. Open your application in Mendix Studio Pro. + 1. Find the corresponding widget or building block in the Toolbox. + 1. Drag it onto your page and configure it to match your requirements. +1. Need to customize the component's appearance? + * Use the Figma design as a visual reference. Check the component's colors, typography, spacing, and other properties, then apply the corresponding styling in Mendix Studio Pro. -To install the Figma desktop app, go to the [Figma website](https://www.figma.com/), download the app, and install it. +Please note that Figma components cannot be directly imported into Mendix as functional components. You must recreate the design from Figma UI Kit using Mendix widgets and building blocks. ## Recommended Practices diff --git a/content/en/docs/howto10/front-end/atlas-ui/figma-ui-kit.md b/content/en/docs/howto10/front-end/atlas-ui/figma-ui-kit.md index e0f6a3822d4..b005a8b1ca7 100644 --- a/content/en/docs/howto10/front-end/atlas-ui/figma-ui-kit.md +++ b/content/en/docs/howto10/front-end/atlas-ui/figma-ui-kit.md @@ -7,6 +7,15 @@ description: "Learn how to set up and use the Atlas UI Kit for Figma." ## Introduction +The Mendix Figma UI Kit is a library of ready-made UI components, layouts, and widgets that you can use as a visual reference when designing your Mendix application. Figma is for design and visual reference. It is not where you build or export working Mendix components. + +The Figma UI Kit helps you understand what UI components are available in Mendix, how they look, and how to use them consistently. Using it provides the following benefits: + +* **Save time** – Start with ready-made components instead of designing everything from scratch. +* **Stay consistent** – Keep your application aligned with the Atlas UI design and styling. +* **Design with confidence** – Preview components and their variations before implementing them in Mendix Studio Pro. +* **Bridge design and development** – If you work with designers in your team, use the UI Kit to align on designs and simplify task transfers. If you do not have a designer, you can use Figma yourself to explore, plan, and communicate your UI designs before building them in Mendix. + To start creating your designs with a UI kit, you must download [Atlas UI Kit for Figma](https://www.figma.com/community/file/1291681319513425134). You can design using any components that are up-to-date with the most recent [Atlas framework](https://atlasdesignsystem.mendixcloud.com/p/dashboard). Inside the kit you will find the following: @@ -19,11 +28,25 @@ Inside the kit you will find the following: To use the Atlas UI Kit for Figma to its fullest potential you will need the following: * A Figma subscription (required to use the kit's file as a library) -* The Figma desktop app (download it to take advantage of Figma's best features) +* The Figma desktop app + * To install the Figma desktop app, go to the [Figma website](https://www.figma.com/), download the app, and install it ## Basics -To install the Figma desktop app, go to the [Figma website](https://www.figma.com/), download the app, and install it. +Here are the basics for working with Studio Pro and the Mendix Figma UI Kit: + +1. Open the UI Kit in Figma: + 1. In Figma, open the Atlas UI Kit for Figma. + 1. Explore the available components, widgets, and layouts. + 1. Find the component you want to use and check its appearance and available variations. +1. Use the component in Mendix: + 1. Open your application in Mendix Studio Pro. + 1. Find the corresponding widget or building block in the Toolbox. + 1. Drag it onto your page and configure it to match your requirements. +1. Need to customize the component's appearance? + * Use the Figma design as a visual reference. Check the component's colors, typography, spacing, and other properties, then apply the corresponding styling in Mendix Studio Pro. + +Please note that Figma components cannot be directly imported into Mendix as functional components. You must recreate the design from Figma UI Kit using Mendix widgets and building blocks. ## Recommended Practices