WEB DESIGN IN FIGMA ep.04: Horizontal Text + Image Cards (Free Web Design Course)

Summary

In this episode of the Figma web design series, the creator guides viewers through the process of designing horizontal cards for a website. Emphasizing the importance of layout and spacing, they demonstrate how to structure elements using a 12-column grid and adjust proportions for visual balance. The tutorial covers creating components for reuse, including setting properties for text and button visibility. By the end, viewers gain practical insights into web design principles, such as the law of proximity, and learn how to effectively use Figma to build functional and visually appealing web sections.

Takeaways

• 😀 This episode focuses on designing horizontal cards in Figma, featuring text and images side by side.
• 🎨 The design uses a 12-column layout, with each column measuring 74 pixels wide and a total width of 1152 pixels.
• 📜 The title for the horizontal card is set to H2 or H3, rather than H1, to maintain a structured hierarchy.
• 📏 The spacing between elements is set to 24 pixels using Auto Layout for consistent alignment.
• 🖼️ Images are resized without distorting their aspect ratios by using object masking techniques.
• 🔄 The component allows for easy swapping of the image and text properties, enhancing reusability across the design.
• ⚖️ The law of proximity is emphasized, ensuring related elements are visually grouped closer together.
• 🔄 Variants of the horizontal card are created for different layouts, enabling easy toggling between image-first and text-first designs.
• 📚 A focus on maintaining consistency across components helps streamline the design process.
• 📅 Future episodes will explore social proof sections and call-to-action designs to further enhance website usability.

Q & A

What is the main topic of the video?

The video discusses the importance of mental health and strategies for maintaining it.

What strategies are suggested for improving mental health?

The video suggests mindfulness practices, regular exercise, and seeking professional help as effective strategies.

How does the video define mental health?

Mental health is defined as a state of well-being where individuals can cope with the stresses of life, work productively, and contribute to their community.

What role does physical health play in mental well-being?

Physical health plays a crucial role in mental well-being, as regular physical activity can reduce symptoms of anxiety and depression.

Are there any myths about mental health mentioned in the video?

Yes, the video debunks common myths such as the idea that mental health issues are a sign of weakness.

What resources are recommended for individuals struggling with mental health?

The video recommends online resources, hotlines, and community support groups for individuals seeking help.

How can mindfulness practices benefit mental health?

Mindfulness practices can help reduce stress, increase focus, and improve emotional regulation.

What is the significance of seeking professional help?

Seeking professional help is significant as it provides individuals with tailored strategies and support for their mental health challenges.

Does the video address the stigma surrounding mental health?

Yes, the video addresses stigma by encouraging open conversations about mental health to foster understanding and support.

What are the key takeaways from the video?

The key takeaways include the importance of mental health awareness, the effectiveness of self-care strategies, and the need to destigmatize mental health issues.

Outlines

00:00

🎨 Designing Horizontal Cards in Figma

In this episode of the Figma web design series, the focus is on creating horizontal cards, a layout where text and images are displayed side by side, often switching orders. The presenter explains the importance of layout, emphasizing a 12-column grid structure, and provides step-by-step instructions for creating a horizontal card component. Key elements include selecting appropriate headline styles, configuring Auto Layout for spacing and alignment, and ensuring responsive design. The section outlines how to adjust the size and position of the cards for better visual appeal while adhering to design principles like proximity. The session wraps up with creating a reusable component, discussing the use of component properties to manage direction, headlines, descriptions, and buttons, ensuring consistency across the design. Finally, the prototype is launched to showcase the completed horizontal cards section, setting the stage for future episodes on web design elements.

Keywords

💡Figma

Figma is a cloud-based design tool widely used for UI/UX design, enabling collaboration among teams. In this video, Figma serves as the primary platform for designing a website, where the creator demonstrates how to build horizontal cards. This highlights Figma's versatility in managing design elements efficiently and facilitates an interactive workflow.

💡Horizontal Cards

