Antes de empezar
Quién puede utilizar esta función
Figma Make está disponible para puestos Full en planes de pago.
Puedes probar Figma Make en otros puestos y planes.
Para ayudar a Figma Make a crear un prototipo funcional o una aplicación web que se adapte mejor a tus necesidades y expectativas, puedes proporcionar directrices 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 aspectos como el contexto de estilo.
Añadir directrices
Para abrir el archivo de directrices:
- En la parte superior de Figma Make, haz clic en Código.
- En el explorador de archivos a la izquierda del editor de código, haz clic en directrices y luego en Guidelines.md.
Las instrucciones, las mejores prácticas y los ejemplos de cómo usar el archivo de directrices se incluyen en el propio archivo. Para mayor comodidad, el contenido del archivo está disponible en la siguiente sección.
Contenido del archivo Guidelines.md
Directrices del sistema
Usa este archivo para proporcionar a la IA las normas y directrices que quieres que siga.
Este esquema de plantilla describe algunos ejemplos de cosas que puedes añadir. Puedes añadir tus propias secciones y darles formato para que se adapten a tus necesidades
CONSEJO: Más contexto no siempre es mejor. Puedes confundir al LLM. Intenta añadir las reglas más importantes que necesites
# Directrices generales
Cualquier regla general que quieras que siga la IA.
Por ejemplo:
* Usa únicamente el posicionamiento absoluto cuando sea necesario. Opta por disposiciones receptivas y bien estructuradas que utilicen flexbox y cuadrícula por defecto
* Reestructura el código sobre la marcha para mantenerlo limpio
* Mantén el tamaño de los archivos pequeño y coloca las funciones auxiliares y los componentes en sus propios archivos.
--------------
# Directrices 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 utilizarlo en el cuadro de indicación, puedes hacer referencia a
los componentes, tokens, variables y 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 "10 de junio"
* 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
* Las fichas siempre deben venir en juegos de 3 o más
* No uses un menú desplegable si hay 2 o menos opciones
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: Usado para la acción principal en una sección o página
* Estilo visual: Negrita, lleno del color principal de la marca
* Uso: Un botón principal por sección para guiar a los usuarios hacia la acción más importante
* Botón secundario
* Propósito: Usado para acciones alternativas o de apoyo
* Estilo visual: Esquema con el color primario, fondo transparente
* Uso: Puede aparecer junto a un botón principal para acciones menos importantes
* Botón terciario
* Propósito: Usado para las acciones menos importantes
* Estilo visual: Solo texto sin borde, usando color primario
* Uso: Para acciones que deberían estar disponibles pero no enfatizadas