Usa First Draft con Figma AI

Antes de empezar

Quién puede utilizar esta función

Disponible en Figma Design

Disponible en planes de pago

Requiere acceso de tipo puede editar archivos

Obtén más información sobre quién puede acceder a las funciones de IA en Figma.

Con First Draft, puedes transformar ideas en wireframes o diseños editables en un par de minutos. De este modo, podrás probar rápidamente una amplia variedad de opciones de diseño y te costará menos trabajo crear manualmente las primeras versiones desde cero.

Cómo funciona

Figma AI utiliza bibliotecas de diseño y retícula creadas por Figma como base para generar diseños.

Cada biblioteca tiene un conjunto de bloques de construcción (o pilas de componentes) que se utilizan para armar tu diseño en función de la descripción que proporciones.

Las bibliotecas destacan en la generación de diseños que coinciden con patrones de diseño comunes en sitios web y aplicaciones móviles. Sin embargo, es posible que no obtengas resultados tan óptimos al generar conceptos desde fuera de estos marcos de diseño.

Los siguientes mensajes suelen generar resultados sólidos:

• Una página de pago para una tienda que vende barbacoas
• Una aplicación de comida para mascotas
• Un sitio web de marketing para una consultoría de estrategia de contenidos

Figma AI podría tener problemas con estos mensajes, ya que no utilizan los patrones de diseño comunes en los sitios web o las aplicaciones móviles:

• Un diseño de libro para una novela
• Una invitación a una fiesta de cumpleaños
• Un folleto en forma de pez

Una vez que hayas generado un diseño, puedes hacer cambios en él mediante otro mensaje o con una colección de controles de estilo.

Generar un borrador

1. Haz clic en Acciones en la barra de herramientas.
2. Selecciona First Draft.
3. Si es necesario, haz clic en Bibliotecas para realizar un wireframe o diseño básico de un sitio web o aplicación móvil. Si no eliges una biblioteca, Figma AI seleccionará la que mejor se adapte al mensaje.
4. Introduce un mensaje, como «Una página de precios para una startup de herramientas para desarrolladores», o haz clic en una de las sugerencias disponibles.
5. Haz clic en Make it (Hazlo).
6. Obtén una vista previa de diferentes temas haciendo clic en las miniaturas bajo el mensaje.
7. Si te convence el diseño, cierra el menú Acciones. Si quieres refinarlo aún más, haz clic en Make changes (Hacer cambios).

Hacer cambios en el diseño

Tienes dos opciones para modificar tu diseño cuando haces clic en Make changes (Hacer cambios):

• Usa un mensaje para describir tus cambios
• Usa los controles de estilo para personalizar el color, la tipografía, el espaciado y el radio del borde

Puedes alternar entre cada opción mientras haces cambios en un único diseño.

Usar un mensaje para personalizar el diseño

Puedes modificar el tema, el contenido o la estructura de tu diseño con un mensaje. Aquí tienes algunos ejemplos:

Tema

• Utiliza un tema de sandía
• Prueba una combinación de colores diferente
• Haz que esto sea más vibrante

Contenido

• Cambia el icono de configuración por un engranaje
• Que trate de audiolibros y no de podcasts
• Cambia los nombres de los clientes en la sección de testimonios de clientes

Estructura

• Añade otra sección bajo Top of the Charts llamada Tendencias en España
• Mueve la sección Featured (Destacados) debajo de la barra de navegación

Usar controles de estilo para personalizar el tema

Ajustar el tema con los controles de estilo te permite controlar el color, el radio del borde, el espaciado y la tipografía del diseño.

Color

Haz clic en o para alternar entre el modo claro y oscuro. También puedes aplicar un color nuevo al tema eligiendo uno de los colores predeterminados o haciendo clic en el círculo cromático para elegir tu propio color.

Radio del borde

Arrastra el control deslizante para aumentar o reducir el radio del borde de los objetos aptos.

Espaciamiento

Arrastra el control deslizante para aumentar o disminuir el espaciado entre los elementos.

Tipografía

Haz clic en el título, el cuerpo o la etiqueta para seleccionar un grupo de elementos de texto que cambiar. A continuación, haz clic en una nueva fuente para acceder a su vista previa en el diseño.