Horizontal cards are UI components where content, such as text and images, are displayed side by side. The creator focuses on designing horizontal cards in this episode, showcasing their importance in modern web design for presenting information clearly and attractively. The arrangement of elements is discussed in detail, emphasizing how it enhances user experience.

💡Layout Grid

A layout grid is a framework used in design to create structured, consistent designs. In the video, the designer refers to a 12-column layout grid in Figma, explaining how it dictates the width and alignment of the horizontal cards. This concept is essential for achieving a balanced design that is visually appealing and functionally effective.

💡Auto Layout

Auto Layout is a feature in Figma that allows designers to create responsive designs that adapt to content changes. The speaker utilizes Auto Layout to organize the text and button elements within the horizontal cards, ensuring that they resize and align correctly as design elements are adjusted. This concept underscores the efficiency of design iterations in Figma.

💡Component

A component in Figma is a reusable design element that can be instantiated multiple times throughout a project. The creator demonstrates how to turn the horizontal cards into a component, enabling consistent use across the website. This concept is vital for maintaining uniformity in design and speeding up the design process.

💡Proximity

Proximity is a design principle that suggests related elements should be placed closer together to indicate their connection. In the video, the creator discusses adjusting spacing between elements to adhere to the law of proximity, enhancing the layout's visual coherence. This principle is essential for creating intuitive and user-friendly designs.

💡Headline

A headline is a prominent text element that typically conveys the main idea or purpose of a section. The designer emphasizes the use of H2 or H3 for the horizontal card headline, indicating its importance in establishing hierarchy within the design. Effective headlines help guide users through content and improve readability.

💡Button

A button is a UI element that prompts user interaction, commonly leading to actions like navigation or submitting information. In this video, the creator adds a button to the horizontal cards, showcasing its function as a call to action. Designing effective buttons is crucial for enhancing user engagement and improving website functionality.

💡Image Fill

Image fill refers to the method of using images as backgrounds or fills for design elements. The designer discusses how to manipulate image fills to maintain aspect ratios while resizing images within the horizontal cards. This technique is important for preserving the visual integrity of images in web design.

💡Prototype

Prototyping is the process of creating a preliminary version of a product to test and evaluate design concepts. The creator mentions launching the prototype at the end of the video, which allows for user interaction and feedback on the horizontal card layout. Prototyping is a key step in the design process, facilitating adjustments based on user experience.

Highlights

Introduction to horizontal cards, focusing on a layout where text and images are side by side, switching orders.

The series is part of a playlist for designing websites in Figma, encouraging viewers to check previous episodes.

Utilization of a 12-column layout with each column measuring 74 pixels wide for structured design.

Introduction of text elements like horizontal card headline and description, using H2 or H3 for hierarchy.

Application of Auto Layout for the card components, adjusting spacing to maintain a clean layout.

Incorporation of image elements while maintaining aspect ratio, enhancing visual appeal.

Strategic decision to reduce spacing between horizontal cards for a balanced look, applying Gestalt principles.

Creation of a reusable component for horizontal cards, allowing easy updates across the website.

Introduction of component properties like direction and text fields for efficient content management.

Demonstration of how to update text and images within component instances easily.

Exploration of maintaining design consistency through centralized adjustments in Figma.

Discussion of the law of proximity to create visually cohesive sections in the design.

Encouragement for viewers to leave comments about interest in Gestalt principles for future content.

Final review of the prototype showcasing the horizontal cards section in a website context.

Closing remarks on the importance of understanding web design concepts through Figma tutorials.

Transcripts

hello everyone and welcome to the fourth

episode of Designing a website in figma

in this episode we are going to focus on

horizontal cards meaning this section of

a website where the text and image kind

of go side by side and they are

switching orders and as I mentioned this

video is a part of a series of Designing

a website in figma so if you'd like to

see how we created all these things all

these elements and sections components

Etc definitely go and check out my

channel where I have a playlist where

