---
url: "/pt/emailify/design/library.md"
description: "Carregue, organize e pesquise os componentes do Emailify da sua biblioteca do Figma."
---

# Criar uma biblioteca de componentes reutilizáveis

> Carregue, organize e pesquise os componentes do Emailify da sua biblioteca do Figma.

Todos os elementos que você adiciona ao Figma pelo plugin Emailify são adicionados automaticamente como componentes nativos do Figma, cujo estilo e conteúdo você pode personalizar. Todos os componentes do Emailify do arquivo do Figma atual podem ser acessados direto no plugin clicando no ícone **Library** na fileira de abas do cabeçalho.

## O Emailify carrega componentes só do arquivo do Figma atual? {#does-emailify-load-components-from-the-current-figma-file-only}

Sim. A aba **Library** carrega os componentes do Emailify do arquivo que você tem aberto no Figma.

Se alguém da sua equipe abrir outro arquivo, o Emailify só vai mostrar os componentes do Emailify que já existem nesse arquivo. Depois de adicionar ou atualizar componentes no arquivo atual, clique em **Load all Emailify Components from this Figma file** ou use **Refresh** para verificar o arquivo de novo.

## Adicionar componentes pela aba da biblioteca de componentes {#adding-components-from-your-component-library-tab}

### Vídeo tutorial: criar uma biblioteca de componentes para designs de e-mail HTML no Figma

Este vídeo mostra como criar no Figma uma biblioteca de componentes para e-mails HTML com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

[Video](/assets/videos/emailify/load-component-library.mp4)

Ao clicar em **Load all Emailify Components from this Figma file**, o plugin encontra e carrega pré-visualizações de todos os componentes do Emailify do seu arquivo. Clicar em qualquer componente no plugin o adiciona automaticamente ao frame do Emailify selecionado, como em qualquer outra categoria.

Se você adicionou novos componentes ao arquivo do Figma depois de carregar os componentes iniciais, clique no ícone **Refresh** no plugin. Ele verifica de novo o arquivo do Figma em busca de componentes do Emailify e os inclui na lista.

## Organizar sua biblioteca de componentes com categorias personalizadas {#organizing-your-component-library-with-custom-categories}

### Vídeo tutorial: adicionar categorias personalizadas para componentes de e-mail no Figma

Este vídeo mostra como adicionar categorias personalizadas para componentes de e-mail no Figma com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

[Video](/assets/videos/emailify/create-custom-categories.mp4)

Por padrão, todos os seus componentes do Figma ficam em _Uncategorized_, mas você pode criar suas próprias categorias personalizadas clicando no ícone de **lápis** (Pencil) na fileira de abas do subcabeçalho da biblioteca de componentes.

Assim, você cria novas categorias personalizadas e move componentes de qualquer categoria existente para qualquer outra categoria que tenha adicionado.

Você também pode remover uma categoria personalizada a qualquer momento. Isso não exclui nenhum componente do Figma, mas move automaticamente os componentes dessa categoria de volta para a categoria _Uncategorized_.

### Pesquisar e ordenar sua biblioteca de componentes {#searching-and-sorting-your-component-library}

[Video](/assets/videos/emailify/search-and-sort-components.mp4)

Para encontrar rapidamente um componente personalizado do Figma na aba da biblioteca de componentes, use o campo **Search** para filtrar a lista pelo nome de camada de qualquer componente do Figma.

Você também pode ordenar a lista de componentes por qualquer uma destas opções:

**Sort by Figma Layer Age**
- Newest to Oldest ↓
- Oldest to Newest ↑

**Sort by Figma Layer Name**
- Figma Layer Name ↓
- Figma Layer Name ↑

**Sort by Figma Layer Order**
- Figma Layer Order ↓
- Figma Layer Order ↑

**Sort Visually (Rows)**
- Visually Top to Bottom ↓
- Visually Bottom to Top ↑

**Sort Visually (Columns)**
- Visually Left to Right →
- Visually Right to Left ←

A ordenação visual agrupa na mesma linha ou coluna os componentes que estão levemente desalinhados. A ordenação por nome de camada reconhece números, então nomes como `Hero 2` aparecem antes de `Hero 10`.

### Adicionar metadados aos seus componentes do Figma {#adding-metadata-to-your-figma-components}

[Video](/assets/videos/emailify/figma-component-metadata.mp4)

Você pode adicionar metadados aos seus componentes do Figma clicando na camada do componente no Figma e depois no ícone **Component configuration**, na coluna da direita do Figma, ao lado do nome do componente. Ali você pode digitar um texto em _How to use this component_ e uma URL em _Link to documentation_.

Se um componente do Emailify tiver esses dados, o rótulo dele na aba da biblioteca de componentes passa a ter automaticamente um link para a URL da documentação, e a descrição de como usar o componente aparece na dica (tooltip) quando você passa o mouse sobre a miniatura.