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 plataforma consta de tres módulos principales: kits de interfaz de usuario, prototipos/estudios de usabilidad y App Builder. Los kits de interfaz de usuario (Sketch, Figma, XD) se asignan a controles y componentes de interfaz de usuario reales, con herramientas que brindan productividad. Cada kit de interfaz de usuario implementa y sigue estrictamente: colores, tipografía, tamaños, etc. Mientras que los Prototipos y los Estudios de Usabilidad te ayudan a medir y mejorar la experiencia de usuario de un producto o característica. El App Builder permite a los usuarios crear sus propias aplicaciones en un entorno web y generar Angular, React, Blazor o Web Components código a partir de él.

How does this work?

Indigo.Design ofrece capacidades clave para respaldar el flujo de trabajo desde el diseño hasta el desarrollo:

Crea diseños en Figma, Sketch o Adobe XD con el atributo Indigo.Design System
Comparta como prototipos para probar y colaborar con los usuarios a través de cloud.indigo.design
Diseñe su aplicación utilizando Ignite UI App Builder un archivo Figma, Sketch o Adobe XD e impórtelo a través del complemento o use directamente el Ignite UI App Builder.
Genere Angular, Blazor, React o código de componentes web de su aplicación en el Ignite UI App Builder, utilizando el servicio it Code Generation.

Indigo.Design System

El sistema de diseño es un conjunto de bibliotecas para Figma, Sketch y Adobe XD, que contiene varios activos, estilos, componentes y patrones. Los componentes de la interfaz de usuario le permiten crear interfaces de usuario complejas, lo que le brinda la flexibilidad para usar varios estados y plantillas. Para personalizar su apariencia, puede aprovechar las paletas, tipografías, sombras, íconos e ilustraciones prefabricadas. Y, finalmente, con la colección de patrones proporcionada, como diseños de detalles de productos, varios formularios y tablas de precios, entre otros, puede optimizar el diseño de aplicaciones asegurando la aplicación de las mejores prácticas en la interfaz de usuario y el diseño de interacción.

Kit de interfaz de usuario Figma para Material

Kit de interfaz de usuario Figma

El nuevo kit de interfaz de usuario de Figma Indigo.Design para Material se asigna a nuestro conjunto de herramientas de interfaz de usuario Ignite UI for Angular, Blazor y Web Components para redefinir por completo los procesos de diseño y desarrollo. Ahora obtiene un sólido conjunto de componentes, patrones, estilos y opciones de personalización, lo que le permite importar prototipos o cualquier tipo de pantalla diseñada en Figma y transformarla en código limpio. La mejor parte es que todos los diseños estáticos se convierten en aplicaciones interactivas y receptivas con componentes de interfaz de usuario, marca y estilo reales, con un solo clic.

Kit de interfaz de usuario Figma

Puede descargar el complemento Figma, el kit de interfaz de usuario y las aplicaciones de muestra desde la página de descarga de activos.

O a través de los enlaces directos a continuación:

Note

Hay una diferencia al usar el kit como usuario gratuito Figma o usuario Pro -tema

Sketch UI Kit

Indigo.Design for Sketch ofrece no uno, sino cuatro archivos de biblioteca a sus usuarios: uno para cada uno de los lenguajes de diseño que admitimos: Material, Bootstrap, Fluent UI y nuestro propio Indigo. Las cuatro bibliotecas admiten el cambio sin problemas entre el modo claro y oscuro a través del complemento Indigo.Design y funcionan con cualquiera de las paletas de colores predefinidas o personalizadas que proporciona. Con esta mejora, Sketch usuarios pueden disfrutar de un aspecto 100% nativo de sus componentes y patrones para el lenguaje de diseño de su elección.

Sketch UI Kit Cuatro temas

Puede descargar el complemento de Sketch, el kit de interfaz de usuario y las aplicaciones de muestra desde la página Descargar recursos.

O a través de los enlaces directos a continuación:

Adobe XD UI Kit

Diseñado desde cero para equipar a los diseñadores con un arsenal de herramientas moderno y fácil de usar que les permita diseñar wireframes y aplicaciones, Adobe XD es una de las plataformas de diseño de gráficos vectoriales más populares del mercado actual. Junto con las funciones de estructura alámbrica, los diseñadores pueden crear prototipos de alta fidelidad, colaborar entre equipos durante el proceso de diseño, configurar animaciones y recopilar comentarios.

Note

Descargue Adobe XD UI Kit, complemento para Adobe XD y aplicaciones de muestra

Complemento Adobe XD

Prototyping & Usability Testing

Para obtener comentarios sobre sus diseños, utilice cloud.indigo.design para importar el documento Sketch y compartirlo como un prototipo interactivo. Esto permitirá a las partes interesadas ver su prototipo en cualquier dispositivo y dar su opinión a través de comentarios.

Obtenga más información con este tema de orientación:

Crea prototipos en la nube

Si desea observar cómo los usuarios usan su prototipo para completar tareas específicas y también recopilar métricas como el tiempo de ejecución de la tarea y la tasa de finalización, configure una prueba de usabilidad utilizando el prototipo publicado.

Obtenga más información con este tema de orientación: Configurar una prueba de usuario

Design apps with App Builder

El módulo App Builder le permite diseñar una aplicación de una sola página utilizando un archivo de diseño (Figma, Sketch o Adobe XD) como punto de partida o crearlo desde cero. El App Builder incluye un conjunto de características principales, lo que permite a los usuarios utilizar componentes de interfaz de usuario reales, temas globales y fuentes de datos externas.

Lienzo de diseño

Aprende más:

Crear aplicación a partir de una aplicación de muestra:

Aplicaciones de muestra

Generate Code

Una vez que esté listo con el diseño de su aplicación en Ignite UI App Builder, puede generar fácilmente Angular, Blazor o Web Components código a partir de él. El código generado se puede cargar directamente en un repositorio en GitHub o descargarse localmente como un paquete de archivos. Los componentes utilizados en la aplicación generada se basan en Ignite UI for Angular marco de interfaz de usuario

Aprende más:

Si eres nuevo en Indigo.Design obtén más información sobre cómo crear tu primera mesa de trabajo con él: