Resumo Breve
Este vídeo é um tutorial abrangente sobre como construir um sistema de design no Figma, abordando desde a configuração inicial dos tokens de design até a criação de componentes complexos e responsivos. O vídeo ensina a estruturar tokens de design usando uma abordagem de três camadas (coleção de marca, coleção de alias e coleção de mapas), explica como criar escalas de cores e fontes consistentes, e demonstra a construção de vários componentes de UI, como botões, campos de texto, menus, caixas de seleção, botões de rádio, switches, áreas de texto, barras de abas, grupos de botões, links, breadcrumbs, avatares, tags, loaders, badges, barras de progresso, snackbars, carrosséis e tabelas.
- Configuração de tokens de design com uma abordagem de três camadas: coleção de marca, alias e mapas.
- Criação de escalas de cores e fontes consistentes para garantir a harmonia visual.
- Construção de componentes de UI reutilizáveis e responsivos, adaptáveis a diferentes dispositivos.
Uma Introdução [0:00]
O vídeo apresenta uma série de tutoriais sobre a construção de um sistema de design, desde os componentes mais básicos até os mais avançados. O objetivo é fornecer um conjunto completo de tokens de design e um sistema de design inicial simples, ensinando como publicar sistemas de design e construir componentes essenciais.
Configuração de Token de Design - Introdução [0:49]
O vídeo aborda a configuração da estrutura de tokens de design, comparando abordagens de dois e três níveis. A UI Collective utiliza a abordagem de três níveis (coleção de marca, alias e mapas) para maior flexibilidade e consistência, especialmente em sistemas multi-marca. A abordagem de dois níveis (primitiva e semântica) é comum, mas pode ter limitações em cenários multi-marca.
Coleção de Marca [4:17]
A coleção de marca contém todos os valores em sua forma mais pura, como códigos hexadecimais para cores e estilos de fonte. A nomenclatura de cores utiliza uma escala de 100, permitindo flexibilidade para adicionar tons mais claros ou escuros. Pesos e estilos de fonte também são armazenados aqui, garantindo consistência.
Escalas de Cores para o Nosso Sistema de Design [7:41]
O vídeo discute a importância de escalas de cores bem definidas para um sistema de design. A UI Collective utiliza um conjunto de cores base (roxo, vermelho, verde, cinza, laranja e azul) para cobrir os casos de uso mais comuns, como cores primárias, erros, sucessos, avisos e informações.
Construindo uma Escala de Cores [9:52]
O vídeo demonstra como construir escalas de cores ajustando a opacidade das cores base em fundos brancos e pretos para criar tons mais claros e escuros. Essa técnica permite criar escalas consistentes e limpas, evitando o uso direto de opacidade nas cores do sistema de design.
Construindo a Coleção de Marca [11:37]
O vídeo mostra como criar variáveis de cor no Figma para representar a coleção de marca. As cores são nomeadas seguindo a escala de 100 e seus códigos hexadecimais são inseridos. O vídeo também explica como lidar com cores que não seguem o intervalo de opacidade padrão, atribuindo-lhes valores como 50.
Variáveis de Fonte [19:39]
O vídeo explica como configurar variáveis de fonte dentro da coleção de marca. Isso inclui a família da fonte (por exemplo, Inter, Poppins) e o peso da fonte (por exemplo, regular, médio, seminegrito). É importante que o peso da fonte corresponda ao valor especificado no Figma para garantir a conexão correta.
Construindo uma Escala [22:45]
O vídeo aborda a criação de uma escala numérica para manter a consistência no tamanho do texto, espaçamento, largura e raio. A escala é baseada em múltiplos de quatro, com valores como 0.25 e 0.50 para representar 1 e 2 pixels, respectivamente.
Introdução à Coleção de Alias [26:45]
A coleção de alias atribui funções específicas às cores da coleção de marca, como "primário", "erro", "sucesso" e "aviso". Isso ajuda a manter a consistência e facilita a tematização do sistema de design.
Construindo a Coleção de Alias [29:42]
O vídeo demonstra como criar a coleção de alias, duplicando as escalas de cores da coleção de marca e atribuindo-lhes papéis específicos. Por exemplo, a escala roxa é atribuída ao papel "primário", a escala vermelha ao papel "erro" e assim por diante.
Variáveis de Largura e Raio da Borda [33:12]
O vídeo explica como criar variáveis numéricas para largura e raio da borda na coleção de alias. As larguras da borda são categorizadas como "nenhuma", "pequena", "média" e "grande", enquanto os raios da borda são definidos para cantos retos, pequenos, médios e grandes.
Configuração de Sistema de Design Multi-Marca [34:32]
O vídeo aborda o design de sistemas multi-marca, comparando abordagens de "casa de marca" (marcas semelhantes) e "casa de marcas" (marcas distintas). Para uma casa de marcas, sugere-se ter sistemas de design separados ou duplicar coleções e alterar as coleções aplicadas.
Adicionando Branco e Preto [38:45]
O vídeo explica como adicionar variáveis para branco e preto dentro da coleção neutra na coleção de alias. Isso pode ser feito criando novas variáveis ou incluindo-as dentro do grupo neutro existente.
Introdução à Coleção de Mapas [39:50]
A coleção de mapas é onde as variáveis são aplicadas aos componentes, incluindo variáveis de ícone, texto, superfície e borda. Nem todas as cores da coleção de alias precisam ter um propósito na coleção de mapas; apenas as variáveis específicas que serão usadas nos componentes são selecionadas.
Variáveis de Texto [41:48]
O vídeo demonstra como criar variáveis de texto na coleção de mapas, incluindo títulos de texto, corpo, ação, desabilitado, informação, aviso, sucesso e erro. Essas variáveis são usadas para definir as cores do texto em diferentes contextos.
Variáveis de Ícone [45:15]
O vídeo explica que as variáveis de ícone podem ser as mesmas que as variáveis de texto para manter a consistência. As únicas diferenças são que não há títulos de ícone ou corpo de ícone; em vez disso, há um ícone padrão ou primário.
Variáveis de Superfície [46:20]
O vídeo aborda a criação de variáveis de superfície, incluindo cor da página, superfície primária (para cartões), ação de superfície (para botões) e cores de fundo para alertas (sucesso, aviso, informação, erro).
Variáveis de Borda [49:02]
O vídeo demonstra como criar variáveis de borda, incluindo borda padrão, sucesso, informação, aviso, erro, desabilitado e foco. As cores da borda são escolhidas para complementar as cores de superfície e garantir a acessibilidade.
Construindo o Modo Escuro [51:32]
O vídeo explica como construir um modo escuro invertendo as cores do modo claro. Algumas cores, como as cores primárias da marca, podem permanecer as mesmas, enquanto outras são ajustadas para garantir a acessibilidade.
Construindo uma Escala de Tipo [54:28]
O vídeo utiliza a ferramenta Type Scale para criar uma escala de tipo consistente, definindo o tamanho da fonte base para 16 pixels e ajustando os tamanhos dos títulos (H1 a H6) e parágrafos. A escala é adaptada para dispositivos móveis, mantendo a consistência e a acessibilidade.
Coleção Responsiva [57:27]
A coleção responsiva armazena variáveis que mudam entre tamanhos de dispositivos, como tamanho da fonte, espaçamento, preenchimento e lacuna. O vídeo demonstra como criar variáveis numéricas para tamanhos de fonte, altura da linha e espaçamento de parágrafo para desktop e dispositivos móveis.
Construindo Estilos de Texto [1:05:51]
O vídeo mostra como criar estilos de texto no Figma, aplicando as variáveis de tamanho da fonte, altura da linha e peso da fonte da coleção responsiva. Estilos de texto separados são criados para títulos (H1 a H6) e parágrafos (extra pequeno, pequeno, médio e grande).
Biblioteca de Ícones Material 3 [1:14:35]
O vídeo menciona o uso da biblioteca de ícones Material 3, que fornece componentes locais para ícones. Esses ícones são usados nos componentes do sistema de design.
Escopo das Suas Variáveis do Figma [1:14:48]
O vídeo explica como escopo as variáveis do Figma para esconder aquelas que não são necessárias ao aplicar componentes. Isso simplifica o processo de seleção de variáveis e evita confusão.
Construindo um Componente de Botão [1:16:53]
O vídeo demonstra como construir um componente de botão, adicionando texto, preenchimento, cor de superfície, borda e raio. Variáveis são aplicadas para garantir a consistência com o sistema de design.
Adicionando Variantes de Botão [1:23:45]
O vídeo explica como adicionar variantes ao componente de botão, incluindo estados de foco e desabilitado. O estado de foco é criado adicionando uma borda ao redor do botão, enquanto o estado desabilitado utiliza cores desabilitadas para a superfície, borda e texto.
Construindo um Componente de Rótulo [1:27:28]
O vídeo demonstra como construir um componente de rótulo, que pode ser usado em outros componentes, como campos de texto. O componente de rótulo inclui um ícone de ajuda e uma propriedade de texto para o rótulo.
Construindo um Componente de Campo [1:31:09]
O vídeo explica como construir um componente de campo, que inclui um espaço reservado para o texto e ícones opcionais. O componente é configurado para garantir que os ícones permaneçam alinhados, independentemente do tamanho do texto.
Adicionando Variantes de Campo [1:34:53]
O vídeo demonstra como adicionar variantes ao componente de campo, incluindo estados de foco e desabilitado. O estado de foco é criado adicionando uma borda ao redor do campo, enquanto o estado desabilitado utiliza cores desabilitadas para a superfície, borda e texto.
Construindo um Componente de Entrada [1:38:27]
O vídeo explica como construir um componente de entrada, combinando os componentes de rótulo e campo. Isso permite criar campos de entrada com rótulos personalizáveis e propriedades de estado.
Construir um Componente de Menu [1:42:57]
O vídeo demonstra como construir um componente de menu, que consiste em itens de menu individuais. Os itens de menu incluem um ícone, um rótulo e estados de hover, foco e desabilitado.
Construir uma Caixa de Seleção [1:54:00]
O vídeo explica como construir um componente de caixa de seleção, que inclui um ícone de verificação e estados de hover, foco, desabilitado e selecionado. O componente também inclui um rótulo opcional.
Construir um Botão de Rádio [2:00:30]
O vídeo demonstra como construir um componente de botão de rádio, que inclui um círculo e estados de hover, foco, desabilitado e selecionado. O componente também inclui um rótulo opcional.
Construir um Switch [2:05:53]
O vídeo explica como construir um componente de switch, que inclui um botão deslizante e estados de hover, foco, desabilitado e selecionado. O componente também inclui um rótulo opcional.
Construir uma Área de Texto [2:14:43]
O vídeo demonstra como construir um componente de área de texto, que permite aos usuários inserir texto longo. O componente inclui um rótulo e um campo de texto expansível.
Construir uma Barra de Abas [2:20:02]
O vídeo explica como construir um componente de barra de abas, que consiste em itens de aba individuais. Os itens de aba incluem um ícone, um rótulo e estados de hover, foco, desabilitado e selecionado.
Construir um Grupo de Botões [2:26:47]
O vídeo demonstra como construir um componente de grupo de botões, que permite agrupar vários botões juntos. Os botões individuais incluem estados de hover, foco, desabilitado e selecionado.
Construir um Link [2:32:09]
O vídeo explica como construir um componente de link, que inclui um rótulo e ícones opcionais. O componente inclui estados de hover, foco e desabilitado.
Construir um Breadcrumb [2:35:44]
O vídeo demonstra como construir um componente de breadcrumb, que permite aos usuários navegar em uma hierarquia de páginas. O componente consiste em links individuais, com o último link indicando a página atual.
Construir um Avatar [2:37:36]
O vídeo explica como construir um componente de avatar, que exibe uma imagem ou iniciais de um usuário. O componente inclui diferentes tamanhos e tipos (ícone, imagem, iniciais).
Construir uma Tag [2:44:07]
O vídeo demonstra como construir um componente de tag, que exibe uma etiqueta ou categoria. O componente inclui estados de hover, foco, desabilitado e selecionado.
Construir um Loader [2:48:47]
O vídeo explica como construir um componente de loader, que indica que algo está carregando. O componente consiste em círculos rotativos e inclui diferentes tamanhos.
Construir um Badge [2:52:56]
O vídeo demonstra como construir um componente de badge, que exibe uma notificação ou contagem. O componente inclui diferentes estilos (padrão, erro, sucesso, informação, aviso) e tipos (ponto).
Construir uma Barra de Progresso [2:56:23]
O vídeo explica como construir um componente de barra de progresso, que indica o progresso de uma tarefa. O componente inclui um rótulo opcional e pode ser personalizado para diferentes larguras.
Construir um Círculo de Progresso [2:59:50]
O vídeo demonstra como construir um componente de círculo de progresso, que indica o progresso de uma tarefa em um formato circular. O componente inclui um rótulo opcional e pode ser personalizado para diferentes tamanhos.
Construir um Snackbar [3:02:19]
O vídeo explica como construir um componente de snackbar, que exibe uma mensagem breve e informativa. O componente inclui um título, um corpo de texto, um link opcional e um ícone de fechamento.
Construir um Carrossel [3:08:57]
O vídeo demonstra como construir um componente de carrossel, que permite aos usuários navegar por uma série de itens. O componente inclui setas de navegação e pode ser personalizado para diferentes tamanhos.
Construir um Ícone de Botão [3:13:47]
O vídeo explica como construir um componente de ícone de botão, que exibe um ícone dentro de um botão. O componente inclui estados de hover, foco e desabilitado.
Construir uma Tabela [3:15:26]
O vídeo demonstra como construir um componente de tabela, que exibe dados em um formato tabular. O vídeo aborda a estrutura básica da tabela, incluindo cabeçalhos, linhas e células.
Publicando e Subscrevendo um Sistema de Design [3:30:19]
O vídeo explica como publicar e subscrever um sistema de design no Figma, permitindo que outros designers e desenvolvedores utilizem os componentes e estilos criados.