#Figma grid how to
#Figma grid plus
#Figma grid download

Now you can search for your new component in the Assets panel, drop it into your project, and tweak away! Rename the Frame in the Layers Panel.Īnd then, from the Toolbar, click on the Create Component icon.

With the Card Frame selected, change the element spacing to 16.Īnd for the Card itself, let’s apply 24 padding all the way around.Īnd finally. Let’s make some final padding tweaks to get everything spaced perfectly. Time for some final tweaks to our Component. Then, with the new Frame selected, choose Fill Container from the Resizing options. With the two text layers selected, use the keyboard shortcut Shift + A to wrap them in an Auto Layout frame and then apply individual spacing, let’s say 4, to this Frame. Secondly, you can probably see that Auto Layout added a little too much spacing to certain elements inside the Card, pushing the two text layers a little too far apart. Like we did with the text layers previously, this will allow the placeholder to expand horizontally if you decided to change the width of the Card component. Let’s make a couple of tweaks to have our Card looking its best.įirstly, select your Placeholder component and choose Fill Container from the Resizing options. You’ll see that adding Auto Layout lined everything up and added a more consistent amount of padding around the whole Card.

#Figma grid plus

With the Frame selected, click the Plus icon in the Auto Layout panel in the Inspector. Let’s add Auto Layout to this Card component so that it’ll automatically resize as you add content to it at a later date. Then, from the Variants options, set its size to Medium, and give it a Right Icon.įirstly. Let’s finish up our Card with a button.įrom the Assets panel, search for the Button component and drop it onto the Card.

With both text layers selected, choose Fill Container from the Resizing options to allow the text to expand horizontally if you decided to change the width of the Card component. Let’s give it a Grey colour style to contrast well against the Title.Īgain stretch its bounding box out to the width of the Title. The Headline style at 21px will work great here.Īnd then stretch out its bounding box to the same width as the placeholder.įor the content, add another text layer and choose the smaller Body text style at 16px. Let’s add in some text styles for both our Title and Content.įor the Title, press T for the Text tool and then choose a suitable text style from the Inspector. Auto Layout will do all that for us very shortly. Let’s add a placeholder image to our Card using one of the existing components in the tutorial file.įrom the Assets panel, grab the Placeholder component and drop it onto the Frame we just created.ĭrag out the resizing handles to increase its width, and height inside the Frame. Let’s add a drop shadow to our Card also.įrom the Effects panel, click the Style icon and choose Shadow / 100%. For example, we can apply the White fill colour directly on the Frame instead of an unnecessary shape layer. Using Frames allows you to use features such as Auto Layout instantly and cut down on the number of layers in the Layers panel. Honestly, apart from small use cases, there’s not much need for using rectangles when a Frame can do a much better job. You’ll have noticed that I used a Frame here instead of drawing out a rectangle and applying a Fill colour to that shape. Then from the Fill panel in the Inspector, click on the Style icon and select the White Colour Style. You can edit the sizing in the Inspector to get it just right. Press F to select the Frame tool and draw out a frame around 400 pixels wide and about 440 pixels in height. (ANOTHER) QUICK NOTE: You can also view the video below (which is from the Premium Edition of my Design System for Figma Cabana) if you prefer to follow along that way.

#Figma grid download

QUICK NOTE: Download the required Figma file here to follow along with this Tutorial.

#Figma grid how to

In this tutorial, I'll be showing you how to create a new Card Component in Figma, so you can see how easy it is to start building your own components as well as how to use powerful but sometimes confusing features such as Auto Layout in Figma.Īnd like I mentioned in my previous tutorial, it's better to start small and then work your way up to bigger things right?Īlso included in the Figma file below is a mini-mini design system for you to play around with, and get a small understanding of how design systems are created in Figma (as well as how Variants are applied to certain Components).