Design-to-Code App Builder story

    App Builder enables you to go from Design to Code in a single click. Import Figma, Sketch and Adobe XD files and create Apps with ease. Use the Indigo.Design System plugins directly inside Figma, Sketch and Adobe XD to deliver custom themes, import images assets, and ensure all components are mapped one-to-one with controls from the App Builder Toolbox.

    Indigo.Design UI Kit

    Note

    You can download our UI Kits, Plugins and Sample Apps from the Download Assets page. or though direct links.

    Indigo.Design System

    The Indigo.Design System uniquely combines UI Kits that map to real UI controls and components, with tooling that delivers unprecedented productivity helping digital product teams go from pixel-perfect design to production-ready code. Anything you design can be turned into real, usable code, simplifying the designer-developer handoff.

    What is a Design System?

    Design systems are usually described as a set of design principles and assets that translate to consistency in the way you build user interfaces. The three core advantages of using a design system are:

    • Tunes into a specific usage context and app domain.
    • Works as an inventory of UX design patterns and brand style guidance.
    • Speeds up the design process and significantly improves consistency.

    Turn Your Designs into Code

    Use file import or your favorite design tool.

    File import

    Below are the 4 simple steps to get from Design to Code with the App Builder with simple drag & drop.

    Step 1: Click New App from the Indigo Cloud or App Builder Home Screen

    New app

    Step 2: Drag your Sketch File into the "Create from existing design" Drop Area

    Import Designs

    Step 3: Review the Design in the Cloud IDE

    App Preview

    Step 4: Review or Download your Angular Code

    Download the application

    Publish via Plugin

    The plugin will help you to publish your designs into App Builder. You can download it by following these steps:

    1. Open App Builder
    2. Click on "Crete new application"
    3. Click on "Get assets for.."

    Available assets

    Now you can start using the plugin.

    Figma Plugin

    Figma Plugin

    Adobe XD Plugin

    Adobe XD Plugin Create App

    Sketch Plugin

    Sketch Plugin Create App

    Download Assets

    You can download the Plugins, UI kits and sample apps from the Download Assets page..

    Or through the direct links below:

    Additional Resources