Atomic Design en Figma

Me encantaron los ejemplos que pones en esta lección.

Muy práctico y replicable.

Lo aplicaré asap.

Metología Atomic Design

Atomic design es una metodología de diseño que organiza los elementos de una interfaz de usuario en átomos, moléculas, organismos, plantillas y páginas

Ayuda a crear interfaces de usuario más consistentes, flexibles y escalables

Para profundizar más se recomienda leer el libro: Atomic design - by: Brad Frost


## Clase #02: **Atomic Design en Figma** ### Atomic Design by Brad Frost Metodología que consiste en organizar los elementos de mi interfaz del más pequeño al más grande, en átomos, moléculas, organismos, plantillas y páginas. Esto facilita la consistencia, flexibilidad y escalabilidad del producto. \<aside> 💡 **Token:** antes que el átomo (protón, neutrón, electrón): puede ser una tipografía, un espaciado o un color hexadecimal. \</aside> T : texto → “Enviar”. Shift + A → Autolayout. Aplicar “Hug” vertical y horizontal en el Frame, acomodar colores (azul #5555FF). Aplicamos los padding (admiten operaciones matemáticas) teniendo en cuenta que vamos a trabajar las dimensiones con base 8. De manera similar agregamos un Título y un Contenido (generado con Lorem Ipsum generator “plugin”). Aplicar autolayout al contenido y ajustar. Para insertar imágenes usar el plugin de Unsplash. Luego de tener todos los átomos listos, ir armando contenedores dentro de contenedores con autolayout. Para incluir elementos que no queremos que obedezcan al autolayout del resto, arrastramos cerca de la posición deseada para que pasen a formar parte del flujo del autolayout, pero le activamos la opción “Absolute Position” en el inspector.

Así quedó 

Lo explica muy facil, pero cuando hizo la card siento que no quedó bien visualmente, pero para un ejemplo está bien.

Una pregunta, es este el primer curso de Figma en Platzi? Porque cuando busqué Figma me apareció primero este, pero en esta primera clase noto que no explica algunos detalles que aunque los puedo intuir, no se explican como lo es el duplicar algún elemento. De antemano, muchas gracias

Gracias por compartir tus conocimientos

Estoy tomando este curso para recordar algunas cosas. Pero estooooo fue una genialidad.

😊


Estoy intentando agrupar la imagen con el resto de la card, tal cual el ejemplo, pero al parecer le han hecho cambios al figma donde ahora me sale un borde en la imagen que no me permite obtener el mismo resultado. Sería muy bueno si se actualiza al nuevo figma 2024.

Jajaja dios mio habla muy rapidooo! Pero esta buenisima la primera clase!

¡¡Me encantó!! al grano, entendible y bonito.

### **Puntos importantes de la clase:** 1. **Atomic Design**: * **Concepto**: Organizar el diseño en átomos, moléculas, organismos y páginas. * **Átomos**: Elementos más simples, como un botón. * **Moléculas**: Combinaciones de átomos, como un formulario. * **Organismos**: Conjuntos de moléculas, como una tarjeta de producto. * **Páginas**: Estructura final con todos los organismos. 2. **Tokens**: * Variables pequeñas que definen propiedades como colores, tamaños de texto y espaciados. * Figma no soporta tokens de manera nativa, pero hay plugins para ello. 3. **Auto Layout**: * Herramienta que permite que los elementos se acomoden automáticamente según el contenido. * Ideal para mantener un diseño fluido y responsive. * Permite ajustar automáticamente botones, títulos y textos según el tamaño del contenido. 4. **Plugins en Figma**: * Uso de plugins como generadores de texto (Lorem Ipsum) y bancos de imágenes gratuitas (Unsplash). * Los plugins ayudan a optimizar el flujo de trabajo. 5. **Border Radius**: * Ajustar el radio de los bordes en elementos como botones o imágenes. * Se puede aplicar manualmente o a través del panel derecho de Figma. 6. **Posición Absoluta**: * Herramienta que permite fijar un elemento en un lugar específico, sin que se mueva con el resto del contenido. * Utilizada para elementos como badges dentro de una tarjeta. 7. **Base 8 en la retícula**: * El curso sigue la regla de base 8 para espaciados, lo que asegura consistencia y escalabilidad en el diseño. 8. **Matemáticas en Figma**: * Puedes hacer cálculos matemáticos simples dentro de Figma, como multiplicaciones para definir tamaños o espaciados (por ejemplo, 8 \* 3 para calcular 24 píxeles).

Que genial la opción de Absolute position, hice 2 cursos básicos y en varios momentos haciendo los proyectos necesité está opción jajaja

Me encantó

