Frontend Academy · Aula

Consumo de um sistema de design

Instalar a biblioteca numa aplicação anfitriã, aplicar o fornecedor de temas, eliminar do pacote os componentes não utilizados e manter-se atualizado com as atualizações de versão.

Consumo de um sistema de design é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Instalação e configuração

Adicione o sistema de design como uma dependência. Algumas bibliotecas precisam de configuração adicional: provedor, importação de CSS e carregamento de fontes.

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

Provedor de tema

A maioria dos sistemas de design oferece um provedor de nível superior para o tema (claro/escuro), a localidade e o contexto compartilhado. Envolva sua aplicação uma única vez.

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

Importando componentes

Importe apenas o que você precisa — combinado com tree-shaking, somente os componentes utilizados serão distribuídos.

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

Importações por subcaminho

Algumas bibliotecas oferecem importações por subcaminho para maior clareza e economia no pacote.

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

Dicas de tree-shaking

Tree-shaking remove exportações não utilizadas durante o empacotamento. Requisitos: compilação ESM, sideEffects: false no package.json da biblioteca e importações nomeadas no seu código. Verifique com um analisador de pacotes.

Personalização com tema

Substitua as variáveis do tema para adequá-lo à sua marca — sem criar uma bifurcação da biblioteca.

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

Extensão de componentes

Precisa de um botão um pouco diferente? Componha, não bifurque.

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

Leia o CHANGELOG antes de atualizar

Leia sempre o CHANGELOG antes de atualizar versões MAJOR. Procure alterações incompatíveis, transformações automáticas de código para migração e novas APIs recomendadas.

Transformações automáticas de código para grandes atualizações

Boas bibliotecas fornecem transformações automáticas de código (scripts do jscodeshift) que automatizam migrações relacionadas a alterações incompatíveis.

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

Versões fixas versus intervalos com circunflexo

"^1.4.2" permite atualizações 1.x.y — arriscado se a biblioteca não seguir o SemVer. "1.4.2" fixa exatamente a versão — é a opção mais segura, mas é necessário atualizar manualmente. Renovate e Dependabot ajudam a automatizar as atualizações semanais.

Relatar problemas ao projeto original

Encontrou um erro? Registre um problema com uma reprodução mínima. Precisa de uma funcionalidade? Abra uma discussão primeiro. Contribuir com correções aprimora o sistema de estilos para todos.

Evitar substituições de estilos

Não acesse os componentes internos do sistema de estilos usando !important ou seletores descendentes. Use a API pública de temas. Substituições improvisadas deixam de funcionar na próxima atualização.

Verificação rápida

Se um sistema de estilos usa ESM e exportações nomeadas, qual é a forma mais limpa de usar apenas os componentes necessários?

Recapitulação: consumindo um sistema de estilos

Instale e envolva em DesignSystemProvider com um tema. Use importações ESM nomeadas para reduzir o pacote final. Substitua as variáveis do tema para adequá-lo à marca. Componha, não bifurque. Leia o CHANGELOG antes de atualizações MAJOR; execute transformações automáticas de código, se forem fornecidas. Escolha versões fixas ou intervalos com circunflexo com cuidado. Relate erros e envie contribuições ao projeto original. Não contorne a API pública usando !important.

Perguntas Frequentes

A aula “Consumo de um sistema de design” é grátis?

Sim — o texto completo de “Consumo de um sistema de design” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Consumo de um sistema de design”?

Instalar a biblioteca numa aplicação anfitriã, aplicar o fornecedor de temas, eliminar do pacote os componentes não utilizados e manter-se atualizado com as atualizações de versão. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Consumo de um sistema de design”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Storybook: histórias, controlos e documentação
Tokens de design com Style Dictionary
Versionamento e publicação no npm
Consumo de um sistema de design

← Voltar para Frontend Academy