How To Animate Like After Effects in Figma

Summary

Dans cette vidéo, l'animateur explique pourquoi il a abandonné Adobe After Effects pour intégrer Figma dans son workflow pour les animations UI. Il met en avant les capacités de Figma, notamment son outil Smart Anime, pour créer des animations fluides et complexes sans quitter l'interface. Il présente des exemples concrets, comme une animation d'introduction et une publicité Twitter, pour démontrer la simplicité et l'efficacité de Figma. L'animateur encourage les spectateurs à explorer davantage les animations avancées avec Figma.

Takeaways

• 🚀 After Effects, un outil de mouvement populaire parmi les designers, a un apprentissage difficile et ne s'intègre pas avec Figma.
• 🌟 Figma remplace After Effects dans le workflow du locuteur pour les animations UI.
• 📺 Le locuteur présente deux sujets : l'importance de Figma pour les animations UI et comment l'utiliser pour créer des animations spécifiques.
• 🎨 'Smart Anime' est une fonctionnalité de Figma qui permet des animations basées sur les différences entre les calques, généralement entre les frames.
• 📝 L'animation 'hero intro' est créée avec seulement sept frames, montrant la simplicité de l'animation dans Figma.
• 🔍 La première frame de l'animation 'hero intro' masque le texte avec un bloc, ce qui est la première révélation de l'animation.
• 📌 Les animations dans Figma sont faciles à créer et à comprendre, comme illustré par l'animation de l'intro de l'héro.
• 💡 Figma permet une créativité illimitée pour les animations, comme démontrée par l'animation publicitaire Twitter.
• 🔄 L'animation Twitter est un exemple de loop où la dernière frame doit se reconnecter à la première pour créer un cycle continu.
• 🎥 Les animations dans Figma sont faciles à mettre en place, même pour des animations complexes comme les publicités sur les réseaux sociaux.
• 📚 Le locuteur propose des tutoriels avancés pour ceux intéressés par les animations plus complexes en Figma.

Q & A

Pourquoi l'orateur a-t-il arrêté d'utiliser Adobe After Effects pour les animations ?

L'orateur a arrêté d'utiliser Adobe After Effects car il y a un apprentissage complexe, il n'intègre pas avec Figma et nécessite de quitter l'application pour travailler sur des animations.

Quel outil a pris la place d'Adobe After Effects dans le workflow de l'orateur ?

Figma a pris la place d'Adobe After Effects dans le workflow de l'orateur, car il est plus adapté aux animations d'interface utilisateur (UI).

Qu'est-ce que le concept de 'smart anime' dans le contexte de Figma ?

Le 'smart anime' est une animation basée sur la différence entre les calques, généralement entre les frames, ce qui permet des transitions fluides et simples à créer.

Comment l'orateur a-t-il créé l'animation d'introduction héroïque dans Figma ?

L'orateur a utilisé sept frames pour créer l'animation d'introduction, en manipulant la position, l'opacité et la taille des éléments pour créer des transitions fluides.

Quels éléments sont utilisés dans la première frame de l'animation d'introduction héroïque ?

Dans la première frame, il y a un bloc cachant le texte, le texte du chargement, et une image initialement à zéro opacité.

Comment l'orateur a-t-il intégré l'image dans l'animation d'introduction ?

L'orateur a intégré l'image en la plaçant en dehors du frame, laissant l'image apparaître depuis le bas et couvrir l'écran pour créer une transition.

Quelle est la différence entre l'animation d'introduction héroïque et l'animation Twitter présentée dans le script ?

L'animation d'introduction héroïque est une animation d'interface utilisateur, tandis que l'animation Twitter est une animation pour une publicité sur les réseaux sociaux avec un rythme élevé et un style différent.

Comment l'orateur a-t-il créé la transition entre les frames de l'animation Twitter ?

L'orateur a utilisé des transitions d'opacité, des changements de taille et de position, ainsi que des animations de déplacement pour créer une transition fluide entre les frames.

Quelle est la fonction de l'ellipse ajoutée à la fin de l'animation Twitter ?

L'ellipse ajoutée à la fin de l'animation sert à augmenter la taille et à rendre tout blanc, ramenant ainsi la scène à son état initial pour créer un loop continu.

