Guia para bibliotecas no Figma
No Figma, a biblioteca é uma coleção de ativos de design, como componentes, estilos e variáveis. Esses ativos de design ficam em um único arquivo, mas podem ser reutilizados entre diferentes arquivos ou projetos.
As pessoas costumam usar as bibliotecas para compartilhar elementos comuns de design, como botões, ícones, fragmentos de IU, cores ou valores para determinadas propriedades. Isso faz com que todos sejam consistentes e facilita a criação a partir de designs já existentes.
Quando alguém altera ativos na biblioteca, as pessoas rapidamente conseguem revisar as alterações e automaticamente atualizar seus designs.
Exemplo
Veja um exemplo de como uma equipe de design que trabalha no fictício aplicativo Habitz deve utilizar as bibliotecas no Figma:
- Em um arquivo, Kai cria componentes para diferentes partes do aplicativo, como a barra de navegação, o menu, o cabeçalho e outros elementos de IU.
- Ela publica os componentes finalizados como uma biblioteca a partir de dentro do arquivo.
- Trabalhando em um diferente arquivo no mesmo projeto, Timothy visualiza a biblioteca e adiciona alguns componentes à tela.
- Algum tempo depois, Kai atualiza um dos componentes no arquivo em que a biblioteca foi publicada.
- Em todos os outros arquivos que utilizam o componente, as pessoas que trabalham no arquivo receberão uma notificação de que há uma atualização disponível para o componente. Elas podem analisar o componente e aceitar a atualização quando estiverem prontas. A atualização é aplicada a qualquer instância do componente que tenham utilizado.
Gostaria de saber mais sobre Kai e a equipe Habitz? Você pode acompanhar a jornada deles no lançamento de um sistema de design no curso da Figma Introdução a sistemas de design →
Criar componentes, estilos ou variáveis para utilizar em uma biblioteca
O objetivo de uma biblioteca é compartilhar ativos de design reutilizáveis com outras pessoas com quem você trabalha. Esses ativos podem ser componentes, estilos ou variáveis. Selecione a aba para saber mais sobre cada um.
Os componentes são os elementos fundamentais de um design.
Eles podem ser elementos individuais, como ícones ou botões, ou uma coleção de elementos, como menus e layouts.
Ao utilizar bibliotecas, o arquivo da biblioteca contém o componente principal, que define as propriedades do componente para cada pessoa utilizar.
Ao acessar uma biblioteca no seu arquivo, você pode adicionar uma instância do componente à tela. Essa instância receberá quaisquer atualizações feitas no componente principal.
Saiba como criar componentes em seus designs →
Os estilos definem uma coleção de propriedades ou configurações que queremos reutilizar. Por exemplo, você pode utilizar estilos para:
- Capturar valores de cores específicas para preenchimentos e traços
- Definir propriedades de textos, como fontes, altura da linha e espaçamento entre letras
- Elaborar predefinições para efeitos de sombra e desfoque
- Criar scaffoldings compartilháveis na forma de linhas, colunas e grades de layout
Saiba mais sobre criação de estilos para cores, textos, efeitos e grades de layout →
As variáveis armazenam valores reutilizáveis que você pode aplicar em todos os tipos de propriedades de design.
Por exemplo, é possível:
- Criar tokens de design para melhorar a eficiência ao gerenciar sistemas de design
- Alternar uma estrutura entre diferentes tamanhos de dispositivos e imediatamente ver o espaçamento atualizado de acordo com o sistema espacial definido
- Pré-visualizar como diferentes linguagens afetam um design
- Criar um design de checkout de carrinho totalmente funcional que calcule o total de pedidos com base em quais itens foram adicionados ao carrinho
- Criar um protótipo de um questionário interativo que utilize lógica condicional para mostrar se um usuário respondeu a uma questão de forma correta ou incorreta
Publicar uma biblioteca
Antes de ter acesso a componentes, estilos ou variáveis em outros arquivos, você precisa publicá-los como uma biblioteca. É possível escolher quais deles publicar, e nos planos Organization e Enterprise, quem pode ter acesso a eles.
Se você alterar um estilo, um componente ou uma variável publicados, o Figma somente aplicará as alterações nas instâncias no arquivo atual. Se quiser que essas alterações sejam refletidas em sua biblioteca, você também precisará publicar essas alterações na biblioteca.
Escolher quais bibliotecas utilizar em seus arquivos
É possível acessar bibliotecas publicadas em quaisquer arquivos de esboço ou arquivos de equipes quando você tem acesso do tipo "para edição". Os administradores podem definir bibliotecas padrão para uma equipe ou uma organização, o que as habilita automaticamente em cada arquivo.
- Habilitar acesso a bibliotecas em seus esboços
- Habilitar ou desabilitar uma biblioteca em um arquivo de design
Utilizar os ativos da biblioteca em um arquivo
Ao encontrar uma biblioteca que deseje utilizar, você pode adicionar quaisquer componentes, estilos ou variáveis em seu arquivo seguindo as instruções para cada recurso:
- Criar uma instância de um componente
- Aplicar estilos a camadas e objetos
- Aplicar variáveis a designs
Aceitar atualizações para uma biblioteca em seus arquivos
Quando alguém publica uma atualização em um componente principal, um estilo ou uma variável em uma biblioteca, o Figma disponibiliza a atualização em todos os arquivos em que o componente, o estilo ou a variável seja utilizado.
Qualquer pessoa que tenha acesso do tipo "para edição" ao arquivo pode revisar e aceitar ou ignorar as alterações.
Gerenciar uma biblioteca
As pessoas que têm acesso "para edição" a um arquivo de biblioteca podem definir permissões ao arquivo, remover a publicação na biblioteca e mover ativos entre arquivos.