The latest articles on Forem by micaela mendez (@micaela_mendez_41a42ca611). https://forem.com/micaela_mendez_41a42ca611 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003449%2F174d9a14-37ce-478a-97bc-5d7e08a0723b.jpg https://forem.com/micaela_mendez_41a42ca611 en micaela mendez Thu, 08 May 2025 17:24:26 +0000 https://forem.com/micaela_mendez_41a42ca611/novedades-en-figma-destacados-de-config-2025-3h0d https://forem.com/micaela_mendez_41a42ca611/novedades-en-figma-destacados-de-config-2025-3h0d <p>Ayer estuve siguiendo el encuentro de Friends of Figma en Barcelona 📆, donde exploramos los principales anuncios de Config 2025 — la conferencia anual de Figma que reúne a diseñadores, desarrolladores y equipos de todo el mundo para explorar el futuro de las herramientas de diseño.</p> <p>Para entender mejor las nuevas funciones y cómo podrían aplicarse a escenarios del mundo real, escribí este artículo 👭🏻 junto con mi hermana, <a href="https://dev.to/r0mymendez">Romi Mendez</a>. Queríamos compartir lo que encontramos más relevante de las actualizaciones presentadas ayer — junto con algunas preguntas abiertas en las que aún estamos reflexionando.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvh0p3jjaax1ss8xwhp6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvh0p3jjaax1ss8xwhp6.png" alt="Image description" width="800" height="382"></a></p> <blockquote> <p>La ilustración de portada se inspiró en los visuales mostrados durante la presentación principal de Config 2025 — especialmente las escenas conceptuales utilizadas para presentar nuevas características como Figma Sites y Make. Lo reimaginamos con un tema natural para reflejar la versatilidad y el potencial expresivo que ofrecen estas herramientas.</p> </blockquote> <h2> 1. Figma Grid </h2> <p>Figma Grid te ayuda a construir interfaces más flexibles, organizadas y precisas utilizando una estructura bidimensional basada en filas y columnas.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv6erylereeh3lzp74l7d.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv6erylereeh3lzp74l7d.png" alt="Image description" width="800" height="450"></a></p> <blockquote> <p>Imagen de origen: <a href="https://www.figma.com/blog/config-2025-recap/#figma-grid" rel="noopener noreferrer">Figma Blog</a></p> </blockquote> <h3> ¿Qué puedes hacer con Figma Grid? </h3> <ul> <li>📐 Control total sobre filas y columnas con dimensiones fijas o automáticas </li> <li>↔️ Redimensionamiento responsivo en tiempo real </li> <li>🧩 Colocación y anidamiento fáciles de elementos — o incluso cuadrículas dentro de cuadrículas </li> <li>🎨 Alineación precisa y opción para posicionamiento absoluto </li> <li>💻 Compatibilidad directa con CSS Grid en Modo Desarrollador </li> <li>💡 Ideal para crear diseños complejos sin Auto Layouts profundamente anidados</li> </ul> <h2> ¿Por qué usar Grid? </h2> <ol> <li>Diseñar componentes complejos, tableros, calendarios o galerías </li> <li>Organizar contenido de manera precisa utilizando filas y columnas </li> <li>Construir diseños responsivos sin anidar Auto Layouts </li> <li>Crear estructuras modulares que puedes reutilizar fácilmente </li> <li>Entregar diseños mapeados directamente a propiedades CSS para desarrolladores</li> </ol> <h3> Mira Grid en acción </h3> <p>¿Quieres profundizar y ver ejemplos reales? Consulta la demostración oficial de Config 2025:</p> <blockquote> <p>👉 <a href="https://youtu.be/5q8YAUTYAyk?t=3001" rel="noopener noreferrer">Mira la demostración de Grid</a></p> </blockquote> <h2> 2. Figma Sites </h2> <p>Figma Sites es una nueva herramienta para construir y publicar sitios web interactivos — directamente desde Figma, sin cambiar de herramientas.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1dvthgo0gurtvzb9dvny.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1dvthgo0gurtvzb9dvny.png" alt="Image description" width="800" height="451"></a></p> <blockquote> <p>Imagen de origen: <a href="https://www.figma.com/blog/introducing-figma-sites/" rel="noopener noreferrer">Figma Blog</a></p> </blockquote> <h3> ¿Qué puedes hacer con Figma Sites? </h3> <ul> <li>🎨 Un editor visual con puntos de interrupción integrados (escritorio, tabletas, móvil) </li> <li>🖱️ Interacciones listas para usar (hover, parallax, arrastrar, etc.) </li> <li>🧩 Integración directa con sistemas de diseño y bibliotecas </li> <li>🔎 Vista previa responsiva en vivo renderizada en HTML/CSS real </li> <li>🚀 Publicación con un solo clic </li> <li>💡 Convierte tus diseños estáticos en sitios web reales y funcionales — sin herramientas adicionales ni codificación requerida</li> </ul> <h2> ¿Por qué usar Figma Sites? </h2> <ol> <li>Construir y publicar portafolios, páginas de aterrizaje, campañas o sitios de eventos al instante </li> <li>Crear prototipos realistas sin salir de la plataforma Figma </li> <li>Diseñar sitios completamente responsivos para cualquier tamaño de pantalla </li> <li>Añadir interactividad sin escribir código </li> <li>Acelerar la validación con clientes, usuarios o equipos de contenido</li> </ol> <h3> Mira Figma Sites en acción </h3> <p>¿Quieres ver cómo funciona todo en tiempo real? Consulta la demostración oficial de Config 2025:</p> <blockquote> <p>👉 <a href="https://youtu.be/5q8YAUTYAyk?t=3810" rel="noopener noreferrer">Mira la demostración de Sites</a></p> </blockquote> <h2> 3. Figma Make </h2> <p>Figma Make es un nuevo entorno dentro de Figma que te ayuda a convertir diseños estáticos en prototipos interactivos utilizando lenguaje natural — sin necesidad de codificación.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvpr6p57wvnxgi4w21qu.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvpr6p57wvnxgi4w21qu.png" alt="Image description" width="800" height="438"></a></p> <blockquote> <p>Imagen de origen: <a href="https://www.figma.com/blog/config-2025-recap/#figma-make" rel="noopener noreferrer">Figma Blog</a></p> </blockquote> <h3> ¿Qué puedes hacer con Figma Make? </h3> <ul> <li>🧠 Prompts en lenguaje natural para generar animaciones, interacciones o lógica de interfaz </li> <li>🎮 Soporte para elementos avanzados como shaders, mundos 3D, efectos visuales o datos en tiempo real </li> <li>🎯 Herramientas como <em>Point and Edit</em> o <em>Point and Prompt</em> para cambios precisos y contextuales </li> <li>💡 Una forma más rápida de pasar de la idea a la experiencia interactiva — todo dentro de Figma</li> </ul> <h2> ¿Por qué usar Figma Make? </h2> <ol> <li>Construir prototipos funcionales sin necesidad de habilidades técnicas </li> <li>Validar ideas y flujos de usuario con interacción real </li> <li>Iterar en partes específicas del diseño sin romper sistemas visuales </li> <li>Añadir lógica, datos y comportamiento dinámico sin salir de Figma </li> <li>Explorar posibilidades creativas avanzadas, desde UI básica hasta interacciones inmersivas en 3D</li> </ol> <h3> Mira Figma Make en acción </h3> <p>¿Quieres verlo en acción? Consulta la demostración oficial de Config 2025:</p> <blockquote> <p>👉 <a href="https://youtu.be/5q8YAUTYAyk?t=4940" rel="noopener noreferrer">Mira la demostración de Make</a></p> </blockquote> <h2> 4. Figma Buzz </h2> <p>Figma Buzz es un nuevo espacio dentro de Figma para crear, editar y escalar activos de marca — como campañas, publicaciones, materiales de eventos y más — con control visual y consistencia total.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvkcjzzh48p1b0rrtbrn.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvkcjzzh48p1b0rrtbrn.png" alt="Image description" width="800" height="455"></a></p> <blockquote> <p>Imagen de origen: <a href="https://www.figma.com/blog/introducing-figma-buzz/" rel="noopener noreferrer">Figma Blog</a></p> </blockquote> <h3> ¿Qué puedes hacer con Figma Buzz? </h3> <ul> <li>🎨 Un editor enfocado y fácil de usar, diseñado para equipos de diseño y marketing </li> <li>📦 Plantillas personalizadas para proteger tu identidad de marca </li> <li>📊 Creación masiva de activos utilizando hojas de cálculo (archivos CSV) </li> <li>🧩 Reutilización de componentes de tu Sistema de Diseño </li> <li>🖼️ Generación de imágenes impulsada por IA con gpt-image-1 </li> <li>📥 Exportar en múltiples formatos: PNG, JPG o PDF </li> </ul> <h2> ¿Por qué usar Figma Buzz? </h2> <ol> <li>Crear contenido para redes sociales, campañas, eventos o activos internos </li> <li>Reducir la carga de diseño utilizando plantillas bloqueadas </li> <li>Permitir que equipos no diseñadores editen contenido sin romper la marca </li> <li>Escalar la producción utilizando hojas de cálculo y edición por lotes </li> <li>Colaborar entre diseño y marketing en un mismo espacio visual</li> </ol> <h3> Mira Figma Buzz en acción </h3> <p>¿Tienes curiosidad sobre cómo funciona todo? Consulta la demostración oficial de Config 2025:</p> <blockquote> <p>👉 <a href="https://youtu.be/5q8YAUTYAyk?t=5658" rel="noopener noreferrer">Mira la demostración de Buzz</a></p> </blockquote> <h2> 5. Figma Draw </h2> <p>Figma Draw es el nuevo espacio creativo dentro de Figma Design que mejora el diseño expresivo con ilustraciones avanzadas, edición vectorial, efectos y texturas.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxqxurcv20l4qolngy6sf.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxqxurcv20l4qolngy6sf.png" alt="Image description" width="800" height="441"></a></p> <blockquote> <p>Fuente: <a href="https://www.figma.com/blog/introducing-figma-draw/" rel="noopener noreferrer">Figma Blog</a></p> </blockquote> <h3> ¿Qué puedes hacer con Figma Draw? </h3> <ul> <li>✍️ Edición vectorial optimizada: booleans mejorados, selección múltiple, herramienta de lazo, generador de formas </li> <li>🖌️ Herramientas expresivas: pinceles, patrones, texturas, texto en ruta, desenfoque progresivo </li> <li>🌀 Control total sobre formas: repetidores radiales y lineales, origen de rotación editable </li> </ul> <h2> ¿Por qué usar Figma Draw? </h2> <ol> <li>Crear ilustraciones, íconos, encabezados u otros elementos visuales sin salir de Figma </li> <li>Integrarse con tu sistema de diseño utilizando variables de color, modo oscuro y jerarquías limpias </li> <li>Experimentar libremente con herramientas de dibujo — sin necesidad de plugins </li> </ol> <h3> Mira Figma Draw en acción </h3> <p>¿Quieres verlo en vivo? Consulta la demostración oficial de Config 2025:</p> <blockquote> <p>👉 <a href="https://youtu.be/5q8YAUTYAyk?t=6253" rel="noopener noreferrer">Mira la demostración de Draw</a></p> </blockquote> <h2> 🎯 Preguntas que aún nos hacemos… </h2> <p>Mientras explorábamos estas nuevas funciones, surgieron algunas preguntas e ideas en las que aún estamos reflexionando:</p> <h4> ¿Cómo funcionará la publicación de sitios de forma segura? </h4> <p>Figma Sites permite la publicación con un solo clic, lo cual es poderoso — pero, ¿cómo podemos mantener un sitio privado durante las etapas iniciales? Nos gustaría ver opciones para acceso restringido, como lista blanca de IPs, protección por contraseña o entornos de staging.</p> <h4> ¿Podrían Figma Sites integrarse con repositorios de código? </h4> <p>¿Hay una forma de conectar un sitio a un repositorio de GitHub (o similar) y empujar el código generado automáticamente? Esto podría ayudar a los equipos con el control de versiones, la automatización y la documentación.</p> <h4> ¿Se integrará Figma Buzz con plataformas de redes sociales? </h4> <p>Buzz ya admite la creación masiva de contenido a través de hojas de cálculo — pero, ¿y si también pudiéramos programar y publicar publicaciones directamente en plataformas como Instagram o LinkedIn?</p> <h4> ¿Cómo funcionará la gestión del CMS y del entorno? </h4> <p>Con un CMS sin código en camino, será interesante ver cómo gestionaremos el contenido de staging frente al de producción, las aprobaciones de borradores o los flujos de publicación en vivo.</p> <h4> ¿Cómo garantizaremos la precisión de los datos a gran escala? </h4> <p>Las cargas de CSV son geniales para evitar la entrada manual de contenido, pero, ¿cómo podemos prevenir problemas de formato o de sincronización en flujos de trabajo de contenido a gran escala?</p> <h4> ¿Cómo se apoyará la accesibilidad en Sites? </h4> <p>La accesibilidad es una necesidad. Si bien se puede editar manualmente el HTML/CSS personalizado, sería útil que Sites proporcionara herramientas o guías de accesibilidad integradas — como soporte para etiquetas semánticas, texto alternativo o atributos ARIA.</p> <h2> 🎯 Reflexiones finales </h2> <p>Estamos realmente impresionados con la dirección que está tomando Figma. Estas nuevas funciones no solo apoyan a los diseñadores, sino que crean oportunidades para todo tipo de equipos: desarrolladores, gerentes de producto, editores de contenido, partes interesadas, y todos los involucrados en la construcción de productos digitales.</p> <p><strong>Figma</strong> sigue evolucionando hacia una verdadera plataforma de principio a fin, una que conecta: <code>ideación</code>, <code>colaboración</code>, <code>diseño</code>, <code>código</code>, y ahora incluso <code>publicación</code>... todo en el mismo espacio.</p> <h2> 📚 Referencias </h2> <ol> <li><p><strong>Figma</strong>. (<strong>2025, 7 de mayo</strong>). <em>Config 2025: Presentación del producto por Dylan Field (CEO y cofundador)</em> [Video]. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://youtu.be/5q8YAUTYAyk" rel="noopener noreferrer">https://youtu.be/5q8YAUTYAyk</a></p></li> <li><p><strong>Field, D.</strong> (<strong>2025, 7 de mayo</strong>). <em>Resumen de Config 2025: Impulsando el diseño más allá</em>. <strong>Figma Blog</strong>. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://www.figma.com/blog/config-2025-recap/" rel="noopener noreferrer">https://www.figma.com/blog/config-2025-recap/</a></p></li> <li><p><strong>Lehman, A., Cowart, T., &amp; Byrne, L.</strong> (<strong>2025, 7 de mayo</strong>). <em>Introduciendo Figma Sites: Publica tus diseños en la web</em>. <strong>Figma Blog</strong>. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://www.figma.com/blog/introducing-figma-sites/" rel="noopener noreferrer">https://www.figma.com/blog/introducing-figma-sites/</a></p></li> <li><p><strong>Ng, P., Chouhan, R., &amp; Duncalf, T.</strong> (<strong>2025, 7 de mayo</strong>). <em>Introduciendo Figma Make: Una nueva forma de probar, editar y solicitar diseños</em>. <strong>Figma Blog</strong>. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://www.figma.com/blog/introducing-figma-make/" rel="noopener noreferrer">https://www.figma.com/blog/introducing-figma-make/</a></p></li> <li><p><strong>Budorick, L., Miller, J., Van Damme, T., &amp; King, R.</strong> (<strong>2025, 7 de mayo</strong>). <em>Exprésate con Figma Draw</em>. <strong>Figma Blog</strong>. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://www.figma.com/blog/introducing-figma-draw/" rel="noopener noreferrer">https://www.figma.com/blog/introducing-figma-draw/</a></p></li> <li><p><strong>Ran, A., Tenggoro, N., &amp; Chambers, K.</strong> (<strong>2025, 7 de mayo</strong>). <em>Figma Buzz: Donde los equipos de diseño y marketing co-crean</em>. <strong>Figma Blog</strong>. Recuperado <strong>8 de mayo de 2025</strong>, de <a href="https://www.figma.com/blog/introducing-figma-buzz/" rel="noopener noreferrer">https://www.figma.com/blog/introducing-figma-buzz/</a></p></li> </ol> product design webdev programming