Quels sont les avantages de Figma pour les animations par rapport à After Effects, selon l'orateur ?

Figma offre une intégration plus facile avec les outils de conception d'interface utilisateur, une facilité d'utilisation pour les animations, et permet de créer des animations sans quitter l'application.

Outlines

00:00

🚀 Introduction to Figma for Motion Design

The speaker explains why they no longer use Adobe After Effects for motion design, citing its steep learning curve and lack of integration with Figma. They introduce the concept of Smart Anime in Figma, which simplifies animations for UI designers. The video aims to show how Figma can replace After Effects for motion work and how it can be used for UI animations, with a focus on two main topics: the benefits of Figma for motion and creating animations like the ones demonstrated.

05:01

🎨 Creating a Hero Intro Animation in Figma

The speaker demonstrates how to create a hero intro animation in Figma using Smart Anime. They break down the process step by step, showing the frames used in the animation and explaining how each element transitions from one state to another. The animation includes revealing text, loading text, background appearance, and elements like a phone and button. The speaker emphasizes the simplicity of creating such animations in Figma and how it can be done with just a few frames.

10:02

🌟 Beyond UI: Creative Animations in Figma

The speaker showcases the versatility of Figma by creating a Twitter ad animation, which is different from the UI animation previously discussed. They explain the looping nature of the animation and how the first and last frames connect. The animation includes text sliding in, text layers revealing with opacity changes, size adjustments, and a white circle that resets the animation. The speaker encourages viewers to explore their creativity with Figma and provides links to advanced animation tutorials.

👋 Conclusion and Future Tutorials

The speaker concludes by reiterating their preference for Figma over Adobe After Effects for animation work. They invite viewers to check out their advanced animation tutorials and sign off with a friendly farewell, promising to talk soon.

Keywords

💡After Effects

After Effects est un logiciel de montage vidéo et d'animation utilisé par les designers pour créer des effets motion. Dans cette vidéo, l'auteur explique pourquoi il a abandonné After Effects pour des tâches d'animation, car il présente un apprentissage complexe et ne s'intègre pas avec Figma. Il utilise des exemples d'animations créées dans Figma pour démontrer une alternative plus facile à utiliser.

💡Figma

Figma est un outil de conception d'interface utilisateur (UI) qui permet aux designers de créer des prototypes et des animations. Dans le contexte de la vidéo, Figma remplace After Effects dans le workflow de l'auteur, car il offre des fonctionnalités d'animation plus accessibles et peut être intégré avec d'autres outils de conception.

💡Smart Anime

Smart Anime est une fonctionnalité de Figma qui permet de créer des animations en se basant sur les différences entre les calques, généralement entre les frames. Cela facilite la création de transitions fluides et dynamiques. L'auteur utilise Smart Anime pour créer des animations simples et efficaces sans avoir à quitter Figma.

💡UI Animation

L'animation UI (User Interface) fait référence à l'animation des éléments d'une interface utilisateur pour améliorer l'expérience utilisateur. Dans cette vidéo, l'auteur aborde l'animation UI en montrant comment Figma peut être utilisé pour créer des animations attrayantes et fonctionnelles pour les applications et les sites web.

💡Workflow

Workflow fait référence à la série d'étapes ou de processus que l'on suit pour accomplir une tâche. Dans le contexte de la vidéo, l'auteur discute de son workflow de conception, où il a remplacé After Effects par Figma pour la création d'animations, améliorant ainsi son efficacité et sa productivité.

💡Integration

L'intégration fait référence à la capacité de deux ou plusieurs systèmes ou outils de fonctionner ensemble de manière cohérente. Dans la vidéo, l'auteur souligne l'importance de l'intégration entre les outils de conception, comme Figma et After Effects, et explique pourquoi il préfère Figma pour son intégration fluide avec d'autres outils.

💡Learning Curve

Learning Curve est une expression qui décrit la vitesse à laquelle une personne apprend un nouveau concept ou un nouvel outil. Un apprentissage facile a une courbe d'apprentissage plate, tandis qu'un outil complexe a une courbe d'apprentissage raide. L'auteur critique After Effects pour sa courbe d'apprentissage raide et préfère Figma qui est plus facile à apprendre et à utiliser.

💡Transition

