Here's The Secret How To Create These Animated Diagrams

Summary

In this engaging tutorial, the creator demystifies the process of making animated diagrams, a trend that's capturing the attention of viewers. Highlighting the use of tools like Canva, Figma, and Draw IO, the video walks viewers through various techniques to bring life to concepts through animation. From adding motion to elements in Canva, leveraging Figma's plugins for dynamic designs, to creating architectural diagrams in Draw IO, the guide is packed with actionable steps. Additionally, the video promotes a new weekly newsletter aimed at sharing these diagrams and more, inviting viewers to subscribe for the latest in technology trends and best practices.

Takeaways

• 😀 The video aims to teach how to create animated diagrams to explain concepts in an engaging way
• 📹 Three main tools are introduced - Canva, Figma and Draw.io
• 👨‍💻 Canva provides premade elements like animated stickers to build diagrams
• 🎥 Figma relies on plugins to create icons, shapes and enable animations along paths
• 🎴 Draw.io focuses on architecture diagrams with built-in flow animations
• ☑️ Exporting Canva designs to GIF/MP4 gives animated diagrams to share easily
• ✏️ Figma exports to various formats but must screen record GIF versions
• 🔄 Draw.io lacks Gif export so must screen record MP4/GIF versions
• 💌 Mentions joining newsletter to get diagram examples/technology updates
• 🙏 Ends politely with closing remarks and salutation

Q & A

What are the main tools mentioned for creating animated diagrams?

The main tools mentioned are Canva, Figma, and Draw IO.

How can you create animations in Canva?

In Canva, you can create animations by selecting elements, applying animations like rise, pan, wipe, stump, rotate, or wiggle, and adjusting the duration.

What is the process for adding animations to elements in Figma?

In Figma, animations can be added by using plugins to create movements or transitions between elements, such as showing a path for an element to follow.

Can you export your designs from Canva and Figma in multiple formats?

Yes, both Canva and Figma allow exporting designs in multiple formats such as GIF, MP4, SVG, PDF, CSS, and JSON.

What is Draw IO used for?

Draw IO is used for creating architectural diagrams, allowing for detailed visual representations of systems and structures.

How can animations be added to diagrams in Draw IO?

Animations in Draw IO can be added by selecting edges and applying flow animation to illustrate movement or interactions between components.

What is a unique feature of using Canva for animations?

A unique feature of Canva is the ability to search and use animated stickers to add dynamic elements to designs.

Why is Figma considered useful for creating animations?

Figma is useful for creating animations due to its extensive plugin ecosystem, allowing for detailed and customizable animations.

How does the video script encourage viewer engagement?

The script encourages viewer engagement by asking viewers to subscribe to the channel, like the video, and join a newsletter for more detailed explanations and tips.

What limitations does Draw IO have compared to Canva and Figma?

Draw IO lacks the direct ability to export animations to GIFs, requiring screen recording to capture animations instead.

Outlines

00:00

📊 Creating Animated Diagrams with Popular Tools

The speaker begins by addressing the audience's interest in creating animated diagrams to explain concepts, highlighting their popularity and effectiveness. They encourage new viewers to subscribe to the channel and mention the launch of a new weekly newsletter aimed at sharing detailed explanations of these diagrams. The first part of the tutorial introduces three main tools used for creating animations: Canva, Figma, and Draw.io. With Canva, the speaker demonstrates how to create a new design, utilize design elements like animated stickers, and animate objects such as a bird to make it appear as if it's flying. The process includes adjusting animation styles, duration, and speed, culminating in the ability to share the finished product in various formats. This section emphasizes the ease and versatility of Canva for creating engaging animated content.

05:03

🔧 Advanced Animations with Figma and Draw.io

In this segment, the focus shifts to Figma, a tool that enhances animation capabilities through the use of plugins and the pen tool for creating custom paths and animations. The speaker illustrates how to animate objects along a predefined path using the motion UI plugin, demonstrating the simplicity of animating circles to follow specific routes with controlled timing. The tutorial then transitions to Draw.io, an architectural diagramming tool. The speaker showcases how to create diagrams with dynamic elements such as databases and actors, and how to animate connections between them. Although Draw.io lacks direct GIF export functionality, the speaker suggests screen recording as an alternative for capturing animations. This section offers a deeper dive into more sophisticated animation techniques, expanding the creative possibilities for viewers.

10:05

🔄 Concluding Thoughts and Community Engagement

The final part of the video script emphasizes the potential of using animated diagrams to create compelling content. The speaker reiterates the importance of subscribing to the channel and the newsletter for ongoing access to valuable diagrams and information. This segment aims to inspire viewers to enhance their engineering skills through the use of animated diagrams, staying updated with the latest trends and best practices in technology. The speaker concludes the video with a farewell, inviting viewers to look forward to future content.

Keywords

💡Animated diagrams

Diagrams that are animated to showcase transitions, movements, flows etc. to better explain concepts visually. The presenter shows how tools like Canva, Figma and Draw.io can be used to create such diagrams easily.

💡Canva

