# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.