No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
2 Hrs
11 Min
5 Seg

Arquitectura y auditoría de componentes

17/26
Recursos

¿Qué es la arquitectura de componentes y por qué es importante?

La arquitectura de componentes es una práctica esencial para el desarrollo de interfaces de usuario. Basada en la metodología Atomic Design, nos permite definir y entender las características clave de los componentes, como lo son las variantes en Figma. Estas características pueden incluir tamaño, estilo y estado. Por ejemplo, para un botón, se pueden definir variantes de tamaño (pequeño, mediano, grande), estilo (relleno, contorno) y estado (activo, hover). Estas clarificaciones son cruciales para el diseño efectivo y la comunicación dentro del equipo.

¿Por qué realizar una auditoría de componentes?

La auditoría de componentes es un proceso de documentación que nos ayuda a entender el estado actual de nuestros componentes. Esta documentación es vital para:

  • Comunicar al equipo el estado y disponibilidad de componentes.
  • Priorización en el desarrollo de componentes, estableciendo qué componentes se crearán primero.
  • Clasificación de componentes según su categoría atómica: átomos, moléculas, organismos.
  • Supervisar la fase de diseño y desarrollo de cada componente.
  • Integrar comentarios y estados durante la fase de documentación.

Recomendación: Utilizar herramientas como Excel o Notion para organizar y compartir el estado de los componentes.

¿Cómo organizar la arquitectura en Figma?

Al organizar componentes en Figma, es importante establecer claramente la arquitectura para cada elemento, como botones, tarjetas, encabezados y secciones hero.

  1. Botones: Definir sus variantes de tamaño, estilo y estado.

    - Tamaño: small, medium, large
    - Estilo: fill, outline
    - Estado: active, hover
    
  2. Tarjetas: Incorporar variantes de tamaño y estado.

    - Tamaño: medium, small
    - Estado: active, hover
    
  3. Encabezados (Headers): Identificar si tienen CTA (Call to Action).

    - Tipo: simple, with CTA
    
  4. Secciones hero: Diferenciar entre dispositivos móviles y de escritorio.

    - Device: mobile, desktop
    

La implementación de estas definiciones en Figma no solo guiará el trabajo de diseño, sino que también creará una base sólida para el desarrollo de componentes consistentes y eficaces.

¿Cómo garantizar la coherencia y eficiencia en el diseño?

Para asegurar un diseño coherente, es esencial aplicar prácticas como el uso de auto-layout en Figma. Esto permite:

  • Mantener alineamientos y espaciados uniformes.
  • Facilitar el trabajo colaborativo al tener una estructura clara.
  • Evitar deudas técnicas futuras, asegurando que el sistema de diseño sea armónico y profesional.

A través de estas medidas, se puede utilizar Figma de manera eficaz para establecer una base que permita una fácil implementación de variantes y la posterior creación de componentes.

Al comprender y desarrollar una arquitectura de componentes clara, no solo se facilita el proceso de diseño, sino que también se asegura una comunicación efectiva y una implementación rápida y bien estructurada. ¡Adelante en tu viaje de diseño!

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Figma ya no me deja exportar componentes por su restricción.
Estas clases deberian ser obligatorias para cualquier programador backend :c

Definir las variantes de un compoentente por ejemplo en un boton, definir “Size”, style (Filled), state (Active).

Estado de los compoennte con el fin de:

  • Orden de prioridades
  • categoria atomica
  • su fase en diseno
  • su fase en desarrollo
  • su fase de documentacion.

Esta auditoria seria genial, hacerlo en un notion, excel, etc.

En la arquitectura podriamos definir, los tamanos, estilos, estados, si va en mobile o desktop, si lleva CTA o no, etc.
.
.
Martin Coronel - Product Designer
Linkedin

Sosteniendo control presionado y clickeando sobre el elemento es una manera rapida de selecionarlo dentro del autolayout, en este caso para eliminarlo.

# ****Arquitectura y Auditoría de componentes**** **Características →Variantes** Por ejemplo, para un botón tenemos: **Tamaño, Estilo y Estado.** **Auditoria de Componentes** Estado de los componentes con el fin de: - **Orden de Prioridades:** Que vamos a crear primero. - **Su categoría atómica:** Si son átomos, moléculas u organismos - **Su fase en diseño:** Como nosotros podemos estar y en que proceso. - **Su fase en desarrollo:** Si queremos incluir a la parte de desarrollo para que lo tome y lo trabaje.

Me encanta como hace ver todo tan sencillo!!! Que gran curso 😃