Descripción general de los componentes

    El sistema Indigo.Design potencia su flujo de trabajo de diseño con más de 60 componentes de interfaz de usuario que también se asignan a Ignite UI for Angular. La mayoría de los componentes están optimizados para el diseño y desarrollo web responsivo, proporcionando varias capacidades de creación de plantillas a través del diseño automático en Figma (diseño inteligente en Sketch) y reglas de cambio de tamaño. En Adobe XD, hemos ampliado esto mediante el uso de pilas y cuadrículas de repetición, pero también hemos agregado varios estados de interacción para elegir al diseñar experiencias interactivas. Todo esto agiliza el diseño y desarrollo de aplicaciones, permitiendo crear una gran variedad de escenarios de interfaz de usuario con las bibliotecas y, posteriormente, a través de la generación de código, estar disponibles como Ignite UI for Angular.

    Warning

    Para garantizar el uso adecuado de los componentes de las bibliotecas del sistema Indigo.Design y evitar posibles problemas, se recomienda no colocar los siguientes elementos en mesas de trabajo y marcos:

    • Símbolos y componentes designados como_Overrides (Sketch y Adobe XD)
    • Base components (Figma)

    Estos elementos no tienen estados de componentes y no se consideran componentes completos.

    Figma

    Dentro de las bibliotecas Figma, hay una página llamada 🧩 Components, debajo de la cual hay una lista de todos los componentes incluidos en el kit. Cada componente tiene su página, donde se encuentran todos los componentes base relevantes. Una vez que haga que una biblioteca esté disponible en su archivo de diseño, podrá acceder fácilmente a sus recursos desde las barras laterales y arrastrar componentes al lienzo desde el panel Recursos en la barra lateral izquierda. Después de colocar un componente en el espacio de trabajo y seleccionarlo, puede ver sus propiedades disponibles en la barra lateral derecha e incluso intercambiar instancias directamente desde allí. A continuación puede ver algunos de los componentes, como los diferentes tipos de botones, grupos de botones y elementos de formulario como casilla de verificación, interruptor y grupo de radio.

    Sketch

    Las bibliotecas Sketch tienen una página 🧩 Components que contiene todos los componentes y símbolos relacionados con ellos. Al seleccionar una instancia de símbolo, a través de la sección Anular en el panel derecho, se puede cambiar el contenido interno, por ejemplo, estados habilitados/deshabilitados, íconos, colores, etc. A continuación se muestra una pequeña parte que muestra algunos de los componentes y símbolos, como los diferentes tipos de botones, grupos de botones y elementos de formulario como casilla de verificación, interruptor y grupo de radio.

    Adobe XD

    En la biblioteca de Adobe XD puedes encontrar los 🧩 Components en la columna del medio. Aquí, los distintos estados de un componente se pueden cambiar desde el panel derecho. Además, hemos utilizado Stack and Padding para alinear y distribuir elementos vertical u horizontalmente y cambiar su posición. Cuando desee intercambiar un componente anidado por otro, simplemente puede arrastrarlo desde el panel Libraries y soltarlo encima del actual para reemplazarlo. También notarás que algunos componentes, como Grid, por ejemplo, utilizan una Repeat Grid para acelerar la configuración. A continuación puede encontrar algunos de los componentes, como diferentes tipos de botones, grupos de botones y elementos de formulario como casilla de verificación, interruptor y grupo de radio.

    Warning

    Separar un componente de la biblioteca en Sketch hace imposible aplicar automáticamente actualizaciones de versiones posteriores de Design System y puede afectar la capacidad de generación de código del componente. Los servicios de generación de código se basan en capas 🚫 metadata especialmente designadas que contienen descripciones de metadatos del estado, la plantilla y otras propiedades del componente. En las bibliotecas Figma, hay una capa adicional colocada en cada componente llamado 🚫 componentVersion que contiene la versión, lo que ayuda a generar código correctamente.

    Desagrupar un componente o patrón de la biblioteca de Adobe XD tiene implicaciones aún peores porque convierte todos los componentes anidados en grupos y rompe el servicio de generación de código para el componente, ya que no puede rastrear correctamente su estructura. Puede realizar cualquier ajuste de estado, diseño y estilo en Adobe XD sin desagrupar un componente, por lo que le recomendamos que mantenga todos los componentes en sus mesas de trabajo.

    Todos los componentes del sistema Indigo.Design están construidos sobre bases de estilo rígidas que le permiten aprovechar un mecanismo elaborado para tematizar y personalizar su interfaz de usuario.

    Warning

    Al cambiar un glifo de icono por otro arrastrándolo desde el panel Libraries en Adobe XD, a veces el nombre de su capa cambiará de 🔣 Icon al nombre del símbolo_Overrides/~. Cuando esto suceda, debe cambiarle el nombre al nombre de la capa original antes de que se intercambiara el elemento para garantizar una generación exitosa del código.

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.