13.03. FramerX - Design Components and Stacks

13.03. FramerX - Design Components and Stacks

(energetic electro music)

Hello, and welcome back to the Framer X course.
My name is Meng. Today I'm gonna teach you about design components and stacks. There are two types of components in Framer X. The first one is the design component which is very similar to Symbols in Sketch but you can actually change the size and position, as well. And then, there are the core components which we will explore a little bit later. In this lesson, we want to make sure that our design is adaptive, and in doing so, we need features like stacks and constraints. For the constraints, I've shown you that you can resize and it does a really good job at setting up the constraints without having to do anything, but then, you can also change the device itself, from here, to portrait or landscape, and then change between the different devices like this.

Let's set up our first component, right here.
First of all, your component has to be a frame, so let's draw a frame, right here, that is 120 by 80. Let's set the radius to 10 and then, change the image. Let's choose one of these backgrounds, like this one, and then, create a title, press T. Let's type Design layouts and icons. We're gonna change to fixed and resize this.

Let's change the size to 12 and then 1.3.

Let's make it 10 across all sides
but we can do that here, to be more precise. So, 10, 10, 10 and 10. If you focus your attention here, you'll see that there is a blue line for each side and the values are 10 and when it's blue it means that it's enabled, it has to be pinning with distance of 10. This one is not enabled, so I will enable this and I'm gonna set it to 10, as well. Because it's pinning, I can select the entire frame and resize it. You can see that the text layer is pinning and it's always keeping the same consistent distance of 10. Let's put it back to 120 and 80. Let's draw a progress line. So, inside this frame, set the width to, let's say, 80 by three and then put that at the very bottom. We're going to set a gradient using linear and then using one of these gradients I'm going to move it to be horizontal, like this. I can also use Control + C to get one of these colors,

like this.
Let's not forget to set the radius, let's say, to two. And then, you're noticing that it's kind of going over the frame, so what you can do is select the frame and go here to overflow, and set it to hide, like this. Let's set the distance to 30 and then, we can right-click on this and create a design component out of this frame. The shortcut is Command + K. Now, it becomes a reusable component. What this means is that I can duplicate this many times using option track. For example, I have the master and the instance. The instance is a copy and if I change anything inside the content it's not going to affect the master. Let's type Design components and stacks. What is cool is that I can change the content, and even the size, so the position of the progress, even the size for this text, and it's not going to affect the master component. The master component, if I change the positioning, because it was not overridden, it will affect all copies. The structure of the master component is gonna affect all copies, but every copy can override the text, the content, the image, and even the size, the positioning, and that's really unique to Framer X. Just to give you an example, if I delete this, it's also going to delete the content of the instances. Let's change the background for the image, here. I'm gonna pick, let's say, number four, and that's pretty cool. So, you can change the content directly, layer by layer. But also, if you go to the master component, you can also choose the overrides, like this, in the text. So now, by just selecting the instance, I can change the overrides directly from here, and that can be insanely useful when you have so many nested layers inside your component and you want to be able to control, just by clicking here and going to the inspector. Awesome! Now, I want to show you the power of stacks because that's one of the more exciting things about Framer X. You're gonna press the plus sign, here, and you can click on stack. The way that this works is the same as a frame, so if you draw outside and surrounding this frame, it's gonna automatically nest it inside, and additionally, you have this really nice smart grid that is useful, so you can do that. I can draw from here to here

and then automatically, it's gonna center within that stack.
Afterwards, selecting the stack, you can resize it and you can even decide to reorder by selecting the frame and move it here or here. That's mind blowing. For those familiar with Flexbox or CSS Grid, it works pretty much the same way. I can click the stack and I can change the way that it's distributed. For example, it can be horizontal or vertical, I can decide that this starts from the left side instead of spaced evenly. I'm gonna click on start, and then using that, I can set the padding from the left to be 40, so that it's aligned with the top card and I can set the gap between the components, let's say to 20, and now I can add more components if I want to, I can just select this one or this one and then I can do Command + D to add another one and consistently and adaptively it's gonna add that new component. On the third component, I can change the text to Quick prototyping

and then also change the image itself,
let's say number six, and voila! Let's also change the size of the progress, like this, and then, if you go to the master component, I can change the name of the component, so Card Small, let's say, and automatically, it's gonna change the name of the other instances. The same with the round here, I can say Line, and it's going to change everywhere else. The other thing you can notice is that the override here is kind of strange. I can just go to this layer and rename it to Title and it's gonna be a lot more clean. Now, it's just gonna say Title. Of course, you can even nest the stacks or components. For example, let's say I press S, and from here I'm going to draw this surrounding the whole thing. Now, I have a stack of another stack and a card and a line. I can change the spacing to 30 between each. What is cool about this is that this is truly adaptive. What it means is that if I rearrange this, I want to make it bigger, see how it affects the rest of the elements. The same with this line; if I want to make it bigger, as well, it just push everything down. For now, I'm just gonna revert back. Let's create a second frame. This time, we're gonna use it as a menu. Let's press F, I'm going to select iPhone 10, I'm going to set this to black,

and resize this to 280.

While we're here, let's rename this to Menu,
and this to Home. The first thing I want to show you is this really neat package called Unsplash, so let's go back and search for Unsplash.

Let's go with Unsplash images, and install.

We're going to drag and drop, here.
Let's set it to the full width and then 140, and you can totally change the image here. Let's say aurora, and that's going to search the billions of images using this term. Another package that I really like is called Profile, so I'm gonna go here and search for profile,

