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
  • Images in Design to Code
  • Generated iOS/Android Code of Images

Was this helpful?

  1. WORKING WITH MONDAY HERO
  2. Automatically Generated Components

Images

Monday Hero can automatically understand the images, and convert design to Swift/Kotlin code.

PreviousTextsNextConvert to Components

Last updated 4 years ago

Was this helpful?

Images in Design to Code

Images can be used to improve the UX, capture users' attention, or differentiate the product. ImageViews are non-interactive by default. Images in the designs are automatically detected after exporting. They are saved as assets, and their code is generated by Monday Hero. Icons and logos are also classified as images. Let's have an example and understand it clearly. A simple image, an icon, a logo, and their generated codes can be seen below.

Generated iOS/Android Code of Images

Images are called and defined in ImageView to display image resources in both Swift/XML/Kotlin language. Let's see the generated code and its attributes.

In iOS, Images are connected to builder and there is no additional code below since the constraints are already defined in the storyboard file automatically.

//ListPageViewController.swift 
import UIKit

class ListPageViewController: UIViewController {
	
	// MARK: - Properties
  //Connection from an Interface Builder to a UI component
	@IBOutlet private weak var photoImageView: UIImageView!
	@IBOutlet private weak var iconImageView: UIImageView!
	@IBOutlet private weak var logoImageView: UIImageView!


	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}
}

extension ListPageViewController {
	private func setupViews() {

	}

	private func setupLayout() { 
		//Constraints are defined in Storyboard file.
	}
}

In Android, the source, layout, constraints, etc. all generated automatically as can be seen below.

<!--activityExample.xml-->
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".ListPageActivity"
	android:background="?attr/daisy">
	
	<ImageView
	android:id="@+id/photoImageView"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:src="@drawable/photo2"
	android:scaleType="centerCrop"
	android:layout_marginStart="20dp"
	android:layout_marginEnd="20dp"
	android:layout_marginBottom="13dp"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/popularTextView"
	app:layout_constraintBottom_toTopOf="@+id/rosieDelTextView"/>
	
	<ImageView
	android:id="@+id/iconImageView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/icon"
	android:layout_marginEnd="19dp"
	android:layout_marginTop="14dp"
	android:layout_marginBottom="20dp"
	app:layout_constraintStart_toEndOf="@+id/likesTextView"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/photoImageView2"
	app:layout_constraintBottom_toTopOf="@+id/photoImageView"/>
	
	<ImageView
	android:id="@+id/logoImageView"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:src="@drawable/logo"
	android:layout_marginTop="267dp"
	android:layout_marginBottom="211dp"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toTopOf="parent"
	app:layout_constraintBottom_toTopOf="@+id/copyrightTextView"/>
	
</androidx.constraintlayout.widget.ConstraintLayout>

All images, logos, and icons should be marked exportable before exporting the design to Monday Hero with plugins. Otherwise, the code and assets are not generated for them.

Click and read here to learn more and see examples.
Images, icon, and logo example.