Atomic Design and Sketch – Um guia para melhorar o fluxo de trabalho

Publicados: 2022-03-11

Sketch e Atomic Design são um poderoso conjunto de ferramentas e metodologias que os designers podem usar para criar sistemas de design que permitem a padronização e um fluxo de trabalho mais eficiente.

Sistemas de design: uma cartilha

Um sistema de design é um conjunto de componentes e diretrizes reutilizáveis que ajudam as equipes a se unirem em torno de uma linguagem comum durante a criação e a vida útil de um produto.

Na maioria dos casos, os sistemas de design são compostos por um guia de estilo e uma biblioteca de componentes. Eles também podem incluir elementos como voz e tom, bem como valores de marca. O objetivo de ter um sistema de design é criar um conjunto de padrões que atuem como uma única fonte de verdade para um produto ou marca.

O Material Design é um sistema de design de interface do usuário estruturado — O Material Design do Google é um sistema de design estruturado que fornece um conjunto de padrões e diretrizes de interface do usuário reutilizáveis.

O Material Design do Google é um exemplo de um sistema de design de interface do usuário estruturado. O Material Design foi introduzido em 2014 como uma forma de projetar e desenvolver aplicativos Android coesos.

Outro exemplo é o Voice and Tone do Mailchimp. Descreve como a voz de uma pessoa é sempre a mesma, mas o tom muda dependendo do contexto. Estar ciente disso ajuda a potencializar o conteúdo e dar personalidade à marca.

Embora existam muitos métodos diferentes que podem ser usados para criar um sistema de design, é uma boa ideia escolher uma estrutura que permita que a equipe se unifique em torno de uma linguagem comum e um conjunto de padrões. O Atomic Design é um ótimo exemplo de framework que atinge esses dois objetivos.

Design Atômico: Sistemas de Design de Edifícios

Atomic Design, uma metodologia introduzida por Brad Frost em 2013, baseia-se na ideia de que cada sistema de design pode ser definido como uma série de blocos de construção que coexistem.

Aqui está uma rápida visão geral dos componentes do Atomic Design:

Átomos . Representam os blocos básicos de construção de um sistema de design. Um exemplo é um botão ou um estilo de texto.
Moléculas . Um grupo de átomos trabalhando juntos como uma unidade. As moléculas são elementos tangíveis da interface do usuário. Por exemplo, um botão e um campo de texto podem ser agrupados para criar um formulário de pesquisa.
Organismos . Átomos e moléculas trabalhando juntos em uma estrutura complexa. Um campo de pesquisa agrupado com uma barra de navegação forma um organismo de cabeçalho em um site.
Modelos. Objetos de nível de página que colocam componentes em um layout que define a estrutura de conteúdo. Por exemplo, pegar um organismo de cabeçalho e colocá-lo em um modelo de página inicial.
Páginas. Instâncias de modelos que representam o produto final.

O sistema de design atômico é uma estrutura para um sistema de design completo — Uma ótima estrutura e metodologia para um sistema de design é o Atomic Design, que inclui componentes de design reutilizáveis e elementos de interface do usuário.

“Temos a tarefa de criar interfaces para mais usuários em mais contextos usando mais navegadores em mais dispositivos com mais tamanhos de tela e mais recursos do que nunca. Essa é uma tarefa assustadora, de fato. Felizmente, os sistemas de design estão aqui para ajudar.” — Brad Frost como uma introdução ao design atômico e sistemas de design.

Usar o Atomic Design para criar e manter um sistema de design ajudará os designers a trabalhar com mais eficiência e a se comunicar melhor dentro de suas equipes. Há uma infinidade de ferramentas e métodos para criar e manter sistemas de design, mas geralmente as melhores ferramentas são aquelas com as quais estamos mais familiarizados.

Como usar o design atômico com o Sketch

Para desenvolver um sistema de design usando o Atomic Design, uma ótima ferramenta (e já familiar) é o Sketch. Ele fornece uma tela para criarmos átomos, moléculas e organismos: os elementos necessários para definir o núcleo de um sistema de design.

