Monday Hero
Website
V1
V1
  • Overview
  • Workflow Basics
  • Getting Started
    • Installation
    • Login & Create a Project
    • Roles & Manage the Project Team
    • Prepare Design To Get Best Results
    • Import Design File Into Monday Hero
  • WORKING WITH MONDAY HERO
    • Automatically Generated Components
      • Views
      • Texts
      • Images
    • Convert to Components
      • How to Convert to Components
      • Convert to Button
      • Convert to TextField/EditText
      • Convert to Text Area
      • Convert to Status Bar
      • Convert to Search Bar
      • Convert to Lists and Grids
        • Convert to List
        • Convert to Grid
    • Export Code
      • Export All Screens as a New Project
      • Export Only Selected Screen as a New Project
      • Export Only Selected Screen Into an Existing Project
    • 🚧 Configure Code Preferences (WIP)
  • Step-By-Step Tutorials
    • 🏖️Travel App
  • Reach Us
    • Get Support
    • Get Demo
  • Join & Follow Us
    • Slack Community
    • GitHub
    • Twitter
    • LinkedIn
    • Blog
    • Instagram
    • Facebook
    • YouTube
Powered by GitBook
On this page
  • Convert Components to Code, and Save Time on Manual Coding
  • Supported Components for Code Generation

Was this helpful?

  1. WORKING WITH MONDAY HERO
  2. Convert to Components

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.

PreviousConvert to ComponentsNextConvert to Button

Last updated 4 years ago

Was this helpful?

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.

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.

, and components are automatically detected and generated by Monday Hero.

ImageView,
View
Label/TextView
Buttons
TextFields
Text Areas
Status Bar
Search Bar
Lists
Grids
A component creation example.