# Create Flutter Components

Monday Hero is designed to automatically recognize the images, texts, and views in your design. However, to develop a fully functioning app, essential components such as buttons and text fields must be manually created. This document guides you through creating components on Monday Hero to achieve a fully operational app.

### Types of Components

In Monday Hero, there are two main types of components: System Components and Custom Components.

* [**System Components:**](https://learn.mondayhero.io/design-to-flutter/creating-components/system-components) These are predefined components provided by the development language, such as a Material Button.
* [**Custom Components:**](https://learn.mondayhero.io/design-to-flutter/creating-components/custom-components) These are components that you create using system components. For example, a custom component might be a part of the screen that includes buttons, texts, and text fields, making it more readable and reusable.

Please refer to the sections for examples of both [system](https://learn.mondayhero.io/design-to-flutter/creating-components/system-components) and [custom components](https://learn.mondayhero.io/design-to-flutter/creating-components/custom-components).

### How to Create a Component?

You can learn how to create components by watching the video below or by continuing to read this guide.

{% embed url="<https://youtu.be/FiBBZKPWVfQ>" %}
How to create components
{% endembed %}

Monday Hero detects every design element as images, texts, and views, similar to what you see below. It’s crucial to convert these elements into functional components:

![Convert to Components](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-Mc3wYeZU4W6tPuhMtH0%2F-Mc3yFMDBMZ9_RBy4AGY%2FGroup%20452.png?alt=media\&token=754b4b23-c4c1-4cb2-b63c-bf4f94100f75)

Next, begin creating system components.

&#x20;