figma
Aprenda como utilizar o design system no Figma.
Bibliotecas de equipe
Uma vez dentro do ambiente Olist no Figma, siga os próximos passos. Se você não tem acesso ao Figma, confira o tutorial.
Passo 1
Habilite as bibliotecas do Design System em seu arquivo por meio das bibliotecas da equipe.
![Modal de ativação das bibliotecas compartilhadas no Figma.](https://designsystem.olist.io/latest/images/project-settings/figma/step_1.png)
habilitando bibliotecas
Passo 2
Para usar o Design System, comece com cores, textos, grids e sombras no painel de estilos e, a seguir, adicione um componente por meio da guia "assets".
![Vídeo da interface do Figma criando uma página a partir da configuração dos
estilos de texto, cor e adicionando componentes da biblioteca.](https://designsystem.olist.io/latest/images/project-settings/figma/step_2.gif)
utilizando componentes
Temas
O Design System Olist pode ser aplicado com diferentes temas. No Figma, é possível fazer mudança de tema automática para as propriedades de cor, sombras e texto. Outras mudanças são feitas nos próprios componentes utilizando bibliotecas locais.
Passo 1
Faça download do plugin ”themer” na área de comunidade do Figma.
![Vídeo tutorial para instalação do plugin themer no Figma. Inicia na página de
comunidade, depois é feita a busca e o plugin é localizado na aba de plugins.](https://designsystem.olist.io/latest/images/project-settings/figma/theme_step_1.gif)
instalação do plugin
Passo 2
Abra o plugin e adicione as configurações de API e Bin URL encontradas no Keeper em "Figma – Registro de bibliotecas", dentro da pasta "Product and Design Team". Se você não sabe acessar o cofre de senhas, confira a documentação: acessar cofre de senhas.
![Vídeo da configuração do plugin. Usa-se o botão direito abrir o plugin.
Depois, é inserido inserir a API Key e Bin URL nos campos de texto e salva-se as
configurações.](https://designsystem.olist.io/latest/images/project-settings/figma/theme_step_2.gif)
configuração do plugin
Passo 3
Crie sua interface com os componentes das bibliotecas. Após isso, selecione a página e abra o plugin ”themer”. Escolha o tema desejado e aplique na tela.
![No vídeo, duas telas do Figma são selecionadas. Abre-se o plugin "themer" e o
tema venda base é selecionado. As telas mudam de cor.](https://designsystem.olist.io/latest/images/project-settings/figma/theme_step_3.gif)
trocando de tema