LottieFiles

+

Figma

Figma para Lottie:
Adicione movimento ao Figma

Converta facilmente seus designs ou protótipos em animações Lottie prontas para produção com a funcionalidade Figma para Lottie. Use LottieFiles for Figma Dev Mode para obter códigos de incorporação e links de ativos diretamente na ferramenta e entregar arquivos sem complicação.

Exporte seus designs do Figma como animações Lottie e use-os em seus sites ou aplicativos. Tenha acesso rápido à maior biblioteca de animações Lottie do mundo dentro do Figma.

Animações prontas para produção no Figma

Criar animações Lottie prontas para produção

O recurso Figma para Lottie permite criar animações cativantes dentro do Figma facilmente e exportá-las como Lottie. Escolha entre usar predefinições animadas ou conectar vários quadros para criar suas animações.

AI Prompt ao Vetor
AI Prompt ao Vetor

AI Prompt ao Vetor

Transforme prompts de texto em ilustrações SVG personalizadas, contornando a busca por ativos perfeitos. Aproveite o agrupamento e nomeação de camadas com alimentação de IA para manter seus designs limpos e organizados.

🎉 Novo

Raster para Vetor
Raster para Vetor

Raster para Vetor

Converter imagens raster como PNGs e JPGs em vetores totalmente editáveis, dizendo adeus ao traçado manual. Use-os em seus designs imediatamente, ou depois de animá-los com Figma para Lottie.

🎉 Novo

Transfira animações diretamente para o seu dispositivo
Transfira animações diretamente para o seu dispositivo

Descarregar animações diretamente para o seu dispositivo

Descarregue animações como JSON dotLottie/Lottie otimizado, JSON dotLottie ou Lottie diretamente para o seu dispositivo. Também pode exportá-las como GIF, MP4, WebM ou MOV em vários tamanhos.

🎉 Novo

Animações premium
Animações premium

Animações de alta qualidade

Acesse mais de 400.000 animações premium exclusivas e totalmente personalizáveis no Figma para criar produtos impressionantes que seus usuários vão adorar.

Procurar animações Lottie
Procurar animações Lottie

Animações para todas as indústrias e casos de uso imagináveis

Pesquise mais de 100.000 animações Lottie gratuitas prontas a usar a partir do nosso plugin Figma. Todas as animações podem ser usadas para uso pessoal e comercial.

Desenhe protótipos tal como produtos finais

Adicione animações Lottie aos seus protótipos do Figma e apresente a versão mais realista e envolvente dos seus designs aos seus intervenientes. Comunique eficazmente com movimento e elimine as suposições.

Lottie Autocolantes para o FigJam
Lottie Autocolantes para o FigJam

Lottie Autocolantes para o FigJam

Torne as suas sessões de brainstorming, ideação e colaboração no FigJam mais divertidas e entusiasmantes com acesso direto a mais de 100.000 stickers Lottie gratuitos e mais de 400.000 stickers Lottie premium.

Animações privadas
Animações privadas

Aceda aos seus ficheiros privados e à biblioteca de animação da sua equipa

Agora pode inserir os seus ficheiros privados e trazer a biblioteca partilhada da sua equipa para os seus designs no Figma, para um fluxo de trabalho mais eficiente e colaborativo.

Exportar animação
Exportar animação

Personalize animações para a sua marca

Aplique paletas de cores populares ou ajuste suas cores para combinar com o estilo e estética da sua marca.

LottieFiles para Figma Dev Mode

NOVO

Animações de navios de forma rápida e conveniente

Acesse facilmente os links dos ativos de suas animações e os códigos de incorporação gerados automaticamente diretamente no Figma e envie-os em um piscar de olhos.

Animações de navio de forma rápida e conveniente
Animações de navio de forma rápida e conveniente
Suporte do VS Code
Suporte do VS Code

Suporte do VS Code

Os programadores agora podem aceder diretamente aos links e códigos das animações no VS Code. Acabou-se o alternar entre o Figma e o VS Code!

Controlos do jogador
Controlos do jogador

Controlos do jogador

Personalize as definições de animação, como modo de reprodução, direção, velocidade e muito mais, e gere o seu código de incorporação com apenas alguns cliques.

Ativação automática de links de ativos
Ativação automática de links de ativos

Ativação automática de links de ativos

Esqueça a complicação de alternar entre o seu espaço de trabalho e os designs do Figma. Os links dos recursos das animações do espaço de trabalho são automaticamente ativados quando são inseridos através do LottieFiles para o Figma.

Visualização completa das animações
Visualização completa das animações

Pré-visualização completa das animações

Será capaz de visualizar as suas animações selecionadas em pleno movimento, o que lhe dará uma boa ideia de como irão parecer e se comportar uma vez que forem enviadas.