A graphic design and diagramming tool that provides ready-made elements like animated stickers and the ability to add custom animations like rotate, pan, wiggle etc. It also allows exporting the animations as GIFs or videos.

💡Figma

A UI/UX design and diagramming tool focused on collaboration. Using its plugins like icons, motion and paths, elements in a design can be animated to move along set trajectories.

💡Draw.io

A free online diagramming tool optimized for making flowcharts, uml diagrams, network topologies etc. It has inbuilt animations for flow arrows and connections that can be screen recorded.

💡Rotate

A type of animation in Canva where an element spins around its center axis to showcase a transition.

💡Wiggle

A fun, quirky animation in Canva that makes elements shake lightly, adding dynamism to the diagrams.

💡Paths

In Figma, a path is a pre-defined trajectory along which diagram elements can be animated to move using the motion plugin.

💡Flow animation

In Draw.io, this is an inbuilt feature that animates flowchart arrows and connections to indicate a sequence, transition or process.

💡GIF

Graphic Interchange Format - a type of highly compressed image format that can be exported from Canva and Figma to share animated sequences and diagrams.

💡Screen record

Since Draw.io lacks GIF exporting ability, its animations have to be captured by recording portion of screen and then exported as video file.

Highlights

Use Canva animations to bring concepts to life

Subscribe to weekly newsletter for diagrams & detailed concepts

Add custom animations in Canva by dragging elements

Search icons, shapes, logos in Canva to animate

Figma plugins to add icons, shapes and motion graphics

Use Figma pen tool to draw animation paths

Chain Figma animations using timeline

Export Figma animations as GIFs, SVGs, etc.

Draw.io to create architectural diagrams

Animate diagram flows in Draw.io

Draw.io doesn't allow GIF exports

Record Draw.io animation to export as GIF

Subscribe for updates on engineering tips

Join newsletter for diagrams and best practices

Become a better engineer with shared resources

Transcripts

Over the last month or so, I've been getting a lot of questions from you

guys saying, how do I create these awesome animated diagrams to

explain concepts? So this is one example here, another one

here, and you can see that these animated diagrams, they really bring

life when you explain concepts. And you guys seem to

love it. And it's very trendy, to be honest, these days. So I thought,

you know what, let me just show you how to do it, because there's no

secret to it, really. And I want you to go and

basically explain and educate others as well.

If you new to this channel, literally just take 1 second, subscribe. And also,

you see that, like, button. Go ahead and smash it. Cool.

Without further ado, let's kick off. And just before we start this video, I want

to say that we recently launched our brand new weekly newsletter where

we aim to share these diagrams with you,

explaining these concepts, but also with more detailed explanations.

So go ahead and subscribe. You'll see the link under description of this

video. So the list is already quite huge.

So go ahead and subscribe so you can get the

latest tips, the trends about different technologies, best practices

and whatnot. All right, cool. So the first tool that I want to

talk to you, and there's three tools that I mainly use. So these are canva,

figma, and draw IO. Let me start with canva.

So in here, I've got, so I've got this canva,

and basically just go to file, create a new design,

and then specify the size, so on and so forth. But if you see here.

So you've got design elements, text uploads, these are pictures and

whatnot. So you can basically have any design that you want.

Now, let me just show you the animation part, right? So with canva,

go to animations or actually elements. And here you can search

for literally anything. You can say bird, for example.

And you can see that we have birds in here, right?

And if you want, you can say, I think they call it stickers.

So these are like animated ones. You can

see that you have this one, for example, right? So let's just take this guy

right here. So this is a b.

And if you want to add an animation, right? So if you want to

add an animation, it's straightforward. All you do is you click on it,

go to animate, and then here you can choose rise,

pan, wipe, and you can basically say

stump, for example, you can rotate if you want.

You can see that it's rotating. You can also wiggle. You can see that it's

wiggling. So let me just say wiggle in here. And also if

I scroll up I can create an animation. So drag elements around

the canvas to create your own animation. So this is really crucial.

So I'm going to click on that and now what I can do is

I can just take it and then basically say

that it's flying, have a look, something like that.

And you can see that it's flying now. So this is how you create these

animations, right. You can make it smaller or actually reduce the

speed. So this is very slow. And if you click on

duration, you can then set the actual duration. So here is

about 9 seconds or 8 seconds. Sorry. We can see that

this is basically the journey, right? And this is pretty

much it. You can then share, click on share and then here download

and then choose gif if you want, mp4, svg,

pDf, whatever, right? So this is pretty much the gist

now obviously. So if I share one of the designs, so let me just hide

this and then scroll down. You can see that this

is one of the designs. So if I open this up actually and then

if I basically click on duration play, you can

see that, have a look. I'm just animating

things and it's pretty much this simple, right? So there's not much to it.

Then the other thing that you might want is if I click on all in

here and remove this search,

we have circles in here. So if I create a new canva, we've got circles,

you've got arrows and literally you could just search anything.

So Java for example, we've got the Java logo here,

right? If you want a box, just search box. If you want

a server, just search server. And you can see that we have a server in

here, right? And you can create anything you want, right? And here if

you want to change the background color

