Antes de empezar
Quién puede usar esta función
Figma Make está disponible para los puestos Full en los planes de pago.
Puedes probar Figma Make en otros puestos y planes.
Para ayudar a Figma Make a crear un prototipo funcional o una app web que se adapte mejor a tus necesidades y expectativas, puedes ofrecer pautas en el archivo Guidelines.md. Esto incluye instrucciones sobre cómo quieres que se comporte Figma Make en términos de codificación y personalidad, y cómo usar elementos como el contexto de estilo.
Agregar pautas
Para abrir el archivo de pautas:
- En la parte superior de Figma Make, haz clic en Código.
- En el explorador de archivos en el lado izquierdo del editor de código, haz clic en pautas y luego en Guidelines.md.
Las instrucciones, las mejores prácticas y los ejemplos de cómo usar el archivo de pautas se incluyen en el archivo en sí. Para mayor comodidad, el contenido del archivo está disponible en la siguiente sección.
Contenido del archivo Guidelines.md
Pautas del sistema
Usa este archivo para proporcionarle a la IA las reglas y pautas que quieres que siga.
Esta plantilla describe algunos ejemplos de cosas que puedes agregar. Puedes agregar tus propias secciones y formatearlas para que se adapten a tus necesidades.
CONSEJO: Más contexto no siempre es mejor. Puedes confundir al LLM. Intenta agregar las reglas más importantes que necesites.
# Pautas generales
Cualquier regla general que quieras que siga la IA.
Por ejemplo:
* Usa únicamente el posicionamiento absoluto cuando sea necesario. Opta por disposiciones adaptables y bien estructuradas que usen flexbox y cuadrícula de forma predeterminada.
* Refactoriza el código a medida que avances para mantenerlo limpio.
* Mantén los archivos de tamaño reducido y organiza las funciones auxiliares y los componentes en archivos separados.
--------------
# Pautas del sistema de diseño
Reglas sobre cómo la IA debe hacer que las generaciones se parezcan al sistema de diseño de tu empresa.
Además, si seleccionas un sistema de diseño para usarlo en el recuadro de solicitud, puedes hacer referencia a
los componentes, los tokens, las variables y los componentes de tu sistema de diseño.
Por ejemplo:
* Usa un tamaño de fuente base de 14 px.
* Los formatos de fecha siempre deben estar en el formato “Jun 10”.
* La barra de herramientas inferior solo debe tener un máximo de 4 elementos.
* Nunca uses el botón de acción flotante con la barra de herramientas inferior.
* Los chips siempre deben venir en conjuntos de 3 o más.
* No uses un menú desplegable si hay 2 opciones o menos.
También puedes crear subsecciones y agregar detalles más específicos.
Por ejemplo:
## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.
### Uso
Los botones deben usarse para acciones importantes que los usuarios deben realizar, como envíos de formularios, confirmación de opciones,
o inicio de procesos. Comunican interactividad y deben tener etiquetas claras y orientadas a la acción.
### Variantes
* Botón principal
* Propósito: se usa para la acción principal en una sección o página.
* Estilo visual: audaz, lleno del color principal de la marca.
* Uso: un botón principal por sección para guiarte hacia la acción más importante.
* Botón secundario
* Propósito: se usa para acciones alternativas o de apoyo.
* Estilo visual: trazado con el color principal, fondo transparente.
* Uso: puede aparecer junto a un botón principal para acciones menos importantes.
* Botón terciario
* Propósito: se usa para las acciones menos importantes.
* Estilo visual: solo texto sin borde, y usa el color principal.
* Uso: para acciones que deberían estar disponibles, pero no enfatizadas.