Animações de navegação como dotLottie otimizado ou JSON Lottie
Animações de navegação como dotLottie otimizado ou JSON Lottie

Animações de nave como dotLottie ou Lottie JSON otimizado

Pode optar por enviar as suas animações nos formatos dotLottie otimizado ou JSON de Lottie, garantindo que os seus ficheiros sejam super pequenos e carreguem num instante.

Comece em 3 passos simples

Passo 2

Pesquise ou crie o seu próprio

Pesquise animações através da aba ‘Discover’ ‘Workspaces’. Ou crie sua própria animação usando a aba "Figma to Lottie".


Para o plugin Dev Mode, selecione uma animação inserida de qualquer um dos seus workspaces para começar.

Passo 3

Inserir ou inspecionar a sua animação

Abra, personalize e insira sua animação como um GIF na tela do Figma.


Para o plugin Dev Mode, escolha o formato de arquivo desejado e copie o link do ativo da animação ou o código de incorporação gerado automaticamente para enviá-lo.

Aprenda tudo sobre criar animações no Figma, e ainda obtenha uma certificação também!

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

FAQs

O que é um Lottie?

Um Lottie é um formato de arquivo de animação baseado em JSON que utiliza uma representação textual e descritiva dos elementos da animação e movimento com o objetivo de obter um tamanho de arquivo menor, independência de plataforma, independência de resolução e taxa de quadros variável durante a reprodução da animação. Existem players Lottie de código aberto e gratuitos na Web, iOS, Android, Windows e outras plataformas.

O que é um Lottie?

Um Lottie é um formato de arquivo de animação baseado em JSON que utiliza uma representação textual e descritiva dos elementos da animação e movimento com o objetivo de obter um tamanho de arquivo menor, independência de plataforma, independência de resolução e taxa de quadros variável durante a reprodução da animação. Existem players Lottie de código aberto e gratuitos na Web, iOS, Android, Windows e outras plataformas.

Onde posso baixar o plugin LottieFiles para Figma?

Onde posso baixar o plugin LottieFiles para Figma?

Que formatos suporta o plugin para importação?

Que formatos suporta o plugin para importação?

Que formatos suporta o plugin para exportação?

Que formatos suporta o plugin para exportação?

Preciso de fazer login para usar o plugin?

Preciso de fazer login para usar o plugin?

Preciso de uma conexão à internet para usar o plugin?

Preciso de uma conexão à internet para usar o plugin?

O plugin LottieFiles for Figma suporta o formato dotLottie?

O plugin LottieFiles for Figma suporta o formato dotLottie?

O plugin LottieFiles for Figma suporta o formato GIF?

O plugin LottieFiles for Figma suporta o formato GIF?

O LottieFiles for Figma suporta o formato SVG?

O LottieFiles for Figma suporta o formato SVG?

Posso aceder às minhas Animações Privadas a partir do plugin?

Posso aceder às minhas Animações Privadas a partir do plugin?

O que é o LottieFiles para o Figma em Dev Mode?

O que é o LottieFiles para o Figma em Dev Mode?

Como posso acessar o LottieFiles para o Figma em Dev Mode?

Como posso acessar o LottieFiles para o Figma em Dev Mode?

Como uso o LottieFiles para o Figma Dev Mode?

Como uso o LottieFiles para o Figma Dev Mode?

Posso visualizar animações antes de adicioná-las dos meus designs do Figma a um ambiente de código?

Posso visualizar animações antes de adicioná-las dos meus designs do Figma a um ambiente de código?

Que formatos de animação posso usar ao enviar animações através do LottieFiles para o Modo Dev do Figma?

Que formatos de animação posso usar ao enviar animações através do LottieFiles para o Modo Dev do Figma?

Por que as animações públicas que inseri não funcionam no LottieFiles para o Modo Dev do Figma?

Por que as animações públicas que inseri não funcionam no LottieFiles para o Modo Dev do Figma?

Serei cobrado de alguma coisa por usar o LottieFiles para o Figma Dev Mode?

Serei cobrado de alguma coisa por usar o LottieFiles para o Figma Dev Mode?

Posso colaborar com outros usando o LottieFiles para o Figma em dev mode?

Posso colaborar com outros usando o LottieFiles para o Figma em dev mode?

Há suporte disponível se eu encontrar algum problema ou tiver perguntas sobre LottieFiles para Figma Dev Mode?

Há suporte disponível se eu encontrar algum problema ou tiver perguntas sobre LottieFiles para Figma Dev Mode?

Como posso manter-me atualizado com as novas funcionalidades ou mudanças no LottieFiles para o Figma Dev Mode?

Como posso manter-me atualizado com as novas funcionalidades ou mudanças no LottieFiles para o Figma Dev Mode?

Instalar LottieFiles para Figma

Comece a usar o plugin e todos os seus recursos gratuitamente

7.9 mil gostos

603 mil instalações