Introduction- Figma tutorials for those who hate Figma
Because sometimes you just need a walkthrough….
Figma health warning
In this tutorial, we create a WordPress post grid card component in Figma. This is surprisingly complicated to do, especially if you want it to be responsive and maintainable.
Components are usually made up of other component instances. For example, this card component uses two other nested component instances for the image and content. Most importantly the main reason for using sub-component instances is maintainability.
Assume that you want to change the colour of the category button for a set of eight cards. If you used an instance of the content component all you have to do is change the master component colour and all the others will follow.
Finally, It is important to keep on top of naming components and instances, as it can get very confusing very quickly! That is probably one of the main bugbears of Figma.
Section A/ Create the content block component
The content component is made up of a header bar, content section and author bar.
1/ Create the header bar. The header bar is made up of a category button and a date inside an auto layout frame.
1.1/ create the button
a/Select the text tool and type Article.
b/Type shift + a to create an auto-layout.
c/Rename the auto layout frame to Button.
d/Set the size to 59 x 24mm.
e/Set the auto layout to center with a 10px margin all round.
f/Select the text and ensure that the Resizing is set to hug contents.
g/Reselect the button frame and set the fill colour to green 479633.
h/Set the border radius to 50.
After all this you should have a button with the layers shown below. Ignore the Cards group 1 group.
1.2/ Create the date text.
a/ Select the text tool and type 21 May 2021.
b/ Type shift + a to wrap the text with an auto layout frame.
c/ Rename the frame “Date”
d/ Select the text and ensure that Resizing is set to hug contents
e/ Select the date frame and set the auto layout to the centre and then zero all the margins.
1.3/ Create the header bar wrapper.
a/ Drag the text frame next to the button and drag round them to select both.
b/ Type shift + a to create an auto layout.
c/ Select the Date frame and add a top margin of 5px in the auto layout panel, this will align the text with the button text.
d/ Convert the Header bar frame into a component. Right click the Convert to component text.
You should now have something similar to below.
2/ Create the content section
The content section is just text in an auto layout.
a/ Select the text tool and type some content
b/Type shift + a to create an auto layout.
c/ Select the text and set the resizing to fill container. this will ensure that the text will wrap when the outer frame is resized.
d/ Select the outer auto-layout frame and rename it Content. Drag the width of this frame and the text should auto-wrap.
e/ Convert the auto-layout to a component.
You should now have something similar to below.
3/ Create the author bar
The author bar is made up of an icon and text in an auto layout frame.
a/ Install the Figma plugin Iconify. Open the plugin and search for User. drag a user icon onto the workspace. I used an avatar image originally, but iconify is fine. lock the vector inside the icon frame. It is really easy to drag this out of the frame otherwise.
b/ Select the text tool and type Fred Smith MA.
c/ Drag around the text and icon and type shift + a to create an auto layout.
d/ Rename the frame Author and convert it into a component.
The project should look as below
Pay attention here as it is really easy to use the master sub-components instead of instances of them! (Alt drag on the master component to create an instance)
e/ Three instances of the created components now need to be grouped using an auto-layout frame.
f/ Rename the master sub components as Card/header bar, Card/author and Card/content. This will then group the sub components under Card in the assets panel.
g/ Drag around the instances and create an auto-layout.
h/ Convert the layout to a component and rename it Card
Note below, in the layers panel, the master sub-components and the grouped instances, indicated by an empty diamond.
Section B/ Create the image component
a/ Select the frame tool and drag out a rectangle, the size does not matter for now.
b/ Click on the fill section and select image from the dropdown. Click on Choose image and select an image. Close the dialogue.
c/ Change the image in to a component and rename it Image.
d/ Drag an instance of the image component into the card frame. It will not let you drag the master image component into the card. A bar will appear indicating a drop zone.
e/ Set a fill colour on the card so that you can see the edges.
Section C/ final settings.
You will need to adjust various settings to get the card to be responsive.
a/ Double click on the image until it is selected and change the resizing property to fill container. Do the same for the content text and its frame.
If you made it this far you will probably want to stick with HTML and CSS!