Crear y reutilizar un sistema de diseño

Reúne las referencias que definen tu marca

Abre Design systems (Sistemas de diseño) en la barra lateral de Home (Inicio) y, después, elige Create (Crear). Añade material de origen antes de generar: un sitio web o enlace de GitHub, una referencia de marca, archivos o una descripción escrita. La pantalla de creación admite archivos de hasta 12 MB cada uno. Usa referencias que tengas permiso para proporcionar al servicio seleccionado.

Pega DESIGN.md si ya tienes reglas de diseño escritas. También puedes copiar un sistema de diseño existente como punto de partida. Indica qué debe permanecer sin cambios, como los colores de marca, la tipografía, el espaciado del logotipo o el comportamiento de los componentes.

Usa código o Figma como referencia

Despliega Advanced (Opciones avanzadas) para usar un repositorio de GitHub, código local, un archivo .fig o la URL de un archivo de Figma. Selecciona el origen pertinente en lugar de subir la carpeta de un proyecto no relacionado. Mantén juntos los recursos y los archivos que explican los componentes.

Una URL de Figma es una referencia de origen, no una garantía de que se puedan leer todos los archivos privados. Si falla el acceso, proporciona una copia local .fig autorizada o capturas de pantalla claras. Importar una referencia de Figma no permite exportar directamente de vuelta a un archivo nativo de Figma.

Genera, inspecciona y perfecciona el sistema

1. Comprueba las referencias proporcionadas y elige Generate (Generar). Espera a que termine la extracción o generación antes de considerar que el sistema está listo.
2. Revisa las vistas previas generadas y DESIGN.md. Compara los colores, tamaños tipográficos, espaciado y componentes con tus referencias; corrige las omisiones o las reglas contradictorias.
3. Guarda el archivo DESIGN.md editado. Si pides al agente que revise el sistema, vuelve a comprobar el resultado antes de publicarlo.

Escribe requisitos que otro proyecto pueda seguir: dónde debe usarse cada color, qué fuente utilizar para los encabezados y el cuerpo del texto, y cómo deben comportarse los botones, formularios y estados. Una colección de capturas de pantalla atractivas por sí sola no define estas reglas.

Publícalo y selecciónalo para un proyecto

1. Una vez comprobado el sistema, usa su control Published (Publicado). Los borradores permanecen disponibles para que los revises; publícalo antes de esperar que otros proyectos puedan usarlo.
2. Vuelve a Home (Inicio) o al selector de sistemas de diseño del proyecto. Selecciona el sistema previsto y confirma su vista previa.
3. Describe el trabajo que quieres crear y las reglas importantes. Compara el elemento generado con el sistema y, después, aplica revisiones específicas para corregir cualquier diferencia.

Guardar reglas, publicar un sistema y aplicarlo a un proyecto son acciones independientes. Cambiar un sistema de diseño no demuestra que los resultados existentes se hayan vuelto a generar. Vuelve a abrir el proyecto correspondiente y comprueba el resultado.

Para continuar con un flujo de trabajo de interfaz, consulta prototipos. Para realizar pequeños cambios en un elemento HTML existente, consulta edición en el lienzo.

Si falta un sistema o es de solo lectura

Comprueba el espacio de trabajo activo y si el sistema está publicado. Los recursos del equipo y los recursos personales pueden ser diferentes. La copia sincronizada de un compañero puede ser de solo lectura; para cambiar su origen o estado de publicación, usa la cuenta del propietario o una cuenta con los permisos necesarios para el espacio de trabajo.

Si falla la extracción, comprueba la URL de origen, el tamaño del archivo y el acceso. Elimina un origen inaccesible o sustitúyelo por una referencia local permitida y vuelve a intentarlo. Si falla el guardado, conserva una copia de las reglas editadas antes de salir de la pantalla. Publicar en OpenDesign no envía los cambios de vuelta a GitHub.