Hello Dear Customer 👋 thank you for purchasing Ant Design System for Adobe XD! I hope it will help you deliver your ideas faster. I’ve prepared a short introduction to help you get started.

Before you start working with the UI kit

Download and install the font

This UI kit uses ‘Segoe UI’ which is the system font of Windows. If you are using Windows 7 - 10 versions you already have it installed. If you don’t have this font you can download it from here: https://aka.ms/WebFluentFonts. Unzip it and install the content of Segoe UI folder.

Read the manual on how to work with components and assets

This UI kit is built with components and assets. Make sure to learn how to use them in Adobe XD so your work will be fruitful and smooth. Reading: https://helpx.adobe.com/pl/xd/help/work-with-components-xd.html https://helpx.adobe.com/pl/xd/help/assets-symbols.html

Open the file

To open the file double click on Ant Design System for Adobe XD.xd file.

Working with icons

Replacing the icons inside components:

Video guide: https://www.loom.com/share/ccefc292fef44a1b8f7d9af15873c17a

Changing the color of the icon

Video guide: https://www.loom.com/share/117ea7a062c242c4a2ea83a3f480baa0

Ant Design

To learn more about Ant Design System go to https://ant.design. There you will find all design and development documentation regarding guidelines, components etc.

If you are a developer you can also visit https://github.com/ant-design for more information.

Changes in components naming

In order to avoid collision in components naming I’ve decided to apply some changes in naming things in XD.

Inputs, Buttons and Tabs

In Ant Design System there are 3 different sizes of these components: Small, Default and Large. I’ve decided to rename ‘Default’ size to ‘Medium’ because it was colliding with the default state of each component. So please keep it in mind while showing your designs to developers.