Documente seus sistemas de design com fractal

Jan 30, 2026

Como

Você gosta de aprender mais sobre sistemas de design? Então não perca o engenheiro superior da interface do usuário Mina Markham. no Gere Nova York Em 28 de abril, onde ela discutirá como ela criou Pantsuit, o sistema de design que alimentou muitas das aplicações hospedadas em HillaryClinton.com. E na costa oeste, em Gerar São Francisco Em 9 de junho, Stephanie Rewis. Compartilhará algumas das lições que ela aprendeu ao construir o sistema de design do Salesforce.

Até agora, muitos de nós estão familiarizados com Guias de estilo . Mas há uma nova raça de documentação do sistema de design ganhando vapor: a biblioteca de padrões. A principal diferença entre os dois é a principal fonte da documentação da ferramenta.

Uma documentação do guia de estilo tende a originar de um arquivo de marcação, portanto, para mostrar a marcação, o autor é frequentemente forçado a copiar e colá-lo na marcação. Isso é quase impossível de manter ao encaixar vários componentes juntos.

Uma biblioteca de padrões, por outro lado, trata nossos arquivos HTML componentes como cidadãos de primeira classe. Cada componente recebe sua própria página, onde exibe o HTML de marcação e renderizado diretamente do arquivo HTML. Isso garante que os arquivos e documentação HTML nunca saiam da sincronização.

As bibliotecas de padrão são geralmente construídas usando uma linguagem de modelos em vez de HTML simples. Os modelos podem incluir variáveis e outras lógicas, então podemos passar em vários conjuntos de dados, permitindo que as variações de um componente seja exibida.

É possível combinar vários modelos para criar exibições mais complexas ou até mesmo páginas completas. Esses arquivos são tão flexíveis que podem até ser usados na produção! Quaisquer alterações feitas na nossa biblioteca de padrões são automaticamente apanhadas pelo nosso site, como toda a marcação - para a biblioteca ou para a produção - origina de um único conjunto de modelos canônicos.

Design systems will be covered at both Generate New York and San Francisco this year — Os sistemas de design serão cobertos tanto para gerar Nova York e São Francisco este ano

Digite o fractal.

Criado por clearleft, Fractal. Ajuda você a criar e documentar bibliotecas de componentes da Web e integrá-los em seus projetos. Neste tutorial, vamos dar uma olhada mais de perto como funciona (baixe uma versão final da demonstração em aqui ).

O Fractal é um módulo Node.js que é instalado via NPM. Primeiro, você deseja instalar o módulo globalmente para que você possa gerar um novo projeto:

npm install --global @frctl/fractal

Com este pacote instalado, crie um novo projeto:

fractal new project-name

Este comando dispara um guia de instalação que passa pelo processo de configuração. Pedirá o título do projeto; os nomes dos componentes, documentação e pastas públicas; e se você estiver usando o Git para o controle de versão. Uma vez que essas perguntas sejam concluídas, o Fractal instalará todos os módulos necessários e configurará uma estrutura de pastas conforme especificado.

Se você quiser pular a instalação global e criar o projeto manualmente, as instruções de instalação manual podem ser encontradas em aqui .

Girando isso

Agora você tem um projeto fractal totalmente instalado, gire-o passo na pasta do projeto Nome do projeto CD e executando o comando Fractal Sync. Isso inicia um servidor local, assiste aos arquivos para alterações e inicia automaticamente Browsersync:

fractal start --sync

E assim, você tem uma instância de trabalho de fractal. Abra seu navegador de escolha e navegue até http: // localhost: 3000 para ver o início do seu novo projeto fractal. Para evitar que todos instalem fractal globalmente, crie um script no seu Package.json. que chama o binário fractal.

 "scripts": {
    "Fractal": "./node_modules/.bin/fractal start --sync"
}

Agora você pode usar npm executar fractal. sem ter que instalar nada globalmente.

Adicionando um componente

Agora você iniciou um projeto Fractal, é hora de adicionar alguns componentes. Os arquivos iniciais vêm com um componente chamado 'exemplo', mas vamos nos livrar disso e fazer um novo a partir do zero.

Uma das melhores coisas sobre o Fractal é que você pode organizar seus componentes, no entanto, você gosta dentro da pasta Components, e ele imitará automaticamente essa organização na navegação da biblioteca de padrões.

Para o primeiro componente, criaremos um novo botão principal dentro de um pasta de botão . Para fazer isso, crie com um arquivo de modelo em Componentes / botões / botão primário / botão primário.HBS . Fractal suporta modelos de guidão fora da caixa, então use o .hbs. extensão de arquivo:

& LT; Botão Classe = "Primário" "& gt; {{text}} & lt; / botão & gt;

O {{texto}} string dentro da tag de botão é um espaço reservado variável, e isso permite reutilizar o modelo, passando em valores diferentes para texto a partir do arquivo de dados.

