Here's The Secret How To Create These Animated Diagrams
Summary
TLDRIn 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
📊 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.
🔧 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.
🔄 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.
Mindmap
Keywords
💡Animated diagrams
💡Canva
💡Figma
💡Draw.io
💡Rotate
💡Wiggle
💡Paths
💡Flow animation
💡GIF
💡Screen record
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.
関連動画をさらに表示
Lewis Diagrams Made Easy: How to Draw Lewis Dot Structures
Make Money Creating AI Animation Video | Kids Learning YouTube Video | AI Tools
Top 6 Tools to Turn Code into Beautiful Diagrams
Create 3D Animated Love Story With Free AI Tools in 5 Mins. #aianimation #pikalabs
Control IO Warehouse
Canva से Thumbnail बना कर Daily 500₹ Earn करे | How To Earn Money With Canva |Canva Tutorial In 2024
5.0 / 5 (0 votes)