Glossário

A

Atlantica Design

Nosso sistema base de design. Contém componentes visuais e Tokens genéricos, e será usado para a criação dos Design Systems. Nesse sistema, possuímos Tokens indefinidos ou com valores padrões, mas que serão alterados em um sistema de temas (Themes) para criar identidades visuais específicas para cada um de nossos projetos. Ele é análogo ao Material Design do Google, mas para projetos da Outsmart.

Atoms

São os componentes visuais de menor nível dentro dos nossos Design Systems. Eles não são divididos em elementos menores no nosso sistema, por isso são chamados de atômicos. Eles são usados em conjunto com os Tokens para compor as nossas Molecules. Os Atoms, são elementos bastante básicos que se repetem muitas vezes dentro das nossas aplicações. Botões, Textos, Ícones e Imagens são alguns exemplos de Atoms que podem aparecer no nosso sistema. Usamos a denominação Atom para elementos que fazem parte do nosso Base Components, mas também para elementos do Design System dos nosso projetos.

B

Base Components (ou Vanilla Components)

Conjunto de Atoms, Molecules e Trees que fazem parte do nosso sistema base de design: Base Design System Atalntica Design. Usamos esse termo para categorizar os componentes genéricos do nosso sistema, antes de serem aplicados em projetos e sofrerem alterações dos Temas (Themes).

Base Token System

Conjunto de Tokens do nosso sistema base de design: Atlantica Design. Nele estão determinados todos os Tokens que podem ser usados pela nossa equipe para criar identidades visuais específicas para cada projeto. Ao escolher os valores dos Tokens, criamos um Theme que pode ser aplicado em um projeto para criar o seu Design System.

D

Design System

Uma série de componentes que pode ser reutilizada em diferentes combinações, como se fossem peças de Lego. O componente é codado a partir da semântica de Design, ele será o elo entre os desenvolvedores e designers. A partir do Atlantica Design aplicado um tema com tokens, o Design System é criado.

M

Molecules

São componentes visuais essenciais para criação das nossas interfaces. São criados utilizando Atoms e Tokens, que se relacionam a partir de regras pré determinadas. As Molecules podem ser utilizadas nas telas das nossas aplicações para compor as interfaces. Nossa principal estratégia para criar telas mobile é empilhar uma lista de Molecules até preencher todo o espaço. Cada Molecule ocupa totalmente a largura da tela, facilitando a composição visual e a responsividade das interfaces.

P

Projeto de Design

Arquivo onde os designers trabalham para criar um projeto. Nele encontramos os componentes do Design System do projeto, prontos para uso pelos designers como Symbols. Os designer podem criar telas nesse projeto, e utilizam os componentes do design system para preencher essas telas. A partir desse projeto podem ser criados: documentos de design, wireframes e handoff para devs. Atualmente estamos usando o Sketch.

Prop (ou Visual Props)

São as propriedades visuais de um componente do Atlantica. Podem ser cores, espaçamentos, fontes, tamanhos. Cada componente pode ter várias Props, até mesmo mais de uma Prop do mesmo tipo (um botão pode ter cor de fundo, cor de texto e cor de borda). Uma Prop possuí uma chave (um nome único dentro do componente) e pode ter um valor determinado. As props são uma interface de relacionamento entre os Tokens e Componentes. O mapeamento entre Props e Tokens é definido pelo Prop-Token Mapping. ex: Botão com fundo vermelho. Prop: BackgroundColor. Value: Red

Prop-Token Mapping

Para relacionar Tokens, Props e Componentes, utilizamos um sistema chamado Prop-Token Mapping. Para um determinado componente, definimos quais Props podem ser alteradas por Tokens, e para cada Prop definimos a chave do Token que determina o comportamento do componente. Esse mapeamento é essencial para criarmos nossos componentes em código, e até mesmo para automatizarmos nossos projetos de design.

Ex: Botão
BackgroundColor: SecondaryColor,
BorderColor: PrimaryColor
TextColor: PrimaryColor
TextFont: MainFont
exemplo não exaustivo

T

Theme

Em cada projeto irá existir um Theme, nele é definido os Tokens e seus valores. O Theme, que será exportado para um arquivo .json chamado Token File, junto com o Atlantica System Design irá gerar o Design System de cada projeto com uma aparência única.

Token

Tokens são unidades de design que determinam comportamentos padrão dentro de um Design System. Eles podem ser de vários tipos: fonte, tamanho, cor, estilo de texto, sombra, opacidade… Um Token determina um comportamento visual que se repete dentro de vários componentes dentro dos nossos Design Systems.

Token File

Um arquivo em formato .json que será gerado pelos designers após a criação do layout no Sketch, nesse arquivo irá possuir todos os Tokens necessários para definir o Theme do projeto. Onde junto com o Atlantica Design irá gerar o Design System do projeto.

Token Manager

Para administrar os tokens dos nossos Design Systems, precisamos de uma interface onde possa ser visualizada uma lista com todos os Tokens e onde seus valores possam ser facilmente alterados. Nossa solução para isso é criar um plugin do Sketch onde os designers possam experimentar a influencia dos tokens nos componentes do Design System.

Tree

Onde será exibido todos os componentes visuais necessários para criar uma tela completa. Para construir um exemplo de Tree, é necessário apenas de uma lista (Array) de componentes do tipo Molecule.

Exemplo do Array de componentes: [Componente A(Model), Componente B(Model), Componente C(Model), Componente D(Model), Componente D(Model), Componente D(Model)]

TODO

• Design Components