Empezando
Indigo.Design es una plataforma unificada para el diseño visual, la creación de prototipos de UX, la generación de código y el desarrollo de aplicaciones. Está dirigida a equipos de diseño y desarrollo que buscan entregar aplicaciones con una calidad de píxeles perfecta lo más rápido posible, sin perder el foco en la UX.

Flujo de trabajo de diseño a desarrollo
Indigo.Design platform consists of three main modules - UI Kits, Prototypes/Usability Studies and App Builder. The UI Kits (Figma) map to real UI controls and components, with tooling that delivers productivity. Each UI Kit implements and follows strictly - Colors, Typography, Sizes and etc. While Prototypes and Usability Studies help you measure and improve the user experience of a product or feature. The App Builder enables users build their own applications in a web environment and generate Angular, React, Blazor or Web Components code from it.
How does this work?
Indigo.Design ofrece capacidades clave para respaldar el flujo de trabajo desde el diseño hasta el desarrollo:
- Create designs in Figma with the
Indigo.Design System
- Comparta como prototipos para probar y colaborar con los usuarios a través de
cloud.indigo.design
- Design your app in
App Builder
using a Figma file and import it via the Plugin or directly use the App Builder. - Generate Angular, Blazor, React or Web components code from your application in the App Builder, using its
Code Generation
service.
Indigo.Design System
The design system is a set of libraries for Figma, containing various assets, styles, components, and patterns. Тhe UI components allow you to create intricate user interfaces providing you with the flexibility to use various states and templates. To customize their appearance you may leverage the pre-made palettes, typographies, shadows, icons, and illustrations. And finally, with the provided collection of patterns, such as product details layouts, various forms, and pricing tables among others, you are able to streamline app design assuring the application of best practices in UI and interaction design.

Kit de interfaz de usuario Figma para Material
Figma UI Kits
Our Figma Indigo.Design UI Kits map to our Ignite UI for Angular, Blazor, React and Web Components UI toolset to completely redefine design-development processes. You now get a robust set of components, patterns, styling, and customization options, enabling you to import prototypes or any type of screen designed in Figma and transform it into clean code. The best part is that all static designs become interactive, responsive apps with real UI components, branding, and styling – in a single click.

Kit de interfaz de usuario Figma
You can download our Indigo.Design Figma Plugin, Indigo.Design UI kits and sample apps from the Download Assets page.
O a través de los enlaces directos a continuación:
There is a difference in functionality when using the UI kits as a free Figma user versus a Pro user. - topic
Design apps with App Builder
The App Builder allows you to generate a single-page Figma design file as a starting point or build one from scratch. It offers a range of powerful features, including real UI components, global theming, and integration with external data sources.

Lienzo de diseño
Aprende más:
- Compilar una aplicación en el App Builder- Introducción.
- App Builder descripción general de la interfaz.
- Diseños flexibles.
- Componentes.
- Interacciones.
- SPA y navegación.
- Compartir y obtener una vista previa de aplicaciones.
Crear aplicación a partir de una aplicación de muestra:

Aplicaciones de muestra
Generate Code
Once ready with the design of your application in App Builder, you can easily generate Angular, Blazor, React or Web Components code from it. The generated code can be directly uploaded to a repository in GitHub or downloaded locally as a file package. The components used in the generated application are powered by Ignite UI for Angular UI framework
Aprende más:
- Generating code from an application in App Builder
- Generación de código Blazor
- Web Components generación de código
If you are brand new to Indigo.Design learn more about how to create your first frame with it: