Crie um design system de workspace na Base44 para definir as cores, fontes, logo e componentes da sua marca uma vez e aplicar um visual consistente em todos os seus apps.
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.
Seus design systems nas configurações do workspace
Disponibilidade:
Design systems estão disponíveis no plano Builder e superiores.
Workspaces no plano Builder e superiores incluem 1 design system. Workspaces Enterprise não têm limite.
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.
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.
Um design system, com as configurações da sua marca à esquerda e uma prévia ao vivo à direita
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.
Você cria um design system a partir das configurações do seu 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:
Clique no nome do seu workspace no canto inferior esquerdo, depois clique em Settings.
Clique em Design system.
Clique em Create. Se seu workspace já tem um design system, clique em Create new design system.
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.
Clique em Create. Gerar seu design system pode levar alguns minutos, e você pode sair e voltar enquanto ele é gerado.
Revise o design system gerado na prévia e ajuste o que quiser.
Criando um design system a partir dos materiais da sua marca
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:
Overview
Uma breve descrição da sua marca. A Base44 a usa para manter tudo o que gera alinhado à marca.
Logos
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.
Editando os logos da sua marca
Typography
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. Qualquer pessoa no seu workspace que pode editar, ou seja, donos, admins e editores, pode carregar uma fonte. Viewers e guests não podem.
Escolhendo suas fontes de título e de texto
Color palette
Clique em uma cor para editá-la, ou clique em Generate palette e descreva as cores que deseja.
Editando uma cor na paleta
Tone of voice
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.
Adicionando traços de tom de voz
Core values
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.
Adicionando seus valores centrais
Corner radius
Defina o quão arredondados seus componentes parecem.
Definindo os valores de raio dos cantos
Spacing scale
Ajuste quanto espaço vai entre os elementos.
Ajustando sua escala de espaçamento
Shadow
Defina o quão elevados seus componentes parecem. Clique em uma sombra para ajustar sua posição, desfoque, extensão e cor.
Definindo os valores de sombra
Design guidelines
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.
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.
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: Podem criar, editar, definir o padrão e excluir qualquer design system.
Editores: Podem criar e editar design systems. Apenas donos e admins podem definir o padrão ou excluir um design system.
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.
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.
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.
Clique em uma pergunta abaixo para saber mais sobre design systems.
Preciso de habilidades de design para criar um design system?
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.
Cada cliente ou projeto pode ter seu próprio design system?
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. Workspaces Enterprise não têm limite.
Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a versão em inglês.
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.
