Figma ha presentado un conjunto de nuevas funciones orientadas a ampliar las posibilidades de diseño, prototipado, desarrollo y publicación dentro de su entorno. Entre las principales novedades se encuentran un nuevo modo de edición vectorial, una actualización en el sistema de disposición automática mediante cuadrícula, una herramienta para producción masiva de contenidos de marca, una solución integrada para la creación y publicación de sitios web, y una opción para convertir diseños en prototipos funcionales mediante código editable. ¡Sigue leyendo para enterarte de todo!
Figma Draw
Figma Draw es un nuevo modo de trabajo centrado en la edición gráfica. No se trata de una herramienta aislada, sino de una interfaz alternativa dentro de Figma que se suma a los
modos Design y Dev. Este entorno está enfocado a la edición vectorial, formas, degradados, texturas y desenfoques. El objetivo es facilitar una expresión visual más rica sin necesidad de recurrir a herramientas externas como Illustrator.
El modo Draw incorpora una barra de herramientas específica, mejoras en el panel de capas y propiedades, así como herramientas nuevas como el lazo de selección, generador de formas, edición múltiple y texto sobre cualquier ruta vectorial. Permite usar pinceles vectoriales predefinidos o personalizados, y aplicar rellenos con efectos como texturas, ruido, desenfoque progresivo o patrones. Incluye transformaciones con repeticiones lineales y radiales, trazo dinámico con control de frecuencia y movimiento, y próximamente permitirá modificar la anchura del trazo en puntos específicos. También se han actualizado las operaciones booleanas y la exportación SVG, mejorando su rendimiento.
Auto Layout Grid
La nueva funcionalidad de cuadrícula dentro de Auto Layout permite estructurar diseños mediante filas y columnas, replicando el comportamiento de una retícula tradicional. Los
componentes pueden ocupar una o varias pistas, tanto en dirección horizontal como vertical, y se pueden definir anchuras y alturas fijas para las pistas.
En comparación con los sistemas anteriores de Auto Layout basados en flexbox, esta versión utiliza display: grid. Desde el modo Dev se puede acceder al CSS generado para facilitar la implementación por parte del equipo de desarrollo. Aunque permite controlar la distribución de los elementos, por el momento no incluye la posibilidad de definir áreas de grid directamente en Figma, lo que requiere intervención posterior por parte del desarrollador.
Figma Buzz
Figma Buzz es una herramienta diseñada para crear y publicar recursos de marca de forma escalable. Las personas usuarias pueden copiar diseños desde Figma Design y convertirlos en
plantillas editables para el equipo, manteniendo o liberando restricciones de edición según las necesidades.
Buzz permite importar datos desde hojas de cálculo y generar múltiples recursos visuales al instante. Ofrece plantillas de marca personalizadas o prediseñadas, integración con funciones de inteligencia artificial para generar imágenes, eliminar fondos o reescribir texto, y la posibilidad de aplicar un mismo diseño a múltiples variantes. Está orientado a facilitar la producción de contenidos como creatividades para redes sociales o páginas con múltiples productos, y permite la descarga masiva de todos los recursos generados.
Figma Sites
Figma Sites es una herramienta de diseño, prototipado y publicación de sitios web integrada dentro del entorno de Figma. Permite trasladar diseños creados en Figma Design mediante
copiar y pegar, incorporando bloques predefinidos o componentes personalizados del propio sistema de diseño.
Cuenta con 50 plantillas de sitio listas para usar, permite ajustar diseños a diferentes puntos de quiebre y aplicar interacciones visuales como marquesinas o desplazamientos con paralaje. Los proyectos se pueden previsualizar en HTML directamente sobre el lienzo y publicar desde la misma interfaz. Su uso actual es viable principalmente para sitios sencillos, como landings o portfolios.
Figma Make
Figma Make permite transformar diseños en prototipos funcionales mediante edición de código. Está orientado a perfiles técnicos, como desarrolladores frontend, y genera por defecto código en React y Tailwind. Desde el diseño se puede seleccionar cualquier elemento y aplicar cambios mediante prompts o modificar directamente el código generado.
La herramienta incluye una barra de edición en línea para trabajar sobre textos, imágenes o contenedores sin salir del lienzo. Su integración con las bibliotecas de componentes permite aprovechar al máximo los recursos existentes en el proyecto. Aunque está en una fase inicial, ya permite lanzar una idea como aplicación web funcional, si bien el código generado aún presenta limitaciones en accesibilidad y semántica.
Artículo escrito por Víctor Meneses y Sonia San José
¿Conocías las novedades de Figma? ¿Tienes alguna favorita o que te llame la atención? En hiberus, nuestro equipo de Diseño de Experiencias Digitales utilizan Figma para llevar a cabo proyectos reales de clientes internacionales. Nuestro equipo analizará tus necesidades y te asesorará en el desarrollo de tu proyecto digital. ¡Contáctanos y te ayudaremos!
¿Quieres más información sobre nuestros servicios de UX/UI?
Contacta con nuestro equipo de User Research, User Experience y User Interface