```js // Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design'| // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String } }, {timestamps: true}) // Model export default untitled.model(collection, schema, collection) ```// Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design'| // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String } }, {timestamps: true}) // Model export default untitled.model(collection, schema, collection)

Si no aparece space between puedes utilizar Auto desde Auto layout

Excelente el curso, muy práctico. Vengo del curso básico y este me parece genial para continuar aprendiendo. Un pregunta... En el panel de la izquierda donde se muestran las páginas que se van creado ¿cómo le hago para que me queden en una lista anidada, es decir, para indicar que una página "es hija" o "está dentro" de una a un nivel superior?

Me encanto la clase, gracias Carmen Ansio, les comparto mi trabajo.

¡Wow! He visto otros tutoriales y cursos de FIGMA, algunos hacían ver todo muy complicado o tedioso, pero tu explicación fue increíble y muy clara.

El absolute position me acaba de salvar la vida, wow.

Simplemente genial muchas gracias Carmen🎨🚀✨

Me encanta lo bien explicado que está esta clase! Muy muy práctica 10/10 :D

Aprendi más en estos 10 minutos que en 4 meses con otros contenidos <3


Una duda, al realizar el auto layout del párrafo (min5:05) Al arrastrar la caja se hace desde la caja del texto en si ¿no? Porque yo arrastre desde la caja externa que crea el auto layout (frame) y me responde mal, no se divide en líneas y el contenido de la caja se desborda.

excelente repasar estos temas, gracias por actualizar.


Soy súper fan de Carmen, no puedo dejar pasar un curso de ella!

Una duda, ¿por qué al boton amarillo no se le incluyó en el autolayout?

```js <menu class="menu"> <button class="menu__item active" style="--bgColorItem: #ff8c00;" > <svg class="icon" viewBox="0 0 24 24"> <path d="M3.8,6.6h16.4"/> <path d="M20.2,12.1H3.8"/> <path d="M3.8,17.5h16.4"/> </svg> </button> <button class="menu__item" style="--bgColorItem: #f54888;"> <svg class="icon" viewBox="0 0 24 24"> <path d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8 C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"/> <path d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/> </svg> </button> <button class="menu__item" style="--bgColorItem: #4343f5;" > <svg class="icon" viewBox="0 0 24 24"> <path d="M3.4,11.9l8.8,4.4l8.4-4.4"/> <path d="M3.4,16.2l8.8,4.5l8.4-4.5"/> <path d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/> </button> <button class="menu__item" style="--bgColorItem: #e0b115;" > <svg class="icon" viewBox="0 0 24 24" > <path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1 C3.9,4.4,4.4,3.9,5.1,3.9z"/> <path d="M4.2,9.3h15.6"/> <path d="M9.1,9.5v10.3"/> </button> <button class="menu__item" style="--bgColorItem:#65ddb7;"> <svg class="icon" viewBox="0 0 24 24" > <path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1 C3.9,4.4,4.4,3.9,5.1,3.9z"/> <path d="M5.5,20l9.9-9.9l4.7,4.7"/> <path d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/> </svg> </button> </menu> Resources ````<menu class="menu">` ` <button class="menu__item active" style="--bgColorItem: #ff8c00;" >` ` <svg class="icon" viewBox="0 0 24 24">` ` <path d="M3.8,6.6h16.4"/>` ` <path d="M20.2,12.1H3.8"/>` ` <path d="M3.8,17.5h16.4"/>` ` </svg>` ` </button>` ` <button class="menu__item" style="--bgColorItem: #f54888;">` ` <svg class="icon" viewBox="0 0 24 24">` ` <path d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8` ` C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"/>` ` <path d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/>` ` </svg>` ` </button>` ` <button class="menu__item" style="--bgColorItem: #4343f5;" >` ` <svg class="icon" viewBox="0 0 24 24">` ` <path d="M3.4,11.9l8.8,4.4l8.4-4.4"/>` ` <path d="M3.4,16.2l8.8,4.5l8.4-4.5"/>` ` <path d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/>` ` </button>` ` <button class="menu__item" style="--bgColorItem: #e0b115;" >` ` <svg class="icon" viewBox="0 0 24 24" >` ` <path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1` ` C3.9,4.4,4.4,3.9,5.1,3.9z"/>` ` <path d="M4.2,9.3h15.6"/>` ` <path d="M9.1,9.5v10.3"/>` ` </button>` ` <button class="menu__item" style="--bgColorItem:#65ddb7;">` ` <svg class="icon" viewBox="0 0 24 24" >` ` <path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1` ` C3.9,4.4,4.4,3.9,5.1,3.9z"/>` ` <path d="M5.5,20l9.9-9.9l4.7,4.7"/>` ` <path d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/>` ` </svg>` ` </button>` ` ` ` </menu>` ` ` ### ### Resources