Criando Átomos

Começamos criando três tipos de átomos no Sketch: símbolos, estilos de camada e estilos de texto.

Símbolos. Os símbolos nada mais são do que componentes reutilizáveis. Eles são definidos uma vez porque podem ser instanciados em todo o produto. Por exemplo, um símbolo de seta (átomo) pode ser definido com propriedades como cor da borda, tamanho, etc. Podemos então reutilizar este símbolo sem ter que recriá-lo a cada vez.

Estilos de camada . Estilos de camada são os elementos de estilo visual reutilizáveis que permanecem consistentes em todas as camadas. Por exemplo, a cor de preenchimento da seta definida anteriormente.

Estilos de Texto. Estilos de texto, semelhantes aos estilos de camada, são elementos reutilizáveis que garantem consistência em objetos de texto semelhantes. Por exemplo, definindo o tamanho da fonte e a cor de um elemento h1. Funciona de maneira semelhante aos estilos de texto no Google Docs ou no Microsoft Word.

Quando definimos símbolos, estilos de camada e estilos de texto, o Sketch pode dividi-los em categorias hierárquicas em seus menus de símbolos e estilos de texto com o uso de um “/” (barra). Seguir as convenções de nomenclatura e ter um conjunto bem definido de categorias mestras dará aos arquivos uma estrutura organizada, reduzindo confusões e inconsistências.

O menu do painel de inserção na instanciação do Sketch for Atomic Design — No Sketch, podemos usar o menu do painel de inserção para arrastar e soltar componentes reutilizáveis que foram criados.

Aqui estão algumas maneiras de criar categorias hierárquicas para símbolos, texto e estilos de camada no Sketch.

Podemos representar símbolos usando a seguinte convenção de nomenclatura sugerida em Atoms/ :

Bens
Botões
Controles de entrada
Imagens
Navegação
Em formação

Metodologia de design atômico: os átomos do símbolo são facilmente definidos no Sketch — Podemos criar átomos de símbolos de forma rápida e fácil no Sketch que formarão a base para um sistema de design usando o Atomic Design.

Não converteremos estilos de camada em símbolos, portanto, identificá-los por seu grupo semântico é suficiente. Novamente, usando o Atoms /:

Preenchimentos
Fronteiras
Sombras
Gradientes

Componentes de design atômico: átomos de estilo de camada definidos no Sketch — Átomos de estilo de camada podem ser definidos no Sketch, que será usado em todo o sistema de design.

Semelhante aos estilos de camada, veja como podemos criar estilos de texto em Atoms /:

Títulos
Corpo
Rubrica
Rótulos
Links

Padrões de design atômico: átomos de estilo de texto definidos no Sketch — Átomos de estilo de texto no Sketch ajudam a construir a base de um sistema de design usando a metodologia Atomic Design.

Uma linguagem de design unificada não deve ser apenas um conjunto de regras estáticas e átomos individuais; deve ser um ecossistema em evolução.—Airbnb na construção de uma linguagem visual.

Criando Moléculas

Os átomos definem a parte básica das diretrizes de design de um produto, mas por si só não são totalmente úteis. Para derivar alguma funcionalidade, juntamos átomos e criamos moléculas.

Unir um rótulo (átomo) com um botão de entrada (átomo) para criar uma função de pesquisa é um bom exemplo de um elemento de molécula comumente usado.

Um elemento de molécula Atomic Design definido no Sketch — Unindo átomos no Sketch para formar moléculas funcionais.

Uma palavra de cautela, pois pode haver um pouco de área cinzenta aqui. Um botão, em nível de código , é considerado um átomo, mas um botão em nível de design é considerado uma molécula, pois estamos agrupando um estilo de camada e um átomo de estilo de texto. Para evitar qualquer confusão, é uma boa ideia pensar apenas nos elementos de nível de código.

As principais categorias que se enquadram em Moléculas/ são:

Em formação
Navegação
Controles de entrada