all of these videos are going to be

compiled and now let's get started now

this section is going to be very similar

to what we have here which means the

first title section the title area right

so and the image is going to be smaller

while also we are not going to use H1

but rather I think H2 or H3 maybe but an

overall structure this is going to be

very similar so let me just um let me

just copy this and and I'm going to take

this as a guide as we created this new

section this new component so on this

website we are using the 12 column

layout so we have a layout grid with 12

columns as you can see here each one of

these is 74 pixels or points wide and

the space between them is 74. and this

is of course going to be reflected in

our new component in our new section

meaning it's going to have

1152 pixels in width or less so that it

fits within this layout right so let me

just use my text tool by pressing t on

my keyboard and then clicking once and

I'm going to type in horizontal card

headline and as I said we are not going

to be using H1 which this appears to be

H1 so under text on this right side I'm

going to select H2 second most important

headline and if you're wondering how we

set this up again go and check out

previous videos in this series anyway

here we have here we have the horizontal

card headline and then of course we're

gonna also get the horizontal card

description so let me just rewrite this

horizontal card description the this is

where we right I just I just wrote down

a couple of sentences so that we can

kind of use this as a placeholder and

then of course there's gonna be the

button so under assets I'm gonna go for

search for button and then I'm gonna

paste that right here by dragging

awesome so now I can select these three

components uh sorry these three elements

and press shift a to add Auto layout

then press enter and by shift clicking

deselect the button right so that we

select only the headline and the

description and under horizontal

resizing I'm gonna go for fill container

with both of these and this means that

the width of these text now depends on

total width of this Frame which is which

is what we need right and then under

spacing in Auto layout I'm going to type

in 24 so that we have 24 pixels in terms

of spacing and then I'm going to rename

this Frame by selecting it pressing

command R and typing in horizontal sorry

horizontal card content so this is now

horizontal card content there's also be

horizontal card image and I'm going to

duplicate this image and paste that

right here which is going to shrink our

image and I'm gonna you know since we

have an image fill and it is set to fill

you can see that I can resize the image

without squishing or pulling the image

aspect ratio it kind of stays it kind of

uses this object as a mask I think we

could actually use only 10 10 of these

columns right because since this is the

title area this is the most important

thing the most important section I think

the horizontal card would be better off

if we did something like this right you

know using just the 10 of the 12 columns

um we want we want to keep this at the

most prominent visual kind of importance

so let me just select these two elements

press shift a and then set the spacing

to 24 right 24 maybe we're going to go

for 24 plus 74 and also I'm going to

rename this to horizontal card container

horizontal card container and then these

elements both of these elements are

going to be set to fill container I will

probably change these settings later

because I'm not sure if we want to keep

you know if we want to we want this to

happen for now I think we could set both

of these to fill container right so both

both have fill container and I said that

this is going to take the width of 10

columns right so let me just see what

this actually looks like in terms of

width so we have 10 columns and if each

of these is 74 pixels that means it's

going to have 70

740 pixels in width but also we have to

account for the spacing between these

and 10 columns have nine spaces between

them which means 740 plus 9 times 24 and

if we add this to the field over here

years which means 740 plus 740 plus 9

times 24 we get

956 so that's the total width this

horizontal card container is going to

have

956.956 and this also means that I'm

gonna add another Auto layout on top of

this horizontal current container which

means selecting this and pressing shift

a and then I'm going to to make it 1440

pixels wide 1440 and also

96 over here zero here and then add a

fill so this means that now when we

actually resize this this section stays

in the Middle with a firm predetermined

width which is our goal and now let's

just actually put that into our website

frame we are going to turn this into a

component later but for now let's just

test how this looks in the context of a

website here you can see that it fits

nicely precisely within 10 columns but

at the same time I think we could make

the text section a bit more narrow to be

specific I think we could make it span

four columns in total so now this means

that as I said this is going to be fixed

this is going to be fill container but I

