Skip to main content
Um design system salva a identidade visual da sua marca no nível do workspace: suas cores, fontes, logo e um conjunto de componentes combinados. Crie-o uma vez, defina-o como padrão, e cada novo app que você constrói já começa alinhado à marca, então você não precisa redefinir seu estilo a cada vez. Você não precisa ser designer. Com apenas alguns detalhes, como seu logo, uma breve descrição da sua marca, a sensação que você quer e quaisquer arquivos de design que tiver, a Base44 cria um design system inteiro para você, para que todos os seus apps pareçam profissionais e alinhados à marca.
A página Design system nas configurações do workspace, com um cartão de design system da Base44 mostrando o logo, um botão, amostras de cores e a fonte Inter, ao lado de um bloco tracejado Create new design system

Seus design systems nas configurações do workspace

Disponibilidade:
  • Design systems estão disponíveis no plano Builder e superiores. Cada workspace pode ter 1 design system, e quantos você precisar no plano Enterprise.
  • Design systems se aplicam a apps web, não a apps mobile. Um app importado do Figma, iniciado a partir de uma URL ou migrado de outra plataforma pode receber um design system depois que terminar de construir.
  • Criar e usar um design system não custa créditos.

​
O que está incluído

Quando você cria um design system, a Base44 preenche tudo o que mantém seus apps consistentes e alinhados à marca, e mostra tudo em uma prévia ao vivo. Mude uma cor ou uma fonte, e cada exemplo é atualizado imediatamente, então você sempre vê como fica.
A design system, with your brand settings on the left and a live preview on the right

Um design system e sua prévia ao vivo

Um design system cobre 3 coisas:
  • Os fundamentos da sua marca: Seu logo, nome da marca, slogan e uma breve descrição, além dos valores centrais da sua marca, do tom de voz e das diretrizes de design sobre como ela deve parecer.
  • Sua identidade visual: Suas cores, suas fontes, o quão arredondados são seus cantos, quanta sombra fica sob os elementos e quanto espaço vai entre eles.
  • Peças prontas: Um conjunto completo de componentes que já combinam com sua marca e estão prontos para serem usados em qualquer app, incluindo botões, ícones, cards, navegação, formulários e seções de página, cada um estilizado para seus estados interativos.

​
Criando um design system

Donos e admins do workspace criam design systems a partir das configurações do workspace. Em um único formulário, você pode combinar uma breve descrição, seu logo, uma importação do Figma, de um site ou de um pacote npm, e seus próprios arquivos de design, e a Base44 gera um design system completo a partir do que você fornecer. Para criar um design system:
  1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em Settings.
  2. Clique em Design system.
  3. Clique em Create. Se seu workspace já tem um design system, clique em Create new design system.
  4. Em Create your design system, adicione qualquer um dos seguintes:
    • Descreva sua marca: Escreva uma breve descrição da sua marca e adicione seu logo no quadrado ao lado.
    • Importe uma fonte existente: Você pode usar uma fonte por design system. Alterne entre as abas:
      • Figma file: Arraste ou procure um arquivo .fig, de até 1,9 GB, e anexe todas as suas páginas e frames ou escolha alguns específicos. A Base44 reduz imagens grandes demais e prepara arquivos grandes em segundo plano, e não armazena o arquivo original.
      • Website URL: Cole o endereço de um site. Use apenas URLs cujos conteúdos você tem o direito de usar.
      • NPM package: Insira um pacote publicado pelo nome, nome@versão ou um link do npmjs.com. Ele é resolvido no registro público do npm por padrão, ou clique em Private registry para adicionar a URL de um registro, um token de acesso e os escopos que devem ser resolvidos lá. Seu token de acesso é usado uma vez para buscar o pacote e não é armazenado.
    • Carregue seus recursos de design: Adicione imagens, fontes, um arquivo design.md ou outros arquivos de design, até 10 arquivos.
  5. Clique em Create. Gerar seu design system pode levar alguns minutos, e você pode sair e voltar enquanto ele é gerado.
  6. Revise o design system gerado na prévia e ajuste o que quiser.
The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources

Criando um design system a partir dos materiais da sua marca

​
Editando seu design system

Quando você abre um design system, você o edita em um editor de dois painéis. À esquerda estão todas as configurações da sua marca e do seu design. À direita, uma Preview ao vivo mostra esses estilos aplicados a botões, ícones e cards reais, da forma como aparecem no seu app ou site. Conforme você altera uma configuração à esquerda, a prévia é atualizada instantaneamente. O nome e o slogan do seu design system ficam no topo da página. Clique em qualquer um deles para editá-lo ali mesmo. À esquerda, você pode editar cada parte do seu design system:
Uma breve descrição da sua marca. A Base44 a usa para manter tudo o que gera alinhado à marca.
Adicione os logos da sua marca ou gere um com IA. Clique em Add logo para carregar um logo, ou em Generate logo para descrever um e deixar a Base44 criá-lo. Um logo é marcado como Primary, e você pode definir outro como principal pelo menu More actions dele.
O cartão Logos com os botões Generate logo e Add logo, e um logo marcado como Primary

Editando os logos da sua marca

Escolha suas fontes de título e de texto, ou carregue as suas próprias. Você também pode ajustar o peso de cada estilo de fonte. Donos e admins do workspace podem carregar uma fonte.
O cartão Typography com Heading e Body definidos como Inter, acima dos pesos de fonte Regular em 400, Medium em 500, Semibold em 600 e Bold em 700

