In this article, I want to show you how I used auto layout and components to recreate the pin stack you see above (from the Pinterest design) in Figma.
You can also watch it on YouTube
1 Take Screenshots For Reference
I'm making a Pinterest Clone in Figma as an exercise to to work on developing an eye for good Ui & Ux.
Checkout my Pinterest Clone In Figma playlist
So, I started by heading to the Pinterest website and grabbing screenshots of the parts of the design I am going to copy.
If you're using a Mac you can take a screenshot by pressing cmd shift 4, then select the area you want in your screenshot. A neat trick I recently learned is pressing and holding the ctrl key while making the selection and the image will be copied to your clipboard. Then you can head to Figma and just press cmd v and you're done!
Open a new Figma draft design file, and paste the screenshots.
We have 2 card stacks that are almost identical except that they have different text and one has a lock icon above it.
The second screenshot shows the hover state. It's hard to see in the screenshot but there is a subtle difference on hover that makes the card stack just a tiny bit darker.
2 Inspect Code For Precise Measurements
Since this is just an exercise you can size elements just by eying them, which I always do for exercises. But I found it insightful to dig in and have a look at the actual sizes of the elements.
All you need to do is head to your browser, right-click, and select "Inspect"
Code will appear next to the page (which might seem intimidating if you're not used to code, but we're just grabbing some measurements).
Press on the "select an element in the page to inspect it" icon.
Hover above the first image in the stack and its size will show up above it (116px * 155px).
The code on the right side shows us 2 things; elements and style.
Elements (the code above) is the HTML; the structure of the page; the elements the page is made up from. The HTML you see here is all the HTML for this page.
Style (the code below) is the CSS (the style and looks of the elements on the page). The CSS you see below the HTML is only the style of the HTML element you select. So to find the style of an element you must select it first.
We already know the dimensions of the image, now we want to know the corner radius. In CSS corner radius is called border-radius.
We can manually look through the CSS code and look for border-radius, but there's too much CSS code. Above the CSS code, there's a filter text box. Write radius or border-radius in it.
It might show no result! Even though it clearly has a border radius!
You'll see inside the HTML code many lines that start with <div. You can think of a div as a Figma frame. It wraps around and holds other elements, including other frames or divs. So the corner radius might not be applied to the element directly but to another frame that is holding it.
So keep selecting the line above in the HTML code until your filter gives you a result. Just going a couple of divs up will show you the value of the border-radius property (border-radius: 16px;).
Keep going upwards through the divs in the code till the stack of images only is highlighted and get its width and height. The dimensions will pop up above it when you select its code. (236 * 137 px)
Then get the width and height of the full component(236 * 215 px).
Finally, select the main text and get its font size (20px).
And the font size of the secondary text (12px).
One last thing we need to grab is the dimensions of the lock icon (32 * 32 px).
If you're wondering about the point of getting precise measurements when the sizes will change when the device size changes, they won't.
The way Pinterest handles responsiveness is they keep the elements' sizes the same but the grid holding the elements changes. More elements are added horizontally when the size increases and elements are removed when the device's width gets smaller.
You can see this if you open the toggle device toolbar and change to a smaller device, all the sizes we took are the same, even the text! but the grid adapts by presenting fewer columns
3 Grab An Image From Unsplash
We need an image to work with so grab one from Unsplash.
Instead of going to Unsplash.com searching for an image, downloading it, uploading it into Figma, then doing this for all the other images we'll need later, just install the Unsplash Figma plugin.
To quickly open the Unsplash plugin (or any other plugin), get the quick access menu by pressing cmd / or cmd p (probably "ctrl p" for windows), write Unsplash and press enter, and it will open.
Select any image and it will be dropped into your canvas.
4 Set Image Properties
Select the image and give it the dimensions we grabbed from the inspector earlier; a width of 116px and a height of 155px. And give it a 16px corner radius.
5 Auto Layout Frame (Images Container)
According to our in-page reference (the screenshot), we want to have 4 images stacked on top of each other.
We'll start by adding an auto-layout frame around our image, this frame will be the container for all 4 images.
Select our image and press Shift A, this will add an Auto layout frame around it.
I renamed this auto-layout frame to "images" to keep the layers panel organized and readable.
When using Figma forget about using rectangles and putting elements inside them (just like you would with a classic graphic design app). Figma has a tool for wrapping other elements called frames. A frame is like a container for your elements, a bit like an HTML div element. For example, a webpage can be a frame with 3 frames inside it; header, main, and footer. The header has a home button, this can be a frame as well, and so on.
There are 2 types of frames in Figma; regular frames and auto-layout frames. Regular frames allow you to layout the elements inside it freely, while auto-layout frames have more specific values to manage the alignment of the elements inside it. This speeds up your workflow for the majority of cases where elements are laid out in an ordered manner. So use auto-layout frames whenever possible.
The auto-layout frame has padding by default, so remove it, by setting All paddings to 0px.
To add the other 3 images select the image inside the auto layout frame, and press cmd c then press cmd v 3 times. Our auto-layout frame is set in the horizontal direction so the images will be next to each other, just what we want.
Bring up the Unsplash plugin again, and change the images. Select the image you want to replace in the design, and once you click on an image in the Unsplash plugin it will replace it.
To make the images stack on top of one another, set the distance between them to a negative number.
The width we took from the inspector for the image container is 236px, so keep reducing the Spacing between items property until the width of the whole frame is exactly 236px.
The order of our images is wrong, the last image is on top. We want the first to be on top.
Press on the 3-dotted icon, in the Design panel, in the Auto layout settings section, to go to auto-layout advanced settings. And change the Canvas stacking to "First on top".
Also, our image stack is a bit hard to look at, as nothing separates the images.
Looking back at the reference you can see that each image has a white border around it.
Inspecting the code again, I found a property of the image that we missed. It has a 1px white border around it.
To select all 4 images at the same time, select the "images" frame and press Enter. At the design panel, go to strokes and press on the + icon next to it to add a stroke around each image. Give it a white color. The default size is one pixel already.
6 Add Text To Your Component
We grabbed the font size from the inspector earlier, but not the font weight so I went back in and got it.
The font-weight for the main text is bold.
And the font weight for the secondary text is normal/regular.
Add 2 text boxes and set the "main text (All Pins)" to 20px, Roboto, bold, and the "secondary text" to Roboto, 12px, regular.
To add a text box press on the T key to grab the text tool, then press on the canvas and a text box will be added.
In Figma, we'll group the 2 text boxes, by adding an auto-layout frame around them.
In the code, the same thing is happening the main and secondary texts are grouped inside an HTML div element.
I found this element and inspected its code to see what properties this frame will have. It has an 8px padding in all directions (top, bottom, right, and left).
Also, the text's div/frame has a height of 59px.
Select the 2 text boxes then press "Shift A" to add an auto-layout frame around them.
In the design panel, under auto-layout settings, give the frame a padding of "8px". Then change the "distance between items" till the height of the frame is 59px.
I named this frame "text" to keep the layers panel organized.
Then to wrap everything in a frame I select the images frame and the text frame and press Shift A to add another auto layout frame around everything. And name it card.
Also, adjust the distance between items inside the card frame till the height of it is 215px.
7 Create a component
We'll turn the card into a component, this will allow us to take many instances of it. And if we update our component all the instances will be updated.
By turning the card into a component we can also make a hover variant for it and prototype our component.
To turn the "card frame" into a component, select it and press the create component button at the top of the page.
Notice how the icon of the frame changed to the component icon in the layers panel and also to a purple color to make it distinct from normal elements.
8 Text Component Properties
Next, we'll add component properties. We'll start by adding text component properties.
Component properties are a part of Figma's new update (config 2022). Using them makes customizing instances of your components easier and faster, and will allow you to use fewer variants.
To set a component property, select the element you want to turn into a customizable/editable property, in this case it's the main text (All Pins).
In the design panel, next to content, press on the Apply text property icon.
You'll be prompted to give your new component property a Name and a default Value, after you do, click on Create property.
And the same goes for the secondary text (1,851 Pins).
9 Add A Boolean Property To Show/Hide An Icon
Normally I just quickly grab icons from one of the icons plugins in Figma, but I couldn't find this one. So instead of searching for it online, or recreating it in Figma, I just went to the icon in Pinterest and grabbed its SVG code.
SVG
stands for scalable vector graphics. It's used to display vector graphics for the web.
Go to Pinterest's boards page and right-click on the lock icon and select inspect. The SVG HTML tag of the icon should be highlighted. Copy it by pressing Cmd/Ctrl C.
Paste it inside your Figma File by pressing cmd/ctrl v.
Leave the width and height of the vector as they are.
We want the frame around the vector to have a rounded white fill.
So I turn the frame around the icon into an auto-layout frame by selecting it and pressing shift A, setting the icon resizing to fixed horizontally and vertically, so its size won't change when we resize the frame.
You can also select the icon and set its constraints to center and center then you won't need to turn the frame into an auto-layout frame.
To easily select all the items inside a frame (a regular frame or an auto-layout frame), select the frame and press Enter. In our case, by selecting the frame of the icon and pressing Enter, we can quickly select and edit the vector inside it.
Change the frame's width and height to 32px (The size we got for the icon earlier). Then set it to center alignment, to center the vector inside it.
Give the icon's frame a fill and rounded corners.
To add a fill press on the + icon, next to Fill, inside the Design panel, and set the color to white.
In the design panel, Frame, give the frame a 100px rounded corners, to turn it into a circle.
Drop the icon into our component inside the "images frame". It will go next to the images and push them out of place. We want it to be above the images.
We'll easily make it hover above the images inside the "images frame" by selecting it and pressing on the new Figma feature absolute position inside the Frame setting in the design panel.
Absolute position is a part of Figma's latest update. It allows an element to be a part of an auto-layout frame, but we can set it freely with a fixed position inside the frame. So it's still grouped with the elements of its frame but it doesn't need to follow its positioning and alignment rules.
To get a precise position for the icon inside the card frame I went back and inspected the code and found that it has a margin-left of 16px, and a margin-top of 16px.
Translating this in Figma, just give the element an x and y positions of 16px inside the images frame.
Now to create a component property to toggle this image on and off in our instances, select the icon, and inside the design panel, next to "Layer" press on the create boolean property icon.
Boolean properties are used to show and hide any layer inside your component.
And, you'll be prompted to give your new property a name and value.
I set it to False (hidden) by default, but it doesn't matter much.
10 Take Instances Of The Component
Let's try out our component properties.
We'll start by adding a frame. This frame will be the container for our design. It represents the webpage where the design is viewed.
To present a design it must be inside a frame. I selected a Macbook pro 14'' as the size of the frame but you can select any other device or make a custom size, it doesn't matter much in our case.
Click on the frame tool (top-left), then select one of the custom size frames from the "design panel".
Drop 2 instances of our component inside the MacBook frame.
To take an instance of a component just make a copy of it, the fastest way is to just grab it while pressing and holding the alt key and drop the instances inside our Macbook frame.
The first instance on the left is exactly how we want it to be, so select the second one. Inside the design panel, you'll see that the component properties we set are there with their default values.
Now you can edit the component easily.
Just toggle the icon on, and change the values of "Text" and "Text2" to match our design.
11 Add A Hover Variant
To add a hover state to our button, we need to create a new variant.
Component properties don't work in prototypes, and we want the hover property to work in the prototype so we must use a variant in this case.
Select the card component and press on the Add variant icon at the top of the page.
Both variants have one property, named "property 1", by default.
In the first variant its value is set to "Default" and for the new variant it's set to "Variant 2".
So We'll change the name of "property 1" to hover and we'll set the default variant to False and for variant 2 we'll set it to True.
We want an element to cover the "images frame" that will act as our hover effect.
So duplicate one of the images by selecting it and pressing cmd c then cmd v.
The new image will be added next to the images, just like the icon did.
To fix this and make it above them, give it an absolute position inside the "images frame".
Then manually resize it to cover the whole "images frame".
Change its fill from image to a solid color.
we'll just eye this one, the hover effect should just be a little bit darker.
Give it a dark gray color and lower the opacity.
Finally for this to work inside a prototype switch to the prototype panel (Shift E).
Grab the node next to the "hover =false" variant and connect it to "hover=true".
The "interaction details" will pop up, change it from "on click" to "while hovering".
You can check the hover effect inside the canvas as well, by selecting an instance and toggling the hover variant "on".
The effect is above the icon, in our design, the icon shouldn't be affected by hover.
To fix this get back to the "hover=True" variant and in the "layer panel" grab the icon's frame and put it above the hover effect's frame.
12 Present It
Finally, select the "MacBook frame" and present it by pressing the play button at the top left side of the page, above the design panel.
Hover above our cards and you should see the hover effect.
It's a bit darker than the subtle effect we want.
Get back and reduce the opacity and check again.
I'm hovering above the one on the left and there's just the slightest difference, which matches our design.
And finally, we're done! Here's a full view of our final design file.
Thanks for reading!