Pen2Figma
Importe designs do pen.dev para o Figma mantendo auto layout, componentes, variáveis e temas.
Baixar plugin
O Pen2Figma converte arquivos .pen em camadas nativas e editáveis do Figma. As regras foram calibradas com o próprio renderizador do Pen, então os detalhes propensos a erros (alinhamento de traço, geometria de polígonos, ângulos de gradiente, direção de arcos, resolução de temas, espaçamento entre letras) são tratados com base nos resultados reais da renderização do Pen. Grátis, sem conta e sem limites.
Recursos
- Auto layout
- Direção, espaçamento, padding, alinhamento, tamanhos hug, fill e fixo, e filhos com posição absoluta.
- Componentes e instâncias
- Componentes reutilizáveis do Pen viram componentes do Figma; as instâncias mantêm suas substituições, inclusive aninhadas, e trocas de ícone viram trocas de instância.
- Variáveis e modos de tema
- Cada eixo de tema (claro, escuro etc.) gera uma coleção de variáveis com modos; os aliases são preservados e os frames mantêm seu tema.
- Bibliotecas
- Solte junto os arquivos .pen de biblioteca usados no design e eles serão vinculados automaticamente.
- Estilos
- Cores sólidas, gradientes lineares, radiais e angulares, preenchimentos de imagem, traços por lado, sombras e desfoques, cantos arredondados, arcos e vetores.
- Texto
- Fontes e pesos são combinados com o que está instalado; texto CJK recorre a PingFang SC ou Noto Sans SC, como no Pen.
- Ícones
- lucide, Material Symbols, phosphor e feather, nas mesmas versões de ícones incluídas no Pen.
Instalação
O Pen2Figma ainda não está na Figma Community, então precisa ser importado manualmente, e isso só funciona no app para desktop do Figma.
- Baixe o arquivo acima e descompacte.
- No app para desktop do Figma, abra o menu e escolha Plugins → Development → Import plugin from manifest…
- Selecione o
manifest.jsondescompactado. O Pen2Figma aparecerá em Plugins → Development.
Como usar
- Execute o Pen2Figma e arraste um arquivo
.pen(com os arquivos.pende biblioteca e as imagens que ele usa) para o canvas do Figma, ou escolha os arquivos no plugin. - Selecione os frames e inicie a importação.
- Tudo vai para a página atual, e um resumo lista o que precisa de atenção.
Privacidade
A conversão acontece inteiramente dentro do plugin e seus arquivos nunca são enviados. As únicas requisições de rede buscam ícones e imagens referenciados no design.
Limitações conhecidas
Shaders, gradientes de malha, nós de script e de página web não têm equivalente no Figma e são importados como marcadores claramente sinalizados. Em planos do Figma que permitem só um modo por coleção, os outros temas recebem valores fixos.
O Pen2Figma é uma ferramenta independente da UISurf, sem afiliação ou endosso do pen.dev ou do Figma.
Notas de versão
- Primeira versão pública.
- Auto layout, componentes e instâncias com substituições aninhadas, variáveis com modos de tema, bibliotecas, gradientes, imagens, efeitos e ícones.
- Fontes alternativas para CJK, 10 idiomas de interface e interface clara e escura que acompanha o Figma.