Diseñar páginas web ahora es mucho más fácil con esta IA: ya no es necesario ser un pro en código

Personas sin experiencia previa en estas áreas pueden generar detalles específicos de una página web con solo ingresar indicaciones o prompts en una plataforma

Guardar
Google icon
(Figma)
Con Figma, ahora puedes crear elementos digitales simplemente dándole instrucciones (prompts) a la IA. (Figma)

¿Alguna vez has tenido una idea para una página web, pero te has frenado por no saber programar? Las reglas del juego están cambiando gracias a la inteligencia artficial.

Figma, una plataforma donde las personas diseñan y construyen productos digitales como páginas web, ahora permite que a través de indicaciones (o prompts) simplemente puedas decirle a la IA: “quiero que el banner superior de mi sitio web luzca así”, para que esta tecnología lo haga.

PUBLICIDAD

Esto ocurre a través de agentes que te ayudan a hacer la creación mucho más fácil. Imagina a los agentes como compañeros de equipo de IA con los que puedes explorar posibilidades creativas y ejecutar ideas.

Incluso, si tu equipo identifica una tarea repetitiva como puede ser dar una retroalimentació, pueden entrenar a un agente para que lo haga y así, ahorrar tiempo.

PUBLICIDAD

(Figma)
Tu equipo puede ahorrar tiempo entrenando agentes de IA para automatizar tareas repetitivas. (Figma)

Asismismo, la plataforma permite integrar código, para que tengas mayor control de lo que estás creando.

Estas herramientas pueden ser útiles para emprendedores que necesitan, por ejemplo, hacer un menú interactivo o para empresario que quiere renovar el diseño de su página web.

De qué sirve integrar código en una herramienta así

Históricamente, los creadores o diseñadores de productos digitales han tenido que enfrentarse a una elección: explorar ideas de forma libre con su equipo o construir de manera lineal utilizando código.

Dylan Field, cofundador y CEO de Figma, explicó que estas herramientas que obligan a tomar falsas elecciones entre diseño y código terminan limitando la creatividad en lugar de impulsarla. Para terminar con este obstáculo, la plataforma ha introducido “Code layers” (capas de código).

(Figma)
Antes, los diseñadores debían elegir entre explorar ideas libremente o programar de forma lineal. (Figma)

Gracias a esta función, el diseño y el código pueden integrarse en un mismo espacio así:

  • Importar código desde un repositorio en GitHub y sincronizar los cambios de vuelta.
  • Generar nuevas direcciones de código utilizando el agente de Figma.
  • Extraer flujos completos de código y convertirlos en capas de diseño que puedes editar visualmente.
  • Probar múltiples ideas a la misma velocidad a la que están acostumbrados al usar simples capas de diseño.

Cómo aprovechar un agente de IA

Los nuevos agentes de Figma actúan como compañeros para ayudarte a explorar posibilidades creativas y automatizar tareas tediosas.

(Figma)
Los nuevos agentes de Figma actúan como asistentes para potenciar tu creatividad y automatizar labores tediosas. (Figma)

Algunas acciones que pueden ejecutar son:

  • Puedes usar el agente para pedir y generar código directamente mediante indicaciones de texto o “prompts”.
  • Te permite convertir tareas repetitivas en “habilidades” que todo el equipo puede utilizar para trabajar de forma más precisa y consistente.
  • Estas habilidades logran que la experiencia particular de tu equipo se codifique y guarde directamente en el agente.
(Figma)
Figma integró "materiales creativos" para que trabajes de forma fluida sin tener que salir del lienzo. (Figma)
  • El agente ahora cuenta con un contexto mucho más profundo gracias a conectores de terceros, búsquedas web y archivos adjuntos.
  • Con la llegada de los “Plugins generativos”, puedes pedirle al agente que construya herramientas personalizadas y reutilizables sin requerir conocimientos técnicos ni configuración de desarrollo.

Otras funciones revolucionarias que trae Figma

Por otro lado, Figma ha sumado nuevos “materiales creativos” para que la experiencia sea fluida y no tengas que abandonar el lienzo.

  • Animación (Motion).

Podrás diseñar de manera colaborativa animaciones, transiciones y transformaciones en 3D directamente en Figma. Puedes usar la IA para pedir que cree animaciones, aplicar estilos preestablecidos o usar una línea de tiempo para ajustes manuales.

(Figma)
Podrás diseñar colaborativamente animaciones y transformaciones 3D directamente dentro de Figma. (Figma)
  • Sombreadores (Shaders).

Históricamente, crear efectos visuales personalizados requería un conocimiento profundo de matemáticas gráficas. Ahora, puedes usar instrucciones (prompts) para construir efectos impulsados por WebGPU, logrando acabados como el pixelado, varios tipos de desenfoque y el tramado (dither) directamente en el lienzo.

  • Figma Weave.

Esta función integra más de 20 herramientas de IA en el lienzo para que los diseñadores moldeen exactamente lo que quieren obtener, generando visuales de alta calidad.

  • Perspectiva y 3D.

Los diseñadores ahora cuentan con transformaciones en 3D que son más que ilusiones de sombras, permitiéndoles moldear elementos de manera directa en su espacio de trabajo.

PUBLICIDAD

PUBLICIDAD