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

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.

11k likes

767k installs

11k likes

767k installs

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.

Made in Figma to Lottie

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.

  • Mandy Scott

  • Diego Gonzalez

  • Mau Ali

  • Diego Gonzalez

  • Amanda Patamakanthin

  • Lana Nguyen

  • Yaante Ahumad

  • Mandy Scott

  • Diego Gonzalez

  • Mau Ali

  • Diego Gonzalez

  • Amanda Patamakanthin

  • Lana Nguyen

  • Yaante Ahumad

  • Swaraj Thamke

  • Diego Luque

  • Sanjib Paul

  • Anshul Gupta

  • Kenmin Mohakim

  • Keljib Poh

  • Swaraj Thamke

  • Diego Luque

  • Sanjib Paul

  • Anshul Gupta

  • Kenmin Mohakim

  • Keljib Poh

  • Melih Okal

  • Diego Gonzalez

  • Yaamin Mohamed

  • Luis Berumen

  • Sanjib Paul

  • Sepideh Yazdi

  • Melih Okal

  • Diego Gonzalez

  • Yaamin Mohamed

  • Luis Berumen

  • Sanjib Paul

  • Sepideh Yazdi

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

Criar animações Lottie prontas para produção
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 to Vector
AI Prompt to Vector
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.

Raster to Vector
Raster to Vector
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.

Download animations directly to your device
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.

Premium animations
Premium animations
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.

Search Lottie animations
Search Lottie animations
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 Stickers for 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.

Private animations
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.

Export animation
Export animation
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.

Ship animations quickly and conveniently
Ship animations quickly and conveniently
VS Code Support
VS Code Support
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!

Player Controls
Player Controls
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.

Automatic enabling of asset links
Automatic enabling of asset links
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.

Full preview of animations
Full preview of animations
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.

Ship animations as Optimized dotLottie or Lottie JSON
Ship animations as Optimized dotLottie or Lottie JSON
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

Step 1
Instalar e executar o plugin
Step 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.

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

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

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

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

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

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

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

FAQs

O que é um Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback.

Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

O que é um Lottie?

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback.

Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.

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?

How can I export Figma to Lottie without error?

How can I export Figma to Lottie without error?

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

11k likes

767k installs

11k likes

767k installs