Transition est un terme utilisé pour décrire le passage d'un état à un autre, souvent utilisé dans le contexte de l'animation pour indiquer le changement d'une image ou d'une scène à une autre. Dans la vidéo, l'auteur utilise des transitions pour créer des animations fluides et engageantes.

💡Auto Layout

Auto Layout est une fonctionnalité de Figma qui permet de positionner automatiquement les éléments d'interface utilisateur en fonction des contraintes définies. Cela facilite la création de designs responsives et adaptables. Dans la vidéo, l'auteur utilise Auto Layout pour animer des éléments de texte qui se repositionnent dynamiquement.

💡Opacity

L'opacité est un terme qui décrit le degré de transparence ou d'opaqueté d'un élément. Dans l'animation, l'opacité est souvent utilisée pour faire apparaître ou disparaître des éléments de manière fluide. L'auteur utilise l'opacité pour contrôler la visibilité des éléments dans ses animations Figma.

💡Reveal

Reveal est un terme utilisé pour décrire l'action de dévoiler ou de montrer quelque chose qui était précédemment caché. Dans le contexte de l'animation UI, un reveal est souvent utilisé pour attirer l'attention de l'utilisateur sur un élément particulier. L'auteur utilise des techniques de reveal pour créer des animations engageantes.

Highlights

After Effects has been the go-to motion tool for designers for years, but it has a steep learning curve and doesn't integrate with Figma.

The speaker no longer uses Adobe After Effects for motion work due to its limitations.

Figma has replaced After Effects in the speaker's workflow, not just for UI animations.

Smart Anime is a concept that enables animations based on the difference in layer, usually between frames.

The speaker demonstrates a hero intro animation in Figma, showcasing its simplicity and power.

The hero intro animation is created with just seven frames, making it easy and quick to produce.

The speaker explains how to create a reveal effect, load animation, and background appearance in Figma.

Figma's Smart Anime allows for UI designers to create complex animations without the need for After Effects.

The speaker shows how to create a Twitter ad animation in Figma, highlighting its versatility.

The Twitter ad animation is a high-tempo, social media ad created using Figma's animation capabilities.

The speaker breaks down the Twitter ad animation, explaining the looping effect and how it connects back to the first frame.

The speaker emphasizes that creativity is the only limit when creating animations in Figma.

The speaker provides a tutorial on advanced animations in Figma, offering resources for further learning.

The speaker concludes by reiterating the preference for Figma over After Effects for animation work.

The speaker invites viewers to check out tutorials for more advanced animations in Figma.

Transcripts

and what you saw here ladies and

gentlemen is why I don't use After

Effects anymore after effects has been

the go-to motion tool for designers for

years but it's got a steep learning

curve it doesn't integrate with figma

and you have to leave it so by the end

of this video you will know why I never

use Adobe After Effects for motion work

what

bro what are you talking about man and

why figma has taken its place in my

workflow it's not just for UI animations

now today we'll cover two things one why

figma is your best friend as a UI

designer when it comes to motion and two

how you can use it to create things like

this

and this

so let's jump into figma and start

animating so that you can see the power

yourself alright so we're in figma

before we do anything if you haven't

already subscribed I really appreciate

it now

smart anime if you don't know about the

concept I have a video on it I suggest

you pause this video and check that

video out and then get back here so in

its simplest form smart anime is

animations based on the difference in

the layer

usually between frames that enables

transitions like this one so I'm

hovering this element it increases in

size it changes its color and this is a

very simple use of smart anime but this

is the basic concept

so with that in mind

if we jump over to the first animation

I'm going to show you here

a hero intro animation

play it

so you can see a bunch of stuff

Happening Here

we have a reveal we have a load

and we have the background appearing

text the nav bar and then the phone and

this button here

and this is a super simple animation to

create so we're going to dissect this

animation and look at how it was

actually created so let's jump back in

here here we have the frames used for

this animation so it is just seven

frames

that created that whole animation you

just saw

let's look at the first frame what do we

have here

we have a block that is hiding this text

so that's the first reveal we saw

we have the loader text of course behind

it and we have an image that currently

is set to zero opacity here

and for this one we wouldn't even need

the image because the image doesn't

appear until here and usually you just

need the element you're gonna make a

transition with or animate somehow in

the frame before so just the previous

frame I'll show you what this means in