install it,
get the component,

and put it right here.
Of course, you might want to have a transparent background, and then set the text to white. This is fully customizable. Let's say, I'm gonna set it to Canada. It's going to change the avatar which is from UINames. I can set it to grid or list,

resize it.
Let's set it to 60, let's put it roughly here, so that the black is in the middle of the two texts, and resize it to the full width. You can customize the size of the title and the size of the subtitle, as well as the avatar. Let's set the avatar to 44, put this back to 17, and then center again. With this, we can start creating our video. So, let's create a frame, 280 by 44. Let's remove the background and then create a title inside it. The title is gonna be starting with Watching Now. It's gonna be 17 and let's center it, set to 66 from the left. The text is gonna be SF Pro Text and it's going to be semi-bold. I want to add an icon to the left so I'm gonna go to featured in the store.

There's this really nice package called Icon Generator,
so I'm gonna install that, then go to components, and then find the Icon Generator and drag it right here. Let's make sure that it's white, set the icon to play, and you can choose between Feather, Material, Font Awesome, which, by the way, have their own websites. Let's resize this to 16 by 16, set the distance to 20 and then center vertically, so we have 30 from the left, 20 from the text. Right now, there is an issue with this package where it shows bolder than it actually is. If you zoom out, it looks like this and it's supposed to look like this, but the more you zoom in, the more it becomes bold. Just keep that in mind. Let's change the color to this second gray, so 555, then we're going to add a line, so press F,

right from here,

so it's roughly 250 by one,
set it to white, and then, perhaps, set it to 8% opacity.

And then, I'm going to start creating a stack, pressing S.
I'm going to have multiple items. Let's do that vertically and at the start,

set the gap to zero,
and here, I'm just gonna duplicate multiple times, Command + D.

Again, going back to the master,
I'm going to set the text to be replaceable as an override. To make it more clear, let's change the name to be Text,

and this one to be Line.

On the second item, I'm going to change this to Courses,
then, Projects,

and then, Logout.
For each of these icons, I can change it to a new one. This one is gonna be Book-open, the third one is gonna be Image, and the fourth one is gonna be log-out. By the way, if you're wondering, where do you get all of these icon names, you just go to feathericons.com and here, you can search for the icon that you want. Maybe, as a final touch, I would like to add some gradient in the back, so that the text is always readable, so I'm gonna use a graphic, instead of a frame. The reason why I'm using a graphic is because the frame tends to nest things when you drag inside it. If you drag this here, it's gonna go inside the frame, but a graphic doesn't do that. I'm gonna put this underneath and change the gradient to be one of these. Let's select the second one, like this. Awesome! Let's create a new page called Projects. I'm going to duplicate this, Command + D.

I'm going to rename this to Projects,
set the background to black, and obviously, I want to be able to change this to light, and this to light, as well. We can decide to remove the stack so that I can keep the line here. Remove the stack, and I'm going just delete this. The text is gonna be white, changing it to Projects.

This line, here, I'm going to press on the 1
to get a 10% opacity. I want to show you a really cool package called Grid. Let's go to the store again, and go to Grid Tool, install it,

go to components, and drag and drop this.

Let's set it to 300 by 600.

With this package, you can quickly set up
a grid of images, of content, and set the number of rows and columns. For example, I'm gonna set it to two columns and let's say five rows. Now, we need content for all of these beautiful squares. You see this little dot, here. It allows you to connect to any frame, I can connect to one of the icons, or

this whole screen, and it's gonna look weird, of course.
I can also set it to this and somehow it managed to autodetect the Unsplash content. That's because, it's basically just taking this frame resized at this size. That's how it managed to get this image. The content can come from any API, so I can go to the store, look for Design Hunt,

install this,

and then I can just drag and drop that content.

Instead of using the Unsplash content,
which is this box, right here, I'm just gonna move that to this, and now, I have content from Dribbble, which is really neat,. We're working with real data, here, and I think that's really exciting, what Framer can do in just a few clicks, as you can see. I'm going to center this

and then, set to 30 from the top.
Great! Before I finish, let's set up the courses page, as well. Duplicate this, I'm gonna remove this, set another background, I'm gonna use Control + C and make it a little bit darker.

Let's make this into a component.
Select this, create a component, and I'm gonna select this, using Command + C, and paste it right here.

Delete the old one, same with this one,
and delete the old one, rename this to Courses,

use this card to create a component,
and then, copy this. I'm gonna put it right here.

Let's not forget to set the override,
so the card image, the text, and the time. We can also rename these, so Title,

and this is gonna be Play,
Time is fine, but the text, itself, should be Time.

Now, we have the overrides.
Let's stack this, pressing S all the way to here, set the gap to, perhaps, 30,

duplicate this.
We can also change the size of this component instance without affecting master. So, let's change this to 270,

and this one, as well.

Let's zoom out and you can see
that the master instance has not been affected and I can just change the content of these. Like this one, I'm gonna change to react,

change the override
to React for designers, and maybe 20 minutes left. As you can see, we've managed to do so much in so little time, using components, stacks, and the store components that are available to us. In the next session, we're gonna learn how to prototype all of these screens. It's gonna be super quick because we're gonna use links and scrollviews. We're going to preview everything on the device or directly in a preview. So, definitely stick around because I have a lot more stuff to teach you. Thanks so much for following along. I'll see you next time.


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?