think we could also reduce the spacing

275 4 which is the width of one column

so yeah I think this layout these

proportions will look best in my opinion

right so let's just keep this in mind

and of course there's going to be also

the opposite direction of this card

which means the image will go first and

then the text will go second so I'm

going to duplicate this and then what

I'm gonna do is Select horizontal card

content and just use command and bracket

to move that to this second position

right so that it's on the right side

right now now here's the thing or rather

two things if we keep the vertical

padding 96 we will get this huge spacing

between these features if between this

sorry these horizontal cards if we stack

them on top of each other so what I

think could be better approach right

here would be getting rid of the top

part of the padding which means setting

the top one to zero while also keeping

the bottom one at 96 so this creates a

consistent spacing similar to what we

have here what we have here right in the

feature section we also turned off the

top padding for this section I think we

could do the same here makes the most

sense right and the second thing is

maybe this is just my OCD acting up but

I think we could it could look more

balanced if we had these sides of the

image kind of aligning vertically what I

have in mind is if we increase the

spacing right so if we increase the

spacing to about what's the right value

110 seems to be the right value so if we

set both of these to 110 you can see how

these images kind of their edges meet

horizontally when I use a guide it

becomes more apparent right these edges

meet right here and I think this looks

better than the alternative so that's

the reason why I would keep this this

setup or since we now have this huge

spacing right here which goes against

the law of proximity which states that

items that that logically belong

together should be closer together and

this kind of so this distance is smaller

than this distance now we are getting

really technical but since logically

these belong closer together than these

two right so these are completely two

separate horizontal cards but these

elements are two parts of the same

horizontal card that's where the law of

proximity states that this should be

closer to the image than these two image

between each one so I think we should be

looking at increasing this value this

width of this text section so that it it

kind of decreases this spacing right

here and since we set this value to fill

and this one to fill as well I think we

could test the spacing with both of

these two space between and then we can

move the boundary of this text section

without actually

changing the size of the image so again

I'm going to use I'm going to select

this horizontal card container and then

go to Advanced layout and space between

and then I can do this right so I'm

going to position this I think somewhere

around here similar to this one that

will also end here and the spacing is

calculated automatically for us which

means that these horizontal cards now

adhere to the law of proximity which is

very important I'm also planning to do a

video on Gestalt principles and the law

of proximate is one of them so if you're

interested in hearing more about the law

of proximity and all these Crystal

principles in web design definitely

leave a comment below or leave a like

right so we have figured out the layout

we have figured out the position of

elements their size and the overall

position and how they kind of work

together so now what I think would be

great is if we actually turn this into a

component and make sure that we can

reuse these elements across our website

without you know while also keeping

everything consistent so let me just

remove this title area I'm going to

rename this to horizontal horizontal

card left and then horizontal card right

and I'm going to select both of these

and go to this drop down menu on the top

under components and I'm gonna click on

create component set right so we have

now a component that's called component

one which I'm going to rename to

horizontal card horizontal sorry

horizontal card and we want to do a

couple of things we're going to make it

easy for us to change that the direction

which means that it's going to be a

property that we can easily switch we

want to make sure that we can easily

change the text of the headline

description and the button and that we

can also easily update the image with

the image it's going to be a bit more

difficult because component properties

doesn't offer us with the option to swap

an image easily only through instant

swap I believe and we are not going to

use that we're just going to rely on the

fact that we can kind of select the

image directly in in a given instance

right and then change the image fill

right here so we can hide it for example

or paste different fills so that's kind

of how we are going to change the image

but in other cases with other things in

this component we are going to be be

using component properties so first of

all let me create a property or actually

just rename this property to Direction

and then I'm going to set the direction

of this one to yes or actually no no

this one's going to be no and this one's

going to be yes and what's the reason

the reason is that we that when we

actually use an instance of this

component we can easily switch Direction

by clicking this toggle button right

it's more intuitive and I think it makes

sense so that's one thing we have set up