just a bit

so we could even remove the image from

here because the only thing happening

here is this reveal

so now if we go to the next frame

this block here is no longer hiding the

text the text itself is going from uh

decreased opacity to 100 opacity and

the text element that I'm using is a

clipped frame so you can see here we

have an auto layout with numbers that

were just repositioning that's all that

happens with this one so it goes from

being

01 to 99 like that and this Frame

this outer frame here

is clipping the content so from here we

go from zero one percent to 99 so the

only thing happening here is we're

changing the position of this block of

text or this Auto layout of text

elements so this is actually the first

part where we need to include the image

in the animation so here the image is

put outside of the frame this Frame is

clipping the content and it's going to

come from the bottom up and cover the

screen

this text here is gonna also change

position so if we look here

change his position it goes up and we

fade it out to zero percent opacity

then the next step is we have our nav so

this is the first frame where we

introduce the nav bar and here is the

second frame that's where we reveal it

so it starts in the top above the frame

then we take it down here and show it so

that's that part of the animation the

next part is where we show the text so

that means that the text must be present

in the previous frame and it is but it

doesn't have any opacity and it's put a

bit further down in the frame so that it

rises and goes back to 100 opacity to

make this nice transition so that's what

happens between these frames then we

have this step where we show the foam so

that's the last thing that happens which

means that the phone must be present in

this Frame so you can see that it's

beneath the frame here and then the

arrow is also beneath and it's a bit

further down so that the phone appears a

bit quicker and the arrow comes

afterwards so if we play it again the

reveal the number scrolling the image

floating up now coming down bold text

coming up and then at last we have the

phone and the button

so that's an intro animation that is

super easy and super quick to create

with smart anime next thing I want to

show you is

that you can create anything so the

previous one was kind of a UI animation

now your creativity is really what is

going to be the boundary here so let's

look at this animation a Twitter ad

let's play it

super high Tempo and a totally different

kind of animation

this is a social media ad

and you can create this in figma as well

so let's break it down

now the first frame what happens here

this is actually a looping animation so

the last frame here needs to connect

back to the first frame so that's why

you see this little circle here because

we're using that in the last frame we'll

get to that

okay so what happens in the first frame

we have the text also this text is used

in the last frame that's why we need it

in the first frame then we have the

images that are also used in the last

frame that's why we need them here and

then we have the first text that appears

from the left

so this text is what you see here

we have it outside of the frame to the

left so that slides in

that's the first thing

then we have this real

text appearing which is a group of three

text layers in this Frame we're using an

opacity to reveal them so zero percent

opacity goes to 100 then we separate

them so since we have three text layers

here you can see

that

they're just stacked on top of each

other in this Frame we separate them

into an animation and then for the next

step we're going to decrease the size so

we squeeze them together so I use the K

tool to decrease the size of them so you

can see if I click k i can increase the

decrease the size like this

so we decrease the size that's the only

thing happening here

then for this Frame I increase the size

again and tilt so I rotate the text a

bit

and then we have this text fashion

appearing

just a regular kind of opacity

transition animation you can see that

it's put a bit further down in the frame

so it rises and goes to 100 opacity here

and then we change the position of

fashion to the left we change the

background color it's that simple this

element here as you can see which is

just an auto layout of three images also

appears here in our previous frame and

it's put in the bottom so outside of the

screen you can see it slides up

the text like I said slides to the left

then here we're just changing the text

since we're just changing the text like

this the animation is just going to be

like a fade in Fade Out animation so

it's nothing fancy we could like change

the position of the text so this slides

up and we have this text coming from the

bottom but then we would need separate

text Fields so I made it a bit simpler

here so I'm just changing the text for

each of these frames

I just changed the position of these

images or the other layout that contains

them so here

this is centered here this one is

centered and for this one this one is

centered and this is the same as well

just changing the background color

changing the text then as the last step

I've added a little

Circle here a little ellipse that

increases in size and kind of makes

everything white which then brings us

back to the first part where the white

circle kind of decreases in size and

yeah it just takes us back to the

original state so let's play it once

more and see

foreign

is why I never use Adobe After Effects

for animation work anymore

now if you're interested in advanced

animations I have tutorials on that here

so check them out until the next one

though have a great life we'll talk soon

ciao