Speaker A
Let's learn how to make this professional sidebar design and animation in Figma super easily with absolutely no code.
Learn to create a professional animated dashboard sidebar in Figma with no code, including free design files and step-by-step instructions.
Key Takeaways
- Figma's Smart Animate allows smooth sidebar and card animations without coding.
- Consistent layer naming is crucial for effective animation transitions.
- Hover and click triggers enable interactive UI elements in prototypes.
- Subtle design details like outlines and light shadows enhance visual appeal.
- Duplicating and adjusting frames is a core technique for animation workflows.
Summary
- The tutorial covers designing a sidebar and animated cards in Figma using no code.
- Includes a free Figma file with a style guide for easy customization or building from scratch.
- Explains the use of icons, text, dividers, and subtle design elements like outlines and drop shadows.
- Demonstrates duplicating frames and setting opacity for hover and click animations using Figma's Smart Animate.
- Shows how to link frames with interaction triggers such as while hovering and on click.
- Details creating slide-up animations by adjusting frame positioning.
- Explains naming layers consistently to optimize Smart Animate transitions.
- Includes adding labels and hover effects to icons for interactivity.
- Shows how to create focus states with strokes and blur effects.
- Demonstrates building loading animations with frame duplication and rotation.
Full Transcript — Download SRT & Markdown
Speaker A
Grab the free Figma file in the link in the description down below to follow along with me. This design can really be broken down into two major steps: the actual sidebar and then the cards that pop up as we move through the flow.
Speaker A
The sidebar itself is pretty simple, just a handful of text, some dividers and a bunch of icons, which really are the secret to a great sidebar.
Speaker A
I've attached a style guide in the Figma file, so if you really wanted to design this from scratch, it should be pretty easy.
Speaker A
Anyways, the cards themselves are also pretty simple, but I want to point out the very subtle outline around it and basically everything else on here.
Speaker A
This allows us to use a pretty compact color guide with most of our colors being pure white or very close to white.
Speaker A
There's also a very subtle drop shadow on the pop-ups with these settings. Notice how we're not using a transparent black, but instead a very light gray.
Speaker A
Let's get into animating this thing.
Speaker A
Starting off with our base frame here.
Speaker A
We can hold option and drag out our next frame.
Speaker A
We're going to be duplicating things a lot, so it's important to know that.
Speaker A
To start off, we'll add our hover rectangle and get it positioned below our text.
Speaker A
On this frame, we want to set the opacity to zero.
Speaker A
Make sure to use the one up here for everything that we do instead of the one in the fill down here.
Speaker A
We're going to come and grab this rectangle here and set the opacity to 100%.
Speaker A
Switch into prototyping mode in the top right.
Speaker A
And then we can grab our rectangle here and drag a node out from it to our next frame.
Speaker A
Here, our interaction will be while hovering and our animation will be smart animate.
Speaker A
We'll be using these settings mostly, but switching between while hovering and on click for the majority of our animations.
Speaker A
Switching back into design mode in the top right, we can grab our second frame here and paste in our options menu.
Speaker A
We'll get that lined up nice to the right.
Speaker A
And then we can go ahead and set the opacity on it to 0%.
Speaker A
Go ahead and duplicate this frame.
Speaker A
And then we're going to come in here and set our menu to 100% opacity.
Speaker A
But we only want these rectangles to pop up when we're hovering on them.
Speaker A
So, let's go ahead and select all of them.
Speaker A
And then set the opacity to 0%.
Speaker A
Holding option, we can grab our frame and duplicate it again.
Speaker A
And then we can grab the rectangle and the two elements here.
Speaker A
And set that opacity to 100%.
Speaker A
Coming back to our previous frame, we only want this to show up when we actually click on quick actions.
Speaker A
This rectangle here.
Speaker A
So, let's switch into prototyping mode one more time.
Speaker A
Come in here, grab our rectangle and drag a node from it to our next frame.
Speaker A
And we'll have the trigger on click and the animation be smart animate.
Speaker A
Then we can come back to this frame here.
Speaker A
And grab the rectangle that we hid.
Speaker A
Drag a node out from that to our next frame.
Speaker A
And switch the trigger to while hovering.
Speaker A
Now, if we go ahead and preview this, it's actually looking really good so far.
Speaker A
But if we want to step it up a notch, we can come back to our editor.
Speaker A
Come over to this frame here and select all of our transparent menu at the moment.
Speaker A
And slide it down.
Speaker A
It doesn't matter too much how much we slide it down, but just give it a couple of pixels.
Speaker A
Now, when we preview it, we get this really nice slide up animation too.
Speaker A
For the rest of the links, we just repeat the process we went through three more times.
Speaker A
And connect everything up to smart animate until we get something like this.
Speaker A
Let's grab this frame and go ahead and duplicate it.
Speaker A
And then we can come in here and delete all of the content on our card except for the card itself.
Speaker A
And then paste in our pop-up content.
Speaker A
Next, let's grab our background card and just adjust the height so that everything fits in there nicely.
Speaker A
Let's go back to our integrations frame way down here.
Speaker A
Grab this rectangle and copy the name of it.
Speaker A
Then we'll come back up to our search bar and paste it in and make sure that they are in fact the same.
Speaker A
The reason we do this is because of how Figma Smart Animate works.
Speaker A
Figma searches the old frame and new frame for matching layer names.
Speaker A
If the names match, it assumes that they're the same element.
Speaker A
And animates it as such, if it has a different name, it assumes that they're two separate objects.
Speaker A
And fades the first one out and the second one in.
Speaker A
So, if we come back down here and grab this frame.
Speaker A
Grab our rectangle and drag a node up to our next frame.
Speaker A
Have the trigger to be on click.
Speaker A
And add a little bit of extra time here.
Speaker A
Make sure the trigger is on click here.
Speaker A
And then if we hop into our prototype, we can see that it results in a really cool animation where this rectangle slides up to become our search bar.
Speaker A
When we get to this part of the flow, we don't have any labels for these icons here.
Speaker A
So, let's add some.
Speaker A
I'm going to paste in a quick little description of Notion here.
Speaker A
And then we can go ahead and grab this frame and duplicate it.
Speaker A
We'll leave this frame down here as is, but for this one up here.
Speaker A
Let's grab it and slide it down a touch.
Speaker A
As well as make it fully transparent.
Speaker A
Then let's also come down here and grab the rectangle behind the Notion logo.
Speaker A
And make the fill just ever so slightly off white.
Speaker A
And then all we need to do is grab our Notion up at the top.
Speaker A
Switch into prototyping mode and drag a node out between the two.
Speaker A
And change the trigger to while hovering.
Speaker A
And then if we check out our prototype, we get a very nice hover interaction whenever we hover on Notion.
Speaker A
We can repeat this process for all of the other icons here, which is what I've done here for a fully interactive feeling.
Speaker A
Next, we're going to duplicate this frame.
Speaker A
We'll come up here and slide this down.
Speaker A
And change the opacity back to zero.
Speaker A
As well as set this background back to pure white.
Speaker A
Then I'm going to copy in our new content.
Speaker A
And let's drag down this rectangle so that everything will fit in very nicely.
Speaker A
We're then going to come back to our Notion rectangle here.
Speaker A
And set the stroke to be a bright yellow.
Speaker A
And change the weight to be darker.
Speaker A
Then hit command or control D and grab our bottom rectangle here.
Speaker A
Let's grab an effect and we'll have layer blur.
Speaker A
And set that up to something like 24 pixels.
Speaker A
Now that we have a nice focus state on that, let's connect these two.
Speaker A
So, come back to our previous frame.
Speaker A
Grab our group and switch into prototyping mode.
Speaker A
And then drag a node out to our next frame.
Speaker A
And the trigger will be on click.
Speaker A
Next, let's create this connect hover effect that you can see right here.
Speaker A
Let's go ahead and dupe our frame here.
Speaker A
And then we'll get a nice link icon in here.
Speaker A
And position it next to our connect text.
Speaker A
And scoot our connect text over.
Speaker A
Go back to the previous frame.
Speaker A
And pop in our link, but move it over ever so slightly so it overlaps with our connect text.
Speaker A
Then hit K on our keyboard and scale down our link.
Speaker A
And turn the opacity to zero.
Speaker A
Connect this rectangle with a hover interaction to our next frame.
Speaker A
And just like that, we've got a very nice hover interaction.
Speaker A
Let's grab this frame and duplicate it one more time.
Speaker A
And then come in here and delete all of our requirements.
Speaker A
And instead, we're going to replace it with our loading dialogue.
Speaker A
So, grab the frame.
Speaker A
And we'll paste in our loading dialogue here.
Speaker A
We're going to connect the previous frame with a click trigger to this one.
Speaker A
Just like so.
Speaker A
Then let's grab our loading frame and duplicate it four times.
Speaker A
So, there's one and two, three, four.
Speaker A
There we go.
Speaker A
Leave this very first frame as is.
Speaker A
And then we're going to come in here, grab our icon.
Speaker A
And set the rotation to 180 degrees.
Speaker A
Leave this next one as is.
Speaker A
Don't touch anything.
Speaker A
And then on our fourth one here, once again, we'll set the transform to 180 degrees.
Speaker A
Leaving the last one exactly the same.
Speaker A
To hook this up, let's come all the way back to our top one here.
Speaker A
And drag out a node from the frame itself.
Speaker A
Our trigger is going to be on delay.
Speaker A
And we will grab a delay of 300 milliseconds.
Speaker A
Then let's come into curve and this will be the only time that we actually create a custom spring for ourselves.
Speaker A
We're going to set the stiffness to 550.
Speaker A
And set the damping to 40.
Speaker A
And leave the mass as it is.
Speaker A
Do the exact same thing for all of the rest of the frames.
Speaker A
And now if we check out our animation, when we hit connect.
Speaker A
We get this awesome spinning loading animation.
Speaker A
All right, last step.
Speaker A
I promise.
Speaker A
Let's duplicate our frame.
Speaker A
And then delete all of the loading text in there.
Speaker A
Select the frame itself and we can paste in our success text.
Speaker A
Just like we did with that rectangle before, let's make sure that the name of this icon here.
Speaker A
Is exactly the same as the name of this icon down here.
Speaker A
So that smart animate knows that they're actually the same elements.
Speaker A
And animates them as such.
Speaker A
We're going to come into our Notion rectangle and delete this blurred background here.
Speaker A
We're also going to change the stroke of this from our bright yellow to a black.
Speaker A
And we're also going to add this cute check mark in here.
Speaker A
Now, we could leave it at this, but I want this check mark to slide in instead of just fading in.
Speaker A
So, let's grab a rectangle here and draw it out to be the exact same size as our square.
Speaker A
Give it the same border radius too.
Speaker A
And then drag it below our check mark.
Speaker A
We'll grab all three of those, come up to the top right here and hit use as mask.
Speaker A
That's all we need to do on this frame.
Speaker A
So, let's grab our mask group, copy it.
Speaker A
And come back to our frame down here.
Speaker A
And hit paste.
Speaker A
There we go.
Speaker A
It's in there quite nicely.
Speaker A
So, let's grab our check mark and this shape here.
Speaker A
And just slowly nudge them out of the way so that they're not visible anymore.
Speaker A
Finally, last step.
Speaker A
Let's take this frame.
Speaker A
Hop into prototyping mode one last time and drag a node out between the two to connect them.
Speaker A
After a delay of 300 milliseconds.
Speaker A
And we can set our curve back to the regular ease out.
Speaker A
And there we have it, guys, a fully prototyped, working sidebar in Figma, zero code, super easy to put together, but very interactive and it just looks super great.
Speaker A
Remember to grab the free files from the link in the description below, and leave a comment for me if you enjoyed this type of video and I'll make more.
Speaker A
Other than that, thank you for watching.
Speaker A
And I'll see you in the next one.
Topics:Figmasidebar designdashboard UIanimation tutorialno code animationSmart AnimateUI designinteractive prototypedesign files freehover effects