Para criar o arquivo de dados, use o mesmo nome de base que o arquivo de guidão, mas com um yml. extensão. Agora o Button.config.yml. sentado dentro do Componentes / botões / botões primários pasta deve se parecer com isso:

 Título: Botão Primário
contexto:
    Texto: clique em mim

Tudo isso joga seu primeiro novo componente, o botão principal, um membro da categoria Button, com o texto: 'clique em mim'.

Variações de componentes

O Fractal suporta variações do mesmo componente, permitindo-nos exibir o mesmo componente com várias classes ou atributos de modificadores. Então, digamos que queríamos ter a opção de usar um botão escuro temático. Poderíamos criar um novo arquivo de modelo chamado Botão primário - Dark.hbs Ao lado do nosso modelo original (o traço duplo denota essas variações de componentes). Neste modelo, aplicaremos um modificador, podemos ligar para anexar novos estilos.

 & lt; Botão Classe = "Primário" Data-Theme = "Dark" & GT; {{TEXTO}} & lt; / Button & GT;

Agora, quando escrevemos nosso CSS, podemos incluir o seguinte seletor para alterar esse modelo com modificação de estilos.

 .Primary-Button [Data-Theme = "Dark"] {}

Variações de dados.

Assim como podemos definir variações criando vários arquivos de modelo, também podemos criar variações dentro de nossos dados. Nós podemos fazer isso dentro do Button.config.yml. arquivo adicionando uma matriz de variantes.

 Título: Botão Primário
contexto:
    Texto: clique em mim
Variantes:
- Nome: Download
    contexto:
Texto: Baixe agora
- Nome: Instalar
    contexto:
Texto: Instalar agora

Isso criará novas variações denominadas "Download" e 'Install', com texto diferente transmitido no botão. Um exemplo mais prático pode ser se você estivesse usando esse mesmo Botão primário.Hbs. modelo em fractal, bem como produção. Nesse caso, em vez de criar um modelo novo para o seu tema escuro, você pode passar o valor do tema como uma variável e usar as variações de dados para mostrar todos os diferentes temas do botão.

 & lt; Botão Classe = "Botão Principal" Data-Theme = "{{TEMA}}" & gt; {{text}} & lt; / Button & gt;

Título: Botão Primário
contexto:
    Texto: clique em mim
    Tema: Light.
Variantes:
- Nome: tema escuro
    contexto:
Texto: clique em mim
Tema: escuro

Lidar com outros ativos

O Fractal também lidará com os arquivos que não sejam marcas e dados. Qualquer css, javascript, imagens ou outros ativos que você adiciona à pasta do componente será exibido na guia "Ativos". Você pode especificar um Readme.md. Arquivo para o componente para que você possa gravar notas sobre como o componente é usado ou link para outras partes da documentação.

Próximos passos

Repetindo o exemplo anterior para todos os seus componentes principais cria um catálogo útil dos principais blocos de construção do seu site. Mas o poder real de uma biblioteca de padrões vem da capacidade de combinar essas peças juntas. Certifique-se de verificar o Documentação Fractal. Para saber como você pode começar a criar componentes mais complexos, combinando elementos atômicos menores para criar os maiores.

A pasta Docs é um ótimo lugar para colocar informações de guia de estilo tradicionais e notas suplementares. Isso pode cobrir coisas como documentação a bordo, diretrizes na voz e tom da sua marca, listas de cores e variáveis, e assim por diante. Segue a mesma navegação baseada em pasta como componentes, e se você organizar seus arquivos dentro de pastas de assuntos, você encontrará a navegação Fractal docs. uma brisa.

O Fractal também suporta fontes de dados mais complexas. Se você precisar gerar um grande conjunto de dados para um modelo, ou deseja puxá-lo de alguma API de terceiros, você pode usar componente-name.config.js. Para retornar um objeto JavaScript no lugar dos dados do arquivo YML.

Por fim, o Fractal permite que você use um número de idiomas de modelos diferentes.Certifique-se de conferir a lista completa em sua documentação.E acima de tudo, divirta-se!

Reserve seus ingressos para Gerar hoje!No Nova york Você pode aprender com Mina Markham, que construiu o sistema de design da campanha presidencial de Hillary Clinton e em São Francisco Stephanie Rewis explicará como você pode arquitetar e construir uma estrutura de CSS moderna para um 'sistema de design de vida' na escala corporativa.

Este artigo foi originalmente publicado na edição da Net Magazine 285, compre aqui

Documente seus sistemas de design com fractal

Digite o fractal.

Girando isso

Adicionando um componente

Variações de componentes

Variações de dados.

Lidar com outros ativos

Próximos passos

Como - Artigos mais populares

Como desenhar uma rosa: Dicas iniciantes e avançadas

Comece com Grav GMS

Como construir um site de blogs com Gatsby

Comece com o Express.JS

Como criar um efeito de digitação animado

Como gerenciar classes CSS com JavaScript

Como transmitir som em uma pintura

Criar um chuveiro de meteoro em 3ds max

Categorias