🧠 Antes de empezar a construir en Figma Make, necesitas una base clara: tus guidelines.
En el nuevo tutorial te enseño cómo crearlas paso a paso: cómo definir los frameworks CSS, los breakpoints, los estilos y los tokens de color que marcarán el tono de todo tu proyecto.
Cómo crear nuevas páginas, añadir las imágenes y la información de tus diseños
Cómo mostrar tu nuevo proyecto en la home de tu portfolio UX Si ya estás diseñando tu portfolio y quieres que empiece a funcionar, este tutorial te va a servir muchísimo.
1️⃣ Cómo copiar y pegar de Figma Make a Figma Design
- Copiar y pegar - Copiar Dropdown - Copiar distintos breakpoints - Cómo se pegan los Auto Layout? - Cómo se pegan los Grids? - Cómo se pegan las Constraints? - Cómo se pegan los Components?
Es la escaleta que usé en el tutorial de ayer para exprimir la nueva función que Figma Make ofrece al usuario para llevar a Figma Design los desarrollos que hizo en Make.
Ese es el salto: pasar de ser “solo diseñador” a empezar a pensar como un Designer Engineer, alguien que cruza la frontera entre diseño y desarrollo y sabe llevar un componente de la idea a la práctica.
Pero ojo: no nos quedamos en lo que la IA genera. Lo vamos a revisar con la comunidad y con UX fomo, para dejarlo todo listo cuando llegue a producción.
La gracia no está solo en montarlos con la IA, sino en el enfoque: aplicar Atomic Design en el vibe coding. Ya sabes… entender cómo cada átomo se convierte en molécula, y luego en organismo, para que el proyecto sea realmente escalable.
Seguimos haciendo Atomic Design con Figma Make, creando cuatro componentes: ContentHeader, Link, Breadcrumbs y Badge, que formarán parte de la estructura.
