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 crear prototipos funcionales y apps web que se vean consistentes, puedes incorporar el contexto de estilo de una biblioteca de Figma existente a Figma Make. Cuando hagas esto, Figma Make extraerá el CSS de estilo de esa biblioteca.
Existen dos pasos para incorporar el contexto de estilo de una biblioteca en Figma Make:
- Exporta una biblioteca desde Figma Design.
- Selecciona la biblioteca en un archivo de Figma Make. Luego, puedes personalizar aún más tu archivo de Figma Make al editar los estilos exportados y agregar pautas para ayudar a definir cómo Figma Make usa los estilos extraídos.
Paso 1: Exporta una biblioteca de Figma Design para usarla como contexto de estilo en Figma Make
Antes de empezar
Quién puede usar esta función
Disponible en todos los planes de pagos.
Requiere un puesto Full con acceso de edición al archivo fuente de la biblioteca.
En Figma Design, selecciona una biblioteca para usar como contexto de estilo para tus archivos de Figma Make. Solo las personas con acceso de puede editar en la biblioteca pueden exportarla a Figma Make. Este paso solo debe realizarse una vez antes de que tú y otras personas puedan comenzar a usarla en Figma Make.
- En el archivo de Figma Design que contiene las bibliotecas que deseas exportar para Figma Make, selecciona la pestaña recursos en la barra lateral izquierda.
- Haz clic en Bibliotecas.
- Desde la sección Este archivo, busca tu archivo actual y haz clic en Publicar para abrir el modal de publicación de la biblioteca.
- Si no has publicado previamente la biblioteca en un equipo, espacio de trabajo u organización, haz clic en Publicar en la parte inferior del modal. Solo las bibliotecas publicadas se pueden exportar a Figma Make. Este proceso podría demorar unos minutos.
-
Haz clic en Exportar para Make.
El proceso de exportar podría demorar unos minutos en completarse. Durante este proceso, Figma ensambla y exporta un archivo CSS para referenciar en Figma Make.
- Una vez que se complete el proceso de exportación, haz clic en Ir a Figma Make.
Luego de extraer tu biblioteca y seleccionarla en tu archivo de Figma Make, dirígete a la vista de código. Desde allí, abre la carpeta estilo y haz clic en globals.css para explorar los estilos generados. Por lo general, verás estilos agrupados en cuatro categorías:
- Paletas de colores
- Tipografía (fuente y jerarquía)
- Variables
- Bordes y radio de esquina
Ten en cuenta que el CSS extraído es una versión simplificada de tu biblioteca completa. No captarás todos los detalles del diseño. Para garantizar la consistencia y la claridad, recomendamos agregar más contexto y reglas en tu archivo guidelines.md.
Figma Make actualmente no admite la extracción completa de tokens de diseño. En su lugar, extrae un subconjunto de tus variables y las usa para generar un archivo CSS global con valores sin procesar. Esto significa que la sintaxis de la variable no se conservará exactamente como está definida. En lugar de un mapeo 1:1, obtendrás una vista simplificada de tus variables reflejadas en un solo archivo .css . Esto ayuda a garantizar que el código generado se alinee con tus estilos base.
Si tienes reglas o parámetros adicionales para las variables, especialmente los relacionados con los estados, te recomendamos documentarlos en tu archivo guidelines.md para mantener la consistencia en todo tu sistema.
Puedes usar una biblioteca a la vez. Si tu organización gestiona tu sistema de diseño en varias bibliotecas, se recomienda seleccionar la biblioteca que contiene tus componentes principales y la mayoría de los estilos base. Aunque la exportación a Figma Make no extrae los componentes en sí, es probable que esta biblioteca haga referencia a colores y tipografía, que se emplearán como contexto, dentro de tus propiedades.
No, solo necesitas exportar la biblioteca a Figma Make una vez. Cualquier persona dentro de tu organización que tenga acceso de puede ver en esta biblioteca también podrá usarla en sus archivos de Figma Make.
Sí. Si alguien edita una biblioteca de diseño y quiere usar la versión actualizada en Figma Make, tendrá que volver a exportar la biblioteca. La biblioteca reexportada se actualizará en Figma Make solo para futuros archivos de Figma Make y no actualizará retroactivamente ningún archivo de Figma Make que se generó antes de la actualización.
Paso 2: Referencia una biblioteca en un archivo de Figma Make
Una vez agregado el contexto de estilo de tu biblioteca a Figma Make, tú y otras personas de tu equipo u organización pueden usarlo para crear prototipos funcionales y apps web que sigan ese estilo. Toda persona del equipo u organización con acceso de puede ver a la biblioteca puede ver y usar esta biblioteca dentro de su archivo de Figma Make.
- En un archivo de Figma Make, haz clic en Seleccionar una biblioteca.
- Elige qué biblioteca te gustaría utilizar.
Empieza a realizar indicaciones de inmediato o personaliza cómo Figma Make usa los estilos de tu biblioteca al editar los estilos de la biblioteca o agregar pautas. Una vez que selecciones una biblioteca y comiences a realizar indicaciones, todo el contenido generado en este archivo hará referencia a esos estilos.
Consejo: Referenciar una biblioteca de Figma Design le proporciona a Figma Make un contexto de estilo para usar mientras exploras ideas y generas prototipos funcionales y apps web. Para ser aún más específico, intenta lo siguiente:
Editar los estilos de una biblioteca
Cuando se exporta una biblioteca de Figma Design a Figma Make, se crea automáticamente un archivo CSS con las propiedades de la biblioteca. Puedes personalizar el CSS para dar forma a tu Figma Make según sea necesario. Los cambios en el CSS solo afectan a este archivo de Figma Make.
- Haz clic en .
- Elige Editar estilos para actualizar las propiedades de CSS de esta biblioteca.
Agregar pautas para generar
Las pautas te permiten darle reglas o instrucciones a Figma Make sobre cómo se utiliza el contexto de estilo. Las pautas solo se aplican a las cosas que crees en este archivo y no afectan a ningún otro archivo que pueda referenciar esta biblioteca o la biblioteca en sí.
- Haz clic en .
- Elige Editar guías para agregar pautas para este archivo de Figma Make.
El archivo guidelines.md es un archivo de texto de formato libre, así que puedes agregar cualquier pauta específica que quieras que siga Figma Make.
Consejo: El archivo guidelines.md está disponible para usar con o sin una biblioteca seleccionada, por lo que puedes dar forma a cualquier archivo de Figma Make según sea necesario.
puede ver de una persona en una biblioteca?
Si alguien tenía acceso de puede ver en una biblioteca anteriormente, pero el acceso fue revocado, ya no podrás ver ni usar esa biblioteca dentro de Figma Make. Sin embargo, cualquier archivo anterior de Figma Make que haya creado con esa biblioteca seguirá disponible para esta persona, y el nombre de la biblioteca aparecerá como “Desconocido”.
No. Cualquier actualización a los estilos CSS o a las pautas solo afecta a ese archivo de Figma Make.
Preguntas frecuentes
No, una biblioteca de Figma Design no se puede eliminar actualmente después de que se haya usado para generar una indicación en Figma Make.
Una vez que comenzaste a generar mientras referencias una biblioteca, no se puede eliminar. Para usar una biblioteca diferente o dejar de usar una biblioteca en particular, crea un nuevo archivo de Figma Make y comienza a generar.