> For the complete documentation index, see [llms.txt](https://learn.mondayhero.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/how-to-convert-component-to-ios-android-code.md).

# How to Convert to Components

## 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.](/files/-MGif7Y6holkg_MzeIqE)

{% hint style="info" %}
[**ImageView,**](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-image-to-code.md) [**View**](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-view-code.md)**,** and [**Label/TextView** ](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-text-code.md)components are automatically detected and generated by Monday Hero.
{% endhint %}

### 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](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-button-design-to-ios-android-code.md)
* [TextFields](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-to-ios-android-code.md)
* [Text Areas ](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-area-to-ios-android-code.md)
* [Status Bar](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-status-bar-design-to-ios-android-code.md)
* [Search Bar](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-search-bar-design-to-ios-android-code.md)
* [Lists](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/list-design-to-ios-android-code.md)
* [Grids](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/grid-design-to-ios-android-code.md)