How to Convert to Components

Import your Adobe XD/Sketch design, then convert to components and export all the colors, fonts, assets, images, and generated code for iOS/Android in one place.

Convert Components to Code, and Save Time on Manual Coding

When you import a design, you will get all the style, images, and texts and now it's time to convert some images and texts into components like buttons or lists! Depending on your need, it's possible to shape the code and layers.

Below there is a Gif that shows how to create a button. All component flows are similar to each other.

• Click Create Component button.

• Select the class of your component. Now it can be Button, TextView, SearchBar, StatusBar and Lists or grid.

• Click and drag to select layers that you want to convert to a component.

• Name your component, in the Gif, it's called followButton and click Next.

• For every layer, select the fields that needed to defined like title, image, or background image. The options will be shown on the list.

• Click Add and Save to complete the flow.

A component creation example.

ImageView, View, and Label/TextView components are automatically detected and generated by Monday Hero.

Supported Components for Code Generation

Creating a component is almost the same for other components. You can find supported components for iOS and Android below.

• Buttons

• TextFields

• Text Areas

• Status Bar

• Search Bar

• Lists

• Grids