the direction the next thing is

selecting the headline so I'm pressing

command and shift and then clicking

these two headlines and under content

I'm going to create a text property and

I'm going to name this headline and I'm

going to type in as a default value

headline text create property right this

will update these and then something

similar with this description again

select both of these by pressing command

and shift create new property and this

one is going to be called description

and the default value will just keep the

default value right so that's that's

great then with the button I'm going to

select the button in the first variant

and then command and click over here to

select the button in the second variant

and then I'm going to go to layer and

create a Boolean property which is going

to hide or show our button and then I'm

going to name this component property

show button and it's going to be true or

false right in this case it's true

because it's visible and then what I'm

going to do is also select this whole

component go to properties and click

this plus over here and then expose

properties from nested instances

so from nested instances we get kind of

this and now when we actually use an

instance of this component we get also

not only options to select this overall

feature card but we also get the options

on the button so so this should be now

done let me just demonstrate for you how

this actually works right so we have

created a component that has two

variants and to use an instance of this

I'm going to go to assets and then

search for horizontal card and I'm going

to click and drag that over here so here

is our instance of the horizontal card

horizontal feature card maybe we can go

in here and update the headline here

right update headline here and if we

confirm this change it's going to update

our headline and similar here so I'm

just going to type in two extra words on

the start of the sentence similar here

and you can see it updated our

description addition this Additionally

the button we can change the text of the

button so we can say learn more learn

more and you can see it updates the

button right here but we also can change

the type of the button to no background

because we have defined a button state

that button state right here I want to

keep that at default so right now let me

also show you how you could update the

image right so very quickly very quickly

here's an image from pixels.com I can

select the fill copy command C and then

select this image directly and command V

this is going to add a new fill layer on

top of our previous one which is gonna

kind of update the image right so I'm

going to now what I'm going to do is

paste that right into our website and

then I am going to duplicate this by by

pressing alt and then dragging and I

have a second horizontal card I'm going

to change the direction easily here

select the image directly and remove the

new image fill so we now have two

sections with two different images we

could also I could also hide the button

which I'm not going to do but I'm going

to change the headline so second

headline right here and then we could do

like description of the second

horizontal card horizontal card and I

can now move this close together press

shift a with both of these selected and

you can see that when I duplicate this I

can just keep duplicating and keep

adding more features more horizontal

cards if I want to but for now I'm just

going to keep this at just two right so

what I'm also going to do is select the

features headlines so command C and then

select this and command B put that on

the very top build container Center tag

select the parent layer by clicking by

pressing shift enter renaming this

parent layer to horizontal cards section

and then I'm going to add some padding

on the top actually so 96 I'm going to

add some spacing around I think or

actually I'm just going to add the top

padding on this first feature card which

is going to be on this first horizontal

card which is going to be let's say 48

maybe again select the parent layer and

add a fill so now we get this right here

right and also I'm going to remove the

top padding similar situation to here so

zero enter and then I'm gonna change

this headline to horizontal cards

section

and now uh it's very easy to maintain

consistency because if I decide to for

example change the color of the text

within this section everywhere on the

website I can just reduce that I can

just change that here and then it's

going to update everywhere right so

components instances the usual you

probably already know this so yeah let

me just launch the Prototype and check

what we have now this final result looks

like we get a title features that we

have created in previous videos and then

we get the horizontal cards section

which is also quite a common element on

all the websites so yeah this is how you

create horizontal cards in the next

episodes we are going to I think work on

some kind of social proof section which

means quotes testimonials whatever and

then we're gonna finish up with call to

action and the footer so thanks for

tuning in to this episode I hope you

have learned something new I hope this

series is helping you to understand

stand web design in figma better if

there's anything unclear let me know in

the comments below if this video helped

you please also leave a like and also as

I said check out my channel where I have

all episodes in a playlist also check

the description where I well I have this

playlist featured as well and yeah

thanks for tuning in and I will see you

in the next one