Antes de empezar
Quién puede usar esta función
Disponible en Figma Design.
Disponible en planes de pago.
Requiere tener acceso de puede editar al archivo.
Con First Draft, puedes transformar ideas en wireframes o diseños editables en un par de minutos. Esto te ayuda a explorar rápidamente una gama más amplia de posibilidades de diseño y reduce el esfuerzo necesario para crear las primeras exploraciones desde cero.
Cómo funciona
Figma AI usa bibliotecas de diseño y wireframing creadas por Figma como base para generar diseños.
Cada biblioteca tiene un conjunto de elementos básicos, o pilas de componentes, que se utilizan para construir tu diseño según la descripción que proporciones.
Las bibliotecas se destacan en la generación de diseños que coinciden con patrones de diseño comunes en sitios web y aplicaciones móviles. Pero 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 estables:
- Una página de pago para una tienda que vende parrilladas
- Una aplicación de entrega de alimentos para mascotas
- Un sitio web de marketing para una consultoría de estrategia de contenidos
Figma AI puede tener dificultades con estas indicaciones, ya que no emplean patrones de diseño comunes en sitios web o aplicaciones móviles:
- Una disposición de libro para una novela
- Una invitación a una fiesta de cumpleaños
- Un folleto con forma de pez
Una vez que hayas generado un diseño, puedes hacerle cambios mediante otra indicación o con una colección de controles de estilo.
Consejo: No es posible generar diseños usando tu propio sistema de diseño, aunque esperamos que esa funcionalidad esté disponible pronto.
Hacer un primer borrador
- Haz clic en Actions (Acciones) en la barra de herramientas.
- Selecciona First Draft.
- Si es necesario, haz clic en Library (Biblioteca) para crear un sitio web o una aplicación móvil con un wireframe o un diseño básico. Si no eliges una biblioteca, Figma AI seleccionará la que mejor se adapte a la indicación.
- Escribe una indicación, como "Una página de precios para una startup de herramientas para desarrolladores" o haz clic en una de las sugerencias disponibles.
- Haz clic en Crear.
- Obtén una vista previa de diferentes temas haciendo clic en las miniaturas debajo de la indicación.
- Si estás satisfecho con el diseño, cierra el menú de acciones. Si deseas pulirlo aún más, haz clic en Realizar cambios.
Hacer cambios en el diseño
Nota: Una vez que cierres Acciones, no podrás realizar cambios en el diseño con las bibliotecas de First Draft. En su lugar, puedes seguir editando tu diseño si modificas sus propiedades, al igual que con cualquier otro diseño.
Tienes dos opciones para modificar tu diseño al hacer clic en Realizar cambios:
- Emplear una indicación para describir tus cambios
- Usar 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 realizas cambios en un solo diseño.
Consejo: ¿Quieres comparar diferentes riffs? Duplica el marco seleccionado usando Control D en Windows o Command D en macOS y, luego, sigue haciendo cambios.
Usa un mensaje para personalizar el diseño
Con una indicación, puedes modificar el tema, el contenido o la estructura de tu diseño. Estos son algunos ejemplos:
Tema
- Usa un tema de sandía
- Intenta con un esquema de colores diferente
- Haz que esto sea más vibrante
Contenido
- Cambia el ícono de configuración a un engranaje
- Haz que se trate de audiolibros y no de pódcasts
- Cambiar los nombres de los clientes en la sección de testimonios de clientes
Estructura
- Agrega otra sección bajo Primer lugar de la lista de éxitos llamada Tendencias en Alemania
- Mueve la sección Destacados debajo de la barra de navegación
Consejo: Selecciona una o varias partes del diseño para aplicar la indicación solo a los elementos seleccionados.
Usa controles de estilo para personalizar el tema
Ajustar el tema mediante 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 nuevo color al tema eligiendo uno de los colores preestablecidos o haciendo clic en el círculo cromático para elegir tu propio color.
Radio del borde
Arrastra el control deslizante para aumentar o disminuir el radio del borde de los objetos elegibles.
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 quieras cambiar. A continuación, haz clic en una nueva fuente para ver una vista previa de ella en el diseño.
Consejo: ¿Algo no funciona como se esperaba? Consulta nuestra guía Solucionar problemas de las herramientas de IA en Figma Design →