Working with Figma Plug-In

In this section, we'll explore how Monday Hero works with the Figma plug-in.

When you upload a design from Figma via the plug-in, Monday Hero gets the information about the components in your design to process and generates the relevant code.

Here's a list of the information that Monday Hero can process effectively to give you the best results. The unsupported features are still under development, so stay tuned for the updates!

Colors

When you export an artboard from Figma to Monday Hero, it identifies all the colors used in the design and saves them in HEX and RGB notations along with their opacity values.

Colors are listed in the 'Colors' menu at the left of the screen.

Generated Code:

iOS

import UIKit

extension UIColor {
	@nonobjc class var anchor: UIColor {
		return UIColor(red: 58.0 / 255.0, green: 67.0 / 255.0, blue: 79.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var cloud: UIColor {
		return UIColor(red: 179.0 / 255.0, green: 191.0 / 255.0, blue: 208.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var daisy: UIColor {
		return UIColor(red: 255.0 / 255.0, green: 255.0 / 255.0, blue: 255.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var pewter: UIColor {
		return UIColor(red: 92.0 / 255.0, green: 105.0 / 255.0, blue: 121.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var salt: UIColor {
		return UIColor(red: 230.0 / 255.0, green: 230.0 / 255.0, blue: 230.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var silver: UIColor {
		return UIColor(red: 168.0 / 255.0, green: 182.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0)
	}

	@nonobjc class var spruce: UIColor {
		return UIColor(red: 50.0 / 255.0, green: 59.0 / 255.0, blue: 69.0 / 255.0, alpha: 1.0)
	}

}

Check out the following directory to access the colors file generated by Monday Hero:

/ProjectName/Styles/Colors.swift

Flutter

import 'package:flutter/material.dart';

abstract class MHAppColors {
  Color get anchor => const Color(0xff3a434f);
  Color get cloud => const Color(0xffb3bfd0);
  Color get daisy => const Color(0xffffffff);
  Color get pewter => const Color(0xff5c6979);
  Color get salt => const Color(0xffe6e6e6);
  Color get silver => const Color(0xffa8b6c8);
  Color get spruce => const Color(0xff323b45);
}

Check out the following directory to access the colors file generated by Monday Hero:

/ProjectName/lib/theme/mh_generated/mh_app_colors.dart

Text Styles

If your design contains text, you can get the relevant code that defines the text's font family, size and weight with Monday Hero.

Text properties are listed in the 'Text Styles' menu at the left of the screen.

• Different kinds of weights in fonts such as normal, bold, and italic are supported in Monday Hero.

• Underlined and strikethrough texts along with adding hyperlink is not supported in Monday Hero.

If your design includes custom fonts that aren't built-in into the system, you need to upload the missing fonts in .ttf or .otf format. Monday Hero processes the provided font files to give you the best result.

Uploading custom fonts to Monday Hero

Generated Code:

iOS

import UIKit

extension UIFont {
	class var textStyle: UIFont {
		return UIFont(name: "HelveticaNeue", size: 12.0) ?? UIFont.systemFont(ofSize: 12.0)
	}

	class var textStyle2: UIFont {
		return UIFont(name: "HelveticaNeue-Bold", size: 14.0) ?? UIFont.systemFont(ofSize: 14.0)
	}

	class var textStyle3: UIFont {
		return UIFont(name: "HelveticaNeue", size: 14.0) ?? UIFont.systemFont(ofSize: 14.0)
	}

	class var textStyle4: UIFont {
		return UIFont(name: "HelveticaNeue-Bold", size: 16.0) ?? UIFont.systemFont(ofSize: 16.0)
	}

}

Check out the following directory to access the fonts file generated by Monday Hero:

/ProjectName/Styles/Fonts.swift

Flutter

import 'package:flutter/material.dart';

abstract class MHAppTextStyles {
  TextStyle textStyle({Color? color}) => TextStyle(
    fontSize: 12.0,
    fontFamily: "HelveticaNeue",
    color: color);
  TextStyle textStyle2({Color? color}) => TextStyle(
    fontSize: 14.0,
    fontFamily: "HelveticaNeue-Bold",
    color: color);
  TextStyle textStyle3({Color? color}) => TextStyle(
    fontSize: 14.0,
    fontFamily: "HelveticaNeue",
    color: color);
  TextStyle textStyle4({Color? color}) => TextStyle(
    fontSize: 16.0,
    fontFamily: "HelveticaNeue-Bold",
    color: color);
}

Check out the following directory to access the fonts file generated by Monday Hero:

/ProjectName/lib/theme/mh_generated/mh_app_text_styles.dart

Borders

When you apply borders to an image, you can change its color, weight, distribution, side, and endpoint properties from Figma. With Monday Hero, you can get the relevant code of these properties.

Monday Hero generates the code according to border properties at Figma.

Shadow and Blur Effects

You can add blur and shadow effects on Figma to add aesthetics and functionality to your designs. Figma allows you to add drop shadow, inner shadow, layer blur, and background blur effects. You can choose your desired effect with targeted properties and Monday Hero can generate the relevant code for all of them.

Adding the drop shadow effect

Assets

In Figma, you can export the assets as PNG, JPG, SVG, and PDF. Monday Hero allows you to export the same assets as PNG or PDF to use in your projects.

Asset format can be selected from the 'Settings' panel.

Gradients

Figma has different fill options like linear, radial, angular, and diamond to create the gradient effect. Unfortunately, Monday Hero doesn't support these gradient features. That's why, when you're uploading a design to Monday Hero, please be sure that you only use the 'solid fill' option.

Only solid fill option is supported in Monday Hero.

Animations

Animations in Figma are not a supported feature in Monday Hero. That's why, please only upload designs with no animation.