Como as moléculas começarão a moldar nossos produtos de maneira interativa, é uma boa ideia definir melhor as categorias acima. Neste caso, vamos definir um conjunto de subcategorias que representa uma biblioteca de padrões:

Listas suspensas
Alterna
Controles deslizantes
Abas
Paginação
Indicadores de progresso
Campos de data
Campos de texto
Caixas de seleção
Botões do rádio
Módulos

Definindo moléculas de design atômico no Sketch — Unindo átomos no Sketch para criar moléculas funcionais.

Criando Organismos

Os organismos são grupos de átomos e moléculas. Eles também podem ser uma parte de outros organismos.

Ao contrário de átomos e moléculas, os organismos não têm uma inclusão abstrata nos produtos que estamos projetando; são componentes concretos e reutilizáveis que podem ser facilmente identificados com ações específicas. Sua estrutura é mais complexa do que um átomo ou molécula.

Se o campo de pesquisa definido anteriormente for agrupado com outros componentes, como uma barra de navegação (molécula) e um logotipo (átomo), é criado um organismo. Um exemplo é uma barra de navegação ou um calendário.

Organismos, como moléculas, podem se encaixar nas mesmas categorias e subcategorias:

Aqui estão as principais categorias que criaremos para Organisms/:

Em formação
Navegação
Controles de entrada

Metodologia de design atômico: Organismos de design atômico definidos no Sketch — No Sketch, os organismos do Atomic Design podem ser criados combinando átomos e moléculas. Da esquerda para a direita, temos um organismo de bate-papo, um organismo de cabeçalho e dois exemplos de organismos de navegação móvel.

Assim como as moléculas, também criaremos subcategorias para os organismos:

Listas suspensas
Alterna
Controles deslizantes
Abas
Paginação
Indicadores de progresso
Campos de data

Até este ponto, a maior parte da interface do usuário já foi projetada, então agora é tão simples quanto chamar as instâncias de nossos componentes quando eles são necessários para o design.

É fácil localizar cada um desses componentes por seus grupos semânticos, seja pesquisando-os diretamente usando o painel de inserção na barra de ferramentas do Sketch, onde encontraremos um conjunto bem organizado de 3 categorias principais, ou usando um plugin como Corredor para Sketch.

Componentes de design atômico no Sketch que seguem os princípios de design atômico — Os componentes do Atomic Design no Sketch podem ser encontrados usando o painel de inserção na barra de ferramentas do Sketch. Isso permite que os projetistas usem os componentes de maneira rápida e fácil em todo o projeto.

O Runner for Sketch otimiza o fluxo de trabalho de um designer fornecendo um conjunto de comandos de teclado que eles podem usar em vez de encontrar coisas em menus infinitos. Por exemplo, eles podem digitar a palavra insert , pressionar a tecla tab e procurar os componentes de que precisam.

Ao digitar átomos , uma lista suspensa nos mostrará todos os elementos que se enquadram nessa categoria. Se átomos e moléculas tiverem categorias compartilhadas, apenas os átomos serão vistos e todas as moléculas serão ignoradas.

Runner for Sketch é um plugin para procurar componentes de design — Plugins como *Runner for Sketch* fornecem uma maneira de usar atalhos de teclado para pesquisar componentes em vez de navegar por menus infinitos.

Embrulhando-o

Sketch e Atomic Design são um poderoso conjunto de ferramentas que podem ser usadas juntas para melhorar os fluxos de trabalho de design e facilitar uma estrutura de sistema de design eficaz.

Usando o conceito de átomos , moléculas e organismos como base de componentes, o Atomic Design ajuda os designers a se unirem em torno de uma linguagem comum durante a criação e a vida útil de um produto.

Os designers podem usar ferramentas como o Sketch para implementar o Atomic Design, proporcionando um fluxo de trabalho mais eficiente e um conjunto de padrões que são adotados por todos na equipe de design, incluindo desenvolvedores, durante os estágios finais do projeto.

• • •