YT YouTube2Text

YouTube2Text → Transcripts → Filterable Image Gallery With Variables In Figma | 2024

Filterable Image Gallery With Variables In Figma | 2024 — Transcript

by Emmanuel’s Design Lab · 4,101 words · 656 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hi everyone, and welcome to today's
0:01Figma tutorial. So, have you ever
0:03wondered how you can create a filterable
0:05image gallery using Figma? As you can
0:07see, every time I search and switch, I
0:09can actually filter all the images into
0:12the category as I actually want them.
0:14So, how do we do this in Figma? Find out
0:17in today's video.
0:26All right, so I have this new project
0:28here, and I'm going to call it
0:29filterable image gallery. All right, so
0:33there we go. So, next we're going to
0:34insert a frame. So, the frame shall be
0:37Let's go with something of the desktop
0:39size. Let's go with MacBook Pro 14. That
0:42would do. All right, so next let's give
0:44this some margins. Let's add a layout
0:47grid. Let's change this to
0:49columns. Then we're going to give this a
0:51margin of 70. Return a bit that looks
0:54fine. All right, so I'm going to be
0:55using this. So, let's type in some text.
0:58All right, so zoom in, type in the text
1:00photo
1:01gallery. Then we're actually going to
1:03make this bold. So, all the text is in
1:06form of Inter, and then we're going to
1:07make this bold. Make sure everything is
1:10selected, then let's give this a font
1:11size of 30. And let's just make sure it
1:14actually touches this margin.
1:18Something So, let's go to the plugins
1:19Iconify, then search for Type in search.
1:23Now we're going to select a search icon.
1:25Let's select this one.
1:28Paste it in, and let's also search for
1:31menu.
1:33So, drag this and drop it in. So, there
1:36we go. So, we have our menu and the
1:38search selected. So, drag these out of
1:40their frames.
1:42Delete those frames.
1:44All right, then drag these onto your
1:46frame, main frame here.
1:48And there we go. So, just going to scale
1:50these up a little bit.
1:53All right, that looks better. All right,
1:55so next I'm going to insert in some
1:56boxes. So, I'm going to make use of the
1:58rectangle tool, give it dimensions. I'm
2:01going to go with 229 by 229.
2:05I believe that will fit perfectly.
2:08And I'm actually going to duplicate this
2:09multiple times. So, hold alt, then place
2:12the next one just right next to it.
2:14Hold alt, hold alt again, and alt
2:19again.
2:21So, it's actually make sure they're
2:22actually
2:24next to each other.
2:29Then we're going to duplicate this one
2:30more time. So, let's give these
2:31different colors.
2:33All right. So, now that we have that, we
2:34can actually
2:37duplicate this. So, hold alt, duplicate
2:40that, and then hold alt one more time.
2:42So, you now have 18 boxes. So, now
2:45select all of them, and we're going to
2:46actually create an auto layout. Right
2:48click, and then select the option add
2:50auto layout. And then, we're actually
2:52going to set it to
2:54wrap auto layout. And then, we're going
2:56to make sure that the gap between them
2:57is actually set to zero. So, everything
2:59is actually basically together.
3:02All right. So, there we go. So, that's
3:03how I actually want it. Then lastly, we
3:06can actually now disable this.
3:09All right. So, there we go. So, we
3:10actually have our boxes here. So, next
3:12we're going to go to our
3:13Unsplash plugin. So, select Unsplash
3:16plugin, and then we're going to insert
3:17images to all the boxes.
3:20And then inside the frame, randomly
3:22select any box that you want, and
3:23actually fill it up with a image by
3:25actually just clicking until every box
3:28is filled.
3:30All right. So, once you've filled it
3:31with random images, now selected images
3:33that actually have an ocean, women, men,
3:37and then I've chosen those that have
3:38bicycles, and birds. So, that's the
3:41category that I've actually chosen. So,
3:42when you actually fill up every box, now
3:44you can actually rename them. So, now
3:46just make sure that all those boxes that
3:48actually have the oceans depicted
3:51actually have the same name. So, where
3:52there's ocean here, I'm actually going
3:53to call this ocean. Then I'll go to the
3:56next one. Then this shall also be called
3:58ocean.
4:00Then select this. Just make sure that
4:02all the categories that you actually
4:03want to filter together have the same
4:06name.
4:09Now, do that for each individual image.
4:11So, this shall actually represent So,
4:13there will be one for women, birds, that
4:15for men, and bicycle.
4:18So, let's do that quickly.
4:28All right. So, now we've done renaming
4:30each one of them. So, there is a group
4:32that is called ocean. There's that for
4:33woman, bird, man, and bicycle. So, this
4:36will actually enable us make the
4:38filtering process easy. So, lastly,
4:40we're going to rename this frame that
4:41they're actually all grouped in. We're
4:42going to call this
4:44images.
4:45All right. So, next I'm going to create
4:47the menus. So, now let's zoom in. Then
4:49we're going to make use of this
4:50rectangle tool. So, we're going to draw
4:51something like that. And then we're
4:53actually going to give it dimensions
4:55108
4:57by 43.
4:59So, there we go. Then we're going to
5:00give it a border radius of 20.
5:03Then we're actually going to give it a
5:05color for the for the form when it is
5:07still deselected. So, we're going to
5:09give this a color
5:10with coordinates E E8 E8 E 8. So, there
5:16we go. Then we're going to type some
5:17text in. Then this text is going to be
5:20all photos.
5:22Then we're actually going to scale this
5:23text down. Going to give it a
5:25font size of 12.8.
5:28Then let's actually leave it uh bolded
5:30and inter. So, that's actually okay. So,
5:31let's place this at the top. So, we're
5:33actually going to center this.
5:36Make sure it's centered. So, there we
5:38go. All right. So, next I'm going to
5:40duplicate this box then hold Alt.
5:43Then now we have a second copy. So, in
5:44the second copy, turn this text to
5:46white. Then we're going to turn this
5:48rectangle
5:50to black. So now we actually have a
5:52deselected state and then a selected
5:55state. All right. So now what we want is
5:56that when a user clicks on the button,
5:58this is the state that will actually
5:59appear. So this will be the selected
6:00state and this will be the deselected
6:03state. So now we're going to group this
6:05here. So group this and then we're going
6:07to call this group call this group
6:09selected.
6:11Then we're actually going to group this
6:13also.
6:14Group this.
6:15Then we're going to call this group
6:18deselected.
6:21All right. So now we're going to do the
6:22same thing for all the other different
6:24categories. So actually going to
6:25duplicate these two.
6:27Just duplicate this here. Let's do it in
6:30five different
6:31groups.
6:34All right. So there we go. So these are
6:35the five different groups. So now next
6:38we're going to go back to this state
6:39here and we're actually going to group
6:40this. So place this selected state on
6:43top of the deselected. Make sure they're
6:45actually aligned together. All right. So
6:47next we're actually going to group
6:48these. So group the selection and we're
6:50going to call it all
6:52photos.
6:54All right. So now that we've done that
6:55we're actually going to go to the others
6:57then we're also going to rename them. So
6:58we're going to call this group
7:00oceans. And this shall also have to be
7:03oceans.
7:05All right. So next make sure that text
7:06is actually aligned to the center. Make
7:08sure it's the same thing here.
7:10Then we're actually going to place this
7:12on top of that.
7:14So we have the selected on top of this
7:16unselected. Then we're actually going to
7:18group these.
7:21And this group is going to be called
7:23oceans
7:25selected.
7:28All right. So next move to the next
7:30group. Then we're going to rename this.
7:32So we're going to have that for women.
7:34Then we're going to have that for men.
7:37Then we're going to have this for
7:38bicycle. Let's call it bicycles.
7:42And lastly, I want to have this for
7:44beds.
7:46All right. So, next make sure that here,
7:48here and here, make sure that the text
7:49is aligned to center.
7:51Something here.
7:53Make sure this is also aligned to
7:54center. Align that to center. Something
7:57here. All right. Then,
7:59make sure that we have this selected on
8:01top of that unselected.
8:04Align them together. Then, we're going
8:05to call this group
8:07women selected.
8:11Then, we're also going to do the same
8:12thing here. So, make sure that this is
8:14on top of that.
8:15Make sure they're actually aligned
8:16together.
8:17And call this group
8:20men selected. Then, we're going to also
8:22do the same thing here. Group these.
8:26Place this on top of that. Align them.
8:29Give this a group name. Call it
8:32bicycles selected.
8:35And lastly,
8:38place this on top of that.
8:42Group this.
8:46Beds selected.
8:49All right. Now that we're done with
8:50that, we can actually bring these all
8:52into the frame.
8:54So, actually let's rename this.
8:55Instead of all photos, it's all photos
8:57selected.
9:00All right. So, now we actually want to
9:01align them in a straight line. So,
9:02select all these
9:04buttons. So, the menu buttons. Then,
9:06we're actually going to give them an
9:07auto layout.
9:09So, they're actually all in a frame.
9:10Then, make sure they're actually
9:12laid out horizontally. Then, we're going
9:14to space them by Give them a space of
9:1730.
9:18There we go.
9:20Then, drag them all down.
9:22All right. So, now we have all of them
9:24laid out horizontally. Then, actually
9:25make sure that they actually scale them.
9:28Make sure they're actually at the center
9:29of the frame. There we go. All right.
9:31So, next step shall be to rename this
9:33menu that actually contains this menu.
9:34We're We're to rename that frame to be
9:37menu. Let's just create the menu.
9:39All right. So, now there we go. So, we
9:40actually now have a frame that controls
9:42the images and we actually have a frame
9:44that has the
9:45menu. So, actually right now we have a
9:47frame that actually contains the items,
9:49the images, and then we also have that
9:51frame that contains the items in the
9:53menu. So, now next we're going to create
9:55some variables. So, we're going to
9:56create variables that actually have the
9:58Boolean type. So, the first variable is
10:01one that's going to help us that control
10:03all the different menus. So, let's have
10:05one to control the all selected
10:08menu.
10:10Let's call it all photos.
10:16Then we're going to duplicate this.
10:20I'm going to have one for oceans
10:22selected.
10:25Make another one.
10:27Have one for women selected.
10:34And so on.
10:39All right. So, now we actually have now
10:41a variable to actually represent each of
10:43the different individual items on the
10:45menu. So, now we also need to have
10:47variables that actually control the
10:48images that actually here on display.
10:51So, let's create those variables.
10:53So, we're going to have a variable and
10:54they're also going to be in this time of
10:56Boolean. So, let's actually just
10:57duplicate this. So, we're going to have
10:58one to represent the oceans images.
11:03And then let's make one for each kind of
11:05image.
11:09All right. So, now we actually now have
11:10an individual variable for each one. So,
11:12next we're going to assign the different
11:13variables.
11:15All right. So, now we're actually going
11:16to assign the variables. So, let's start
11:18with the menu. So, inside the menu we
11:19actually can see the different items
11:21that we actually have. So, what we're
11:22going to do is we want to go inside the
11:23menu and then we actually going to
11:25assign the variable to the selected part
11:27of it. So, let's start with oceans. So,
11:28make sure you have the selected group.
11:31And then we're actually going to go to
11:32we have the pass through. Then, we're
11:34going to right-click on your mouse, and
11:36then we're going to assign the menu icon
11:39for oceans. So, remember we're dealing
11:40with the oceans menu first. So, we're
11:42going to click oceans selected.
11:46So, assign that.
11:48So, that's oceans selected. So, go to
11:49the group where you have women. So, go
11:51to the selected group. Then, we're going
11:53to also right-click and assign women
11:55selected.
11:57Go to the men's group, and also going to
11:59assign
12:02men selected.
12:04And so on.
12:07And then, lastly, we're going to go to
12:09where we have the all photos selected.
12:11So, select the selected group in the all
12:12photos, and then we're also going to
12:14assign the all photos selected. So, as
12:16you can see,
12:18they've actually all gone off, and that
12:19is because our variables, by default,
12:21are actually set to false. So, as you
12:24can see, actually the items are not
12:26arranged in the order that I actually
12:27want. So, I'm actually going to arrange
12:28them. So, let's make sure that the all
12:29photos group is actually first on the
12:31list.
12:33All right. So, now that we have it
12:34first, we actually want to make sure
12:35that all photos is actually selected by
12:37default. So, actually go to where we
12:38actually have all the selected, and then
12:41we're actually going to change this
12:41variable and make sure that it is set to
12:43true. So, let's go back to the original.
12:46So, inside local variables, make sure
12:47this one is actually set to true. And
12:50that will actually make sure that it is
12:51actually by default selected.
12:54And then, every time we want to actually
12:56select another item, we should actually
12:57set it to off. So, that's actually what
12:59we're going to be doing.
13:00All right. So, next, we're actually now
13:01going to also assign the variables that
13:03actually go with the images. So,
13:05remember that we actually have variables
13:07that actually now control the images.
13:10All right. So, what you're going to do
13:11is you're going to select all the images
13:12that actually have the oceans. So,
13:14select each one, hold control on your
13:17keyboard to actually make sure you
13:18select each one. Then, we're actually
13:20going to go to the pass through, and
13:21then we're going to assign to them the
13:24oceans variable. Then, we're also going
13:26to do the same thing for
13:27the base scores.
13:29Make sure they're all selected. Then
13:31you're also going to assign,
13:32right-click, and then select base
13:34scores. Let's go to bird.
13:37Make sure they're all selected. Assign
13:40to them the variable for birds. Then
13:42we're going to go to that of women.
13:45Then you're also going to assign the
13:46variable for women. Then lastly, we're
13:48going to assign the variable of men to
13:50those
13:51men.
13:53Now as you can see, all the images
13:55actually disappear by default or become
13:57with opacity zero. And why is that? It's
13:59because they initially have their
14:01variables set to false. So we're going
14:03to actually make sure that variables are
14:05by default set to true. So make sure
14:07this is set to true.
14:11And there we go. So when they're set to
14:13true, they'll actually appear by
14:15default.
14:16All right. So the next step is for us to
14:18do some prototyping. So let's go to the
14:19prototype mode. And then now we're
14:22actually going to Let's close this.
14:24Let's make sure we go to the menu. Now
14:26inside the menu, let's first deal with
14:28what happens when all photos is
14:30selected. So let's create an interaction
14:32there. Then we're going to make sure the
14:33interaction is on click, and we're going
14:35to add a condition. So inside the
14:37conditional, now we actually want to set
14:39some settings. So now the first
14:40important thing is we want to make sure
14:42that the variable all photos selected is
14:45actually
14:46set on. So I actually have to check for
14:48that condition. So now this is the
14:50variable here. So we want to make sure
14:52that it is actually set on. If this is
14:55equal to false, we actually want to make
14:57sure that it is actually turned on. So
14:59that's actually going to be the first
15:00important thing. So if it is actually
15:02set to false, we're going to make sure
15:03that it will actually be turned on and
15:05made true. So that's going to be the
15:07most important first variable. And then
15:10next after that, once that condition is
15:12satisfied, we want to make sure that
15:14in case any of these was actually turned
15:16on that they actually all set to false.
15:19So that's also So to be very, very
15:21important. So we want to make sure that
15:22all those other variables are set to
15:24false in case they are actually true. So
15:27make sure this variable
15:29ocean selected is set to false
15:32if it was true. Let's also set another
15:34variable
15:36uh women selected. Make sure that is set
15:38to false.
15:39That's once this is clicked on.
15:43Then let's also set another variable.
15:46Men selected, set that to false.
15:51Then also going to set the variable for
15:54uh now I want to make sure that bad
15:56selected is also set to false.
16:01That's if it was actually true.
16:03Then lastly
16:05I want to make sure that bicycle
16:06selected is also set to false. This
16:08actually search for bicycles
16:11selected. Make sure that is also set to
16:15false.
16:17All right. So let's make sure that all
16:18these uh under this if statement
16:22so that immediately this is actually
16:24turned on. So immediately we set all
16:25photo selected to true, all these others
16:28actually set to
16:30false
16:31by default.
16:33All right. And then we also want to add
16:34some other statements also. So I want to
16:36also make sure that now in this case it
16:39definitely means that all these should
16:40actually be put on. So I'm going to add
16:43variables also. So now I'm going to have
16:45variables one to represent uh
16:47the men.
16:49Let's have one. Let's actually first uh
16:51close this like that. Let's actually set
16:53these other variables.
16:56Close this. Let's make sure these other
16:58variables are set to true
17:00in this case.
17:02So variables representing the images
17:04should all be set to true when it is on
17:06all photos.
17:08So that's oceans, that's women should
17:11also be set to true.
17:16Also going to set the variable for men
17:18to true.
17:23And so on.
17:28All right. So, you must make sure that
17:29all the variables that actually
17:30represent the images are set to true
17:32every time we have all photos selected.
17:35All right. So, now let's also drag
17:36these. Let them also be under this if
17:38statement. So, that in case all this
17:41happens, these are actually all set to
17:44true in that case. So, now you may not
17:46be able to see what happens in this case
17:49until I actually set the next variable.
17:51So, let's first work on the next
17:53variable.
17:55Let's close this.
17:56Let's go to where we have ocean
17:57selected. So, what happens when ocean
17:59here is clicked on? So, let's add an
18:01interaction. So, it's also going to have
18:02a condition. So, the condition statement
18:05shall be we must actually first test
18:07that this if this was false, it should
18:09actually be set on So, if ocean selected
18:11was actually false,
18:13let's say that if it was actually set to
18:15false initially, it means that now we're
18:18actually going to set the variable for
18:19ocean selected to
18:21true.
18:26So, that's going to be very, very
18:27important. So, this should actually be
18:28set to true if it was actually false
18:31initially. And then next we're actually
18:33going to have to make sure that all
18:34these others are actually set off. So,
18:36this, this, this, and
18:38that should actually all be off. So,
18:40make sure that all the other selections
18:42are actually off when ocean is selected.
18:44So, all photo selected should actually
18:46be set to false
18:48when we have ocean selected.
18:50Let's actually work on all those
18:52individual variables for
18:54selected.
18:56Sorry. So, this is wrong. So, let's add
18:58variable actually. So, this variable for
19:01women selected should actually be set to
19:03false.
19:05And so on.
19:10All right. So, we have to make sure that
19:11all the selections, all the other
19:12selections apart from oceans are set to
19:15false in that case. So, in this case, if
19:18this was true, oceans will be set to
19:20true and all these others will be set to
19:22false. Let's make sure they're all under
19:23that if statement.
19:28All right, and then lastly, we want to
19:30make sure that also in the images, we
19:32want to make sure that only the photos
19:34that actually have oceans actually
19:35remain selected. So, only ocean photos
19:39should actually remain in true and all
19:40the other photos should actually be set
19:42to false. Let's also work on those
19:43variables. So, we want to set those
19:45variables for the images.
19:49So, let's have variable for oceans shall
19:51be set to true.
19:53Then let's set the other variables of
19:55the images to
19:59Let's set the other variables of the
20:00images to false. So, women shall
20:03actually be set to false.
20:06And likewise to the other variables.
20:11All right, so now we've actually set all
20:13the other variables. So, all the other
20:14images are set to false except oceans
20:17that actually left as true. So, let's
20:19see what happens. But before we do that,
20:21let's actually make sure that all these
20:23are under the if statement. So, let's
20:25drag them in.
20:30All right, so let's actually test what
20:31happens in this case. So, let's preview
20:34that. So, as you can see, when all
20:36photos is selected, this is what we
20:38have. So, when I go to oceans, you guys
20:39should see that only the photos that
20:41actually have oceans remain selected.
20:43And as you can see, all the others
20:46actually deselected. So, all photos
20:47becomes deselected when you actually
20:49click on this. So, this actually becomes
20:51false when you actually click on this.
20:53And then when you go back, you can
20:54actually see what
20:55happens. Now, all these others are not
20:58yet set on, so we're actually going to
20:59have to work on them also. But as you
21:01can see, it's actually working.
21:05Let's go to women selected and then we
21:06also want to add an interaction.
21:12Let's add a conditional. So, we must
21:14first make sure to test that if women
21:16selected is actually false,
21:19it should actually be set to true.
21:21So, that's going to be the first thing.
21:24So, once that happens, we can actually
21:26set the variable for women to true.
21:30And then all the other variables for the
21:32selections on the menu should actually
21:34be set to false.
21:41All right, so let's drag this in.
21:56Then lastly, now we also have to make
21:57sure only the images that actually have
21:59women are actually set to true.
22:03So, let's work on the variables for the
22:05images.
22:12So, as you can see, all the other
22:13variables for images are set to false
22:15except that for women which is actually
22:17set to true. So, let's make sure that
22:18they're all under the if statement.
22:29Then let's test this.
22:33All right, so as you can see, when I
22:35select the women, you can actually see
22:36only the women's images actually set on.
22:39And that's actually what happened. So,
22:41you can actually work on So, I'm going
22:43to quickly work on all the others while
22:45doing and following the same procedures.
23:37All right, so lastly we've set that for
23:38the birds and we finally set that to the
23:41right conditions. So let's actually test
23:43that.
23:46Now let's see that in the prototype
23:48preview. And as you can see when I click
23:51on oceans, when I click on women, when I
23:52click on men, bicycles,
23:55and the birds you can actually see all
23:56the changes. So now this is a very much
23:58working filterable gallery just as we
24:01actually wanted. So if you followed
24:03through this video, I hope the video
24:05really helped you helped you understand
24:07all these things further. I know it's a
24:09little bit complex, but I believe that
24:11as you practice you'll actually get
24:12better in understanding how to work with
24:15variables. I hope this video really
24:16helped you. If it did, feel free to give
24:17the video a thumbs up and then if you're
24:19new to this channel, I encourage you
24:21join the community by subscribing. And
24:23then make sure to hit the notification
24:24bell so that you're updated every single
24:26time I upload a new video. Thank you so
24:28much for watching. I'll see you all in
24:29the next video.
24:31Bye.

About this transcript

This page contains the full transcript of Filterable Image Gallery With Variables In Figma | 2024 by Emmanuel’s Design Lab, generated from the public captions YouTube serves with the video. The transcript has 4,101 words across 656 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.