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 crear prototipos funcionales y aplicaciones web que se vean y se sientan coherentes, puedes traer el contexto de estilo de una biblioteca de Figma existente a Figma Make. Cuando lo hagas, Figma Make extraerá el CSS de estilo de esa biblioteca.
Hay dos pasos para llevar el contexto de estilo de una biblioteca a 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 editando los estilos exportados y añadiendo directrices para ayudar a concretar cómo Figma Make usa los estilos extraídos.
Paso 1: exporta una biblioteca desde Figma Design para usarla como contexto de estilo en Figma Make
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes de pago
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 edición a la biblioteca pueden exportarla a Figma Make. Este paso solo tiene que hacerse una vez antes de que tú y otros podáis empezar a usarlo en Figma Make.
- En el archivo de Figma Design que contiene la biblioteca que deseas exportar para Figma Make, selecciona la pestaña Recursos en la barra lateral izquierda.
- Haz clic en Bibliotecas.
- En 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 anteriormente 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 puedes exportar a Figma Make. Este proceso puede tardar unos minutos.
-
Haz clic en Exportar para Make.
El proceso de exportar puede tardar unos minutos en completarse. Durante este proceso, Figma está ensamblando y exportando un archivo CSS para referenciar en Figma Make.
- Una vez completado el proceso de exportación, haz clic en Ir a Figma Make.
Después de extraer tu biblioteca y seleccionarla en tu archivo de Figma Make, ve a la vista de código. Desde allí, abre la carpeta estilos y haz clic en globals.css para explorar los estilos generados. Por lo general, verás los 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 capturarás cada detalle del diseño. Para garantizar la coherencia y claridad, recomendamos añadir más contexto y reglas en tu archivo guidelines.md.
Actualmente, Figma Make 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 se define. En lugar de una asignación 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 fundamentales.
Si tienes reglas o parámetros adicionales para las variables —especialmente las relacionadas con los estados— te recomendamos documentarlas en tu archivo guidelines.md para mantener la coherencia en todo el sistema.
Puedes usar una biblioteca a la vez. Si tu organización administra 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 fundamentales. 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 utilizarán como contexto, dentro de tus propiedades.
No, solo necesitas exportar la biblioteca a Figma Make una vez. Cualquier persona de tu organización que tenga acceso puede visualizar a esta biblioteca también podrá utilizarla en tus archivos de Figma Make.
Sí. Si alguien edita una biblioteca de diseño y quiere usar la versión actualizada en Figma Make, tendrás 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 generado antes de la actualización.
Paso 2: Hacer referencia a una biblioteca en un archivo Figma Make
Con el contexto de estilo de tu biblioteca agregado a Figma Make, tú y otras personas de tu equipo u organización podéis usarlo para crear prototipos funcionales y aplicaciones web con estilo. Cualquier miembro del equipo u organización con acceso de puede visualizar a la biblioteca puede ver y utilizar esta biblioteca en tu archivo de Figma Make.
- En un archivo de Figma Make, haz clic en Seleccionar una biblioteca.
- Elige la biblioteca que te gustaría usar.
Empieza a indicar inmediatamente o personaliza aún más cómo Figma Make utiliza los estilos de tu biblioteca editando los estilos de la biblioteca o añadiendo directrices. Una vez que selecciones una biblioteca y comiences a indicar, todo el contenido generado en este archivo hará referencia a esos estilos.
Consejo: hacer referencia a una biblioteca de Figma Design proporciona a Figma Make el contexto de estilo para usar mientras exploras ideas y generas prototipos y aplicaciones web funcionales. Para concretar aún más, intenta:
Editar los estilos de una biblioteca
Cuando se exporta una biblioteca de Figma Design a Figma Make, se crea automáticamente un archivo CSS de 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 Figma Make.
- Haz clic en .
- Elige Editar estilos para actualizar las propiedades CSS de esta biblioteca.
Añadir directrices para generar
Las directrices te permiten dar a Figma Make reglas o instrucciones sobre cómo se usa el contexto de estilo. Las directrices solo se aplican a las cosas que crees en este archivo y no afectan a ningún otro archivo que pueda hacer referencia a esta biblioteca o a la propia biblioteca.
- Haz clic en .
- Elige Editar directrices para añadir directrices a este archivo de Figma Make.
El archivo guidelines.md es un archivo de texto de formato libre, así que puedes añadir cualquier pauta específica que quieras que Figma Make siga.
Consejo: el archivo guidelines.md está disponible para usarse con o sin una biblioteca seleccionada, así que puedes dar forma a cualquier archivo de Figma Make según necesites.
puede visualizar de alguien a una biblioteca?
Si alguien tenía acceso de puede visualizar a una biblioteca anteriormente, pero el acceso se ha revocado, ya no podrá ver ni usar esa biblioteca en Figma Make. Sin embargo, todos los archivos anteriores de Figma Make que hayan creado con esa biblioteca seguirán disponibles para esas personas y el nombre de la biblioteca aparecerá como «Desconocido».
No. Cualquier actualización de los estilos o pautas de CSS solo afecta a ese archivo Figma Make.
Preguntas frecuentes
No, una biblioteca de Figma Design no se puede eliminar actualmente después de que se haya usado para hacer una indicación en Figma Make.
Una vez que hayas empezado a generar haciendo referencia a una biblioteca, no se puede eliminar. Para usar una biblioteca diferente o dejar de usar una biblioteca en particular, crea un nuevo archivo Figma Make y comienza a generar.