Crie e reutilize um sistema de design

Reúna as referências que definem sua marca

Abra Design systems na barra lateral de Home e escolha Create (Criar). Adicione o material de origem antes de gerar: um link de site ou do GitHub, uma referência de marca, arquivos ou uma descrição por escrito. A tela de criação aceita arquivos de até 12 MB cada. Use referências que você tenha permissão para fornecer ao serviço selecionado.

Cole o DESIGN.md se você já tiver regras de design documentadas. Também é possível copiar um sistema de design existente como ponto de partida. Indique o que deve permanecer inalterado, como cores da marca, tipografia, espaçamento do logotipo ou comportamento dos componentes.

Use código ou o Figma como referência

Expanda Advanced (Avançado) para usar um repositório do GitHub, código local, um arquivo .fig ou o URL de um arquivo do Figma. Selecione a fonte relevante em vez de enviar a pasta de um projeto não relacionado. Mantenha juntos os ativos e os arquivos que explicam os componentes.

Um URL do Figma é uma referência de origem, não uma garantia de que todos os arquivos privados poderão ser lidos. Se o acesso falhar, forneça uma cópia local autorizada em .fig ou capturas de tela claras. Importar uma referência do Figma não permite exportar diretamente de volta para um arquivo nativo do Figma.

Gere, inspecione e refine o sistema

1. Verifique as referências fornecidas e escolha Generate (Gerar). Aguarde a conclusão da extração ou geração antes de considerar o sistema pronto.
2. Revise as prévias geradas e o DESIGN.md. Compare cores, tamanhos de fonte, espaçamentos e componentes com suas referências; corrija omissões ou regras conflitantes.
3. Salve o DESIGN.md editado. Se você pedir ao agente para revisar o sistema, confira novamente o resultado antes de publicá-lo.

Escreva requisitos que outro projeto possa seguir: onde cada cor deve ser usada, qual fonte usar em títulos e no corpo do texto e como botões, formulários e estados devem se comportar. Uma coleção de capturas de tela atraentes, por si só, não define essas regras.

Publique e selecione o sistema para um projeto

1. Depois de verificar o sistema, use o controle Published (Publicado). Um rascunho continua disponível para sua revisão; publique-o antes de esperar que outros projetos possam usá-lo.
2. Volte para Home ou para o seletor de sistema de design do projeto. Selecione o sistema desejado e confirme a prévia.
3. Descreva o trabalho que deve ser criado e as regras importantes. Compare o artefato gerado com o sistema e, depois, faça revisões específicas para corrigir eventuais diferenças.

Salvar regras, publicar um sistema e aplicá-lo a um projeto são ações separadas. Alterar um sistema de design não comprova que as saídas existentes foram geradas novamente. Reabra o projeto relevante e verifique o resultado.

Para um fluxo de trabalho de interface, continue em protótipos. Para pequenas alterações em um artefato HTML existente, consulte edição na tela.

Se um sistema estiver ausente ou for somente leitura

Verifique o workspace ativo e se o sistema está publicado. Os recursos da equipe e os recursos pessoais podem ser diferentes. A cópia sincronizada de um colega pode ser somente leitura; use a conta do proprietário ou uma conta com as permissões necessárias no workspace para alterar a origem ou o estado de publicação.

Se a extração falhar, verifique o URL de origem, o tamanho do arquivo e o acesso. Remova uma fonte inacessível ou substitua-a por uma referência local permitida e tente novamente. Se não for possível salvar, guarde uma cópia das regras editadas antes de sair da tela. Publicar no OpenDesign não envia as alterações de volta ao GitHub.