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?
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
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.
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
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.
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
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
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.