Visión general de los Sistemas de Diseño
Anatomía de un Sistema de Diseño
Fundamentos de diseño para Figma: lo que necesitas saber antes de comenzar
¿Cómo crear un sistema de diseño? Proceso, principios y flujo de trabajo
Neo Brutalismo: tendencias de diseño y proyecto del curso
Taller Creativo: Nombramiento de nuestro Sistema de Diseño
Conceptos y recursos importantes en Sistemas de diseño
Guía de Estilos con Figma
Design Tokens: cómo y cuándo usarlos
Cómo calcular escalas tipográficas matemáticamente
Guía de Tipografías en Figma: tamaños, escalas y tokens
Cómo escoger colores: psicología, pautas y accesibilidad
Guía de Colores en Figma
Espaciado y elevación
Guía de espaciado y elevación en Figma
Guía de iconos e ilustraciones en Figma
Cómo Documentar Sistemas de Diseño
Librería de componentes
Atomic Design
Arquitectura y auditoría de componentes
Átomo: botón y variantes
Molécula: card responsiva y variantes
Molécula: header responsivo y variantes
Organismo: hero y variantes
Publicando la librería de componentes
Reto: template y páginas
Implementación y medición
Cómo vender y medir un Sistema de Diseño
Mi experiencia creando Sistemas de Diseño (desde cero) en Startups
Toma el Curso de Sistemas de Diseño con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
¿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.
-
Botones: Definir sus variantes de tamaño, estilo y estado.
- Tamaño: small, medium, large - Estilo: fill, outline - Estado: active, hover -
Tarjetas: Incorporar variantes de tamaño y estado.
- Tamaño: medium, small - Estado: active, hover -
Encabezados (Headers): Identificar si tienen CTA (Call to Action).
- Tipo: simple, with CTA -
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
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 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?