Figma y atomic design

¿Qué es Figma?

Figma es una herramienta de diseño y prototipado de interfaces de usuario (UI/UX) basada en la nube. Permite a diseñadores y equipos de trabajo crear, editar y colaborar en tiempo real en proyectos de diseño, como aplicaciones móviles, sitios web y software.

¿Qué es el Atomic Design?

Atomic Design es un modo de diseñar aplicaciones y sitios web, comenzando desde lo más particular a lo más general con el objetivo de poder cambiar de forma flexible y rápida cualquier aspecto del diseño de una aplicación manteniendo la consistencia a lo largo de todo el sistema.

La metodología Atomic Design fue teorizada por el diseñador web estadounidense Brad Frost en su libro titulado Atomic Design. Tras su publicación, el paradigma de diseñar productos paso de diseñar por pantallas a diseñar por componentes.

1. Átomos: Son los elementos indivisibles del diseño.
   1. Tipografía
   2. Colores
   3. Iconos
   4. Variables básicas (como espacios o tamaños)
   5. Etiquetas
2. Moléculas: Son grupos de átomos que se combinan para formar componentes funcionales.
   1. Botones con texto
   2. Botones con icono
   3. Inputs con label
   4. Campos de búsqueda (Input + Botón)
3. Organismos: Son componentes más complejos que combinan moléculas y/o átomos para formar secciones funcionales de la interfaz.
   1. Encabezados
   2. Cards
4. Plantillas: Son diseños que establecen la estructura y el layout de la página utilizando organismos.
5. Páginas: Son instancias específicas de las plantillas con contenido real. Permiten probar y validar cómo se ven los elementos en un entorno real.

Beneficios del Atomic Design

• Facilita la reutilización de componentes.
• Mejora la coherencia visual y funcional del sistema.
• Facilita el mantenimiento y escalabilidad del diseño.
• Potencia el trabajo colaborativo entre equipos de diseño y desarrollo.

Tutoriales Figma en español

Existen numerosos tutoriales de Figma en español. De los que he podido ver recomiendo ver el siguiente vídeo (muy completo):

Preguntas sobre el vídeo:

¿En qué partes se divide un design system que se usa OscarRGB en el vídeo?

1. Átomos
   1. Colores
   2. Tipografía
   3. Grids
   4. Iconos
   5. Sombras
2. Moléculas
   1. Botones
3. Organismos
   1. Componentes
   2. Tabs
   3. Header
   4. Listas
   5. Inputs
4. Plantillas
   1. Login
   2. Registro
   3. Perfil

¿Qué es un wireframe?

Un wireframe es una representación visual esquemática de la estructura básica de una página web o aplicación. Su propósito principal es mostrar cómo se distribuirán los elementos clave en la interfaz, sin enfocarse en aspectos de diseño gráfico como colores, tipografías o imágenes detalladas.

Y el siguiente curso básico:

• Figma Basics (Español) - Primeros pasos en Figma para empezar a utilizar las herramientas principales de Figma.

Si descubres un tutorial/curso gratuito que creas que merece la pena, por favor déjalo en los comentarios de abajo o házmelo saber de algún modo para incluirlo.

(Voluntario) Cursos oficiales de Figma en inglés

En el este enlace tienes disponibles los cursos oficiales que proporciona Figma.

(Voluntario) Artículos en inglés

• Mitos en la experiencia de usuario (inglés)
• Principios de usabilidad web de Jacob Nielsen y el diseño UX
• https://www.nosolousabilidad.com/articulos/eye-tracking.htm
• https://madabelvid.wordpress.com/2016/06/15/la-aportacion-del-eyetracking-en-el-sector-de-usabilidad/
• https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
• https://www.eniun.com/usabilidad-diseno-aplicaciones-reglas-principios/
• https://www.figma.com