you could do so if you want to rotate this arrow, for example animate,

and then you could just say hey, rotate for me. You can see that it's

doing the thing. So it's that simple. So canva is one

tool, the other tool, which is really nice is figma. So Figma,

basically what we can do is if I create a frame in here.

So let's just say that this is our frame, right?

And Figma, it's all about plugins to be honest. So you've

got a bunch of plugins, you can add text and whatnot, but here click on

plugins and then what you can do is you can basically search for

icons. So there's icon plugins. So let me just click on that.

And here, let's just say server, for example. There we go. So this is one

server. You can see that we have a server. Let's just select this one,

for example. And let's say we also want a DB

or database. Right? You can see some of these are really nice.

So let's just say database. There we go.

And we could choose a database. There we go. All right,

cool. Now this is pretty much for icons and

there's plugins for everything, to be honest. And if

I basically make these bigger just like that.

Right. And actually let's just keep that like so.

And I'm going to zoom in into it right now. You see that sometimes I

do have these arrows going from one direction to another. And then like

the animation. So the way to do it is, let's just say

that I take in here. Let's just take the pen tool, for example. And I'm

going to do this. Have a look just like that.

And then do something like that. Have a look just like that.

There we go. And then let's do the reverse. So from

here to here. And then,

so using the pen tool, sometimes you could actually do a circle if you

wanted to. But this is. So I can

demonstrate this. Right, so now let me have a circle in here.

So this is a circle. You can choose the color. So let's just

choose, I don't know, maybe this color in

here. Right. So I want to animate from here to here.

Following this path, there's this plugin. So if I click on plugins,

motion, ui and this basically you have to pay for it. I think there's actually,

sorry. There's a free version if you want. Okay.

And it's a bit limited, but if you want to have multiple designs

per pages, I think you have to pay for it. So if I click on

it. So I selected, or actually first I need to create

the design itself. Right. So new design. And then I'm going to select

my shape. And let me just basically put it smaller

so you can see things properly. Right. There we

go. So that's my shape there. I'm going to select it. It selects here.

Then click on this. Rotation in here. Rotation.

Add a path, select the source. Okay.

And have a look. For now it's just going to follow

the path. So if I play this, can you see what is done?

There we go. Nice and simple. I can make this 1

second. So the duration of it, you can see that it's quite

nice. Let's take another circle. So let's just take another

circle, for example. So click on circle. And then we

could take this one here and let's just change the

color for this. Let's just make it that.

And then basically we're going to do the same thing. Select it and

then add path and then select

the source. Okay. And you can

see that it has selected. Now, key to this is.

So if I click on m in here. So let

me just select it and also make it 1 second. And you

can see that this will basically start after the

first one. So after the first cycle finishes. Right, so this here

finishes and then this one starts and you can control it that way. So basically,

now if I basically put it back in there and let me just

zoom in so you can see the animation properly. Just like that.

And we can make this circle smaller. But basically if I play have

a look. Nice and easy. Nice and easy.

And what I can do actually is I can say, right, so continue or

repeat basically. And there we go. So this is

basically how to do it. All right, nice and simple.

You can export this to GiF, SVG,

CSS, JSon and whatnot. So this

is pretty much the tool that I use. Right?

And if I cancel this in here. So let me just show you some of

these diagrams. So this actually is done by Abdul Latif

from Nigeria. So big props to him. But you see that

it's all about basically creating these diagrams and then adding these animations

to it. And this is figma. The last one I want to show you is

draw IO. So draw IO is basically this

awesome tool that allows you to create architectural

diagrams. Now if I click on start and it's both available for

Mac, Windows, web and also as extensions. So I

use it mainly with vs code intellij. But whatever id

they use, they must have an extension there. Cool. So here we've got a

diagram which kind of is empty. So what you see sometimes. So if they

go like all of these shapes, which is quite nice, let's just take a database

in here. And then let's just take an actor for example,

just like this. And in

here, if I zoom in, right, so what we can do is we can say,

right, so from this actor to this database,

it goes like that and you can see that it has all the connections and

whatnot. So, oops, not that that I want to do.

Yeah, I want to detach it just like that and then make it

smaller. There we go. Let's take another arrow going

the other way, just like that. And let's just detach it

by the way, I'm not a professional on this, so let's just do it like

that. And then just like that. So what is

really cool is I think some of you have seen that these animate, right?

So what you do is so you can select individually like that,

or you can go to, I think it's edit edges.

I want to select the edges and then go to property right here,

scroll down and then flow animation. And now have

a look. And you can create really, really interesting

diagrams basically with all of these tricks. Now, dry o doesn't give

you the flexibility of exporting to GiF. So what you have to do

is you have to record a portion of the screen and then export that

to MP4 or GIF or whatever. Right. But basically

this is pretty much how it's done. Don't forget

to subscribe. Also join the newsletter.

So we're going to be sharing all of these diagrams and awesome information

that will help you to become a better engineer and stay up to date with

the latest trends and best practices and whatnot.

And. Yeah. So for now. And I'll catch you in the next one.

Salam walaikum.