Escolhendo suas fontes de título e de texto

Clique em uma cor para editá-la, ou clique em Generate palette e descreva as cores que deseja.
O cartão Color palette com um seletor de cores aberto sobre a primeira amostra, mostrando um campo de gradiente, um controle de matiz e valores R, G e B de 26, ao lado das amostras Secondary, Accent, Text, Muted e Destructive

Editando uma cor na paleta

Define como sua marca se comunica. Clique em Add tone para adicionar um traço, ou clique no ícone de gerar para deixar a Base44 sugerir um novo conjunto.
O cartão Tone of voice com confident, clear, friendly, direct e optimistic como chips removíveis, acima de um botão Add tone

Adicionando traços de tom de voz

Os princípios que sua marca defende. Clique em Add value para adicionar um, ou clique no ícone de gerar para deixar a Base44 sugerir um novo conjunto.
O cartão Core values com Effortless, Complete, Trustworthy, Modern e Empowering como chips removíveis, acima de um botão Add value

Adicionando seus valores centrais

Defina o quão arredondados seus componentes parecem.
O cartão Corner radius com blocos de prévia e campos em pixels para none em 0, sm em 6, md em 12, lg em 20 e full em 9999

Definindo os valores de raio dos cantos

Ajuste quanto espaço vai entre os elementos.
O cartão Spacing scale com barras crescendo de sp-1 em 4 pixels até sp-7 em 48 pixels, cada uma com um campo editável em pixels

Ajustando sua escala de espaçamento

Defina o quão elevados seus componentes parecem. Clique em uma sombra para ajustar sua posição, desfoque, extensão e cor.
O cartão Shadow com 5 blocos de prévia de profundidade de sombra crescente, rotulados none, sm, md, lg e xl

Definindo os valores de sombra

Regras que mantêm a linguagem visual do seu app consistente. Clique em Add guideline para adicionar uma, ou abra o menu More actions em uma diretriz para editá-la ou excluí-la.
O cartão Design guidelines, descrito como regras que o agente segue para esta marca, com 7 diretrizes escritas, cada uma com um menu More actions, acima de um botão Add guideline

Editando suas diretrizes de design

Suas edições não são aplicadas até que você as salve. Clique em Save changes para mantê-las, ou em Reset changes para desfazer as edições que ainda não salvou. Um design system precisa de um nome e de uma visão geral antes que você possa salvá-lo.

​
Gerenciando seus design systems

Gerencie um design system pelo card dele na seção Design system. Abra o ícone More actions em um design system para editá-lo, defini-lo como padrão ou excluí-lo.
Quem pode gerenciar design systems:
  • Donos e admins do workspace: Podem criar, editar, definir o padrão e excluir qualquer design system.
  • Outros membros do workspace: Podem ver design systems e anexar um no chat de IA, mas não podem criá-los, editá-los ou excluí-los.
A página de configurações Design system com o menu do cartão aberto e Edit destacado, acima de Set as default e Delete

Abrindo um design system para edição

​
Definindo um design system padrão

Defina um design system como padrão do seu workspace para que novos apps comecem com ele automaticamente. Para definir seu design system padrão:
  1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em Settings.
  2. Clique em Design system.
  3. No design system desejado, clique no ícone More actions e clique em Set as default.
A página Design system com o menu do cartão aberto e Set as default destacado, entre Edit e Delete

Definindo um padrão do workspace

Para parar de usar um design system como padrão, abra o mesmo menu e clique em Remove default.

​
Excluindo um design system

Exclua um design system de que você não precisa mais.
Excluir um design system pelo card dele tem efeito imediato e não pode ser desfeito.
Para excluir um design system:
  1. Clique no nome do seu workspace no canto inferior esquerdo, depois clique em Settings.
  2. Clique em Design system.
  3. No design system desejado, clique no ícone More actions e clique em Delete.
A página de configurações Design system com o menu do cartão aberto e Delete destacado, abaixo de Edit e Set as default

Excluindo um design system

​
Usando seu design system enquanto constrói

Quando você inicia um novo app, seu design system padrão vem pré-selecionado, então o app é construído para combinar com sua marca desde o primeiro prompt. Para escolher um design system diferente, clique no ícone Add no chat de IA, selecione Use a design system e escolha o que deseja.
The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it

Escolhendo um design system ao iniciar um novo app

Você também pode aplicar um design system a um app em que já está trabalhando, pelo mesmo ícone Add no chat de IA. Quando seu workspace tem um design system, a opção mostra o nome dele, e clicar nela anexa o design system ao seu próximo prompt.
The AI chat Add menu open with Use a design system highlighted

Aplicando seu design system pelo chat de IA

Aplicar um design system tem efeito em um turno de construção no chat de IA. Se seu chat está em um modo que não constrói, como Discuss, mude para Build primeiro.
Aplicar um design system a um app que já está construído reconstrói o app para combinar, em vez de reestilizá-lo no lugar. Aplique-o cedo, ou espere que o app seja gerado novamente.

​
Perguntas frequentes

Clique em uma pergunta abaixo para saber mais sobre design systems.
Não. Descreva sua marca em poucas palavras, ou importe de um site, de um arquivo do Figma, de um pacote npm ou do seu logo, e a Base44 gera um design system completo para você. Depois, você pode ajustar qualquer parte dele.
No plano Builder e superiores, você tem 1 design system por workspace, então use um workspace separado para cada cliente ou projeto que precisa da própria marca. No plano Enterprise, não há limite.
Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a versão em inglês.