Creating preview Images for page builders in Sanity Studio

0:03hey how's it going so this is a quick

0:03hey how's it going so this is a quick video um to basically create icon array

0:06video um to basically create icon array

0:06video um to basically create icon array so creating the little thumbnails that

0:07so creating the little thumbnails that

0:07so creating the little thumbnails that sit inside of Sanity um for page

0:10sit inside of Sanity um for page

0:10sit inside of Sanity um for page Builders and things like that now

0:11Builders and things like that now

0:12Builders and things like that now everybody has their own way of doing

0:13everybody has their own way of doing

0:13everybody has their own way of doing this but we have a fast way to do it if

0:15this but we have a fast way to do it if

0:15this but we have a fast way to do it if you already have the components built

0:17you already have the components built

0:17you already have the components built and more importantly this actually will

0:19and more importantly this actually will

0:19and more importantly this actually will match the aspect ratio of the little

0:21match the aspect ratio of the little

0:21match the aspect ratio of the little thumbnails that are in there and look

0:23thumbnails that are in there and look

0:23thumbnails that are in there and look really really clean if you do it this

0:24really really clean if you do it this

0:24really really clean if you do it this way um so let me show you how we work

0:26way um so let me show you how we work

0:26way um so let me show you how we work with it so this is the existing ralo

0:28with it so this is the existing ralo

0:28with it so this is the existing ralo Studio website and we don't currently

0:30Studio website and we don't currently

0:30Studio website and we don't currently actually have the thumbnails so what

0:31actually have the thumbnails so what

0:31actually have the thumbnails so what we're going to do we're going to hit

0:32we're going to do we're going to hit

0:33we're going to do we're going to hit command and minus a couple times until

0:35command and minus a couple times until

0:35command and minus a couple times until we hit around 75 something like 50%

0:38we hit around 75 something like 50%

0:38we hit around 75 something like 50% could even work um I'm on a MacBook uh

0:41could even work um I'm on a MacBook uh

0:41could even work um I'm on a MacBook uh 14 in so essentially the screen size

0:4314 in so essentially the screen size

0:4314 in so essentially the screen size isn't big enough to be able to take a

0:45isn't big enough to be able to take a

0:45isn't big enough to be able to take a massive screenshot around it so this is

0:47massive screenshot around it so this is

0:47massive screenshot around it so this is how we get around it just remember the

0:49how we get around it just remember the

0:49how we get around it just remember the size that you're doing it for because

0:50size that you're doing it for because

0:50size that you're doing it for because you have to do all of them by the same

0:52you have to do all of them by the same

0:52you have to do all of them by the same uh zooming out uh ratio so here we go

0:56uh zooming out uh ratio so here we go

0:56uh zooming out uh ratio so here we go what we're going to do is we're going to

0:56what we're going to do is we're going to

0:56what we're going to do is we're going to take a screenshot of this I'm going to

0:57take a screenshot of this I'm going to

0:57take a screenshot of this I'm going to take a big old screenshot try and leave

0:59take a big old screenshot try and leave

0:59take a big old screenshot try and leave as much space around it as possible and

1:01as much space around it as possible and

1:02as much space around it as possible and we're going to go into figma and we're

1:03we're going to go into figma and we're

1:03we're going to go into figma and we're going to use this new community plugin

1:04going to use this new community plugin

1:04going to use this new community plugin that we or Community document that we've

1:06that we or Community document that we've

1:06that we or Community document that we've just used uh inside of figma and we're

1:09just used uh inside of figma and we're

1:09just used uh inside of figma and we're going to open it up and it looks

1:10going to open it up and it looks

1:10going to open it up and it looks something like this now what you're

1:12something like this now what you're

1:12something like this now what you're going to get is this array field of

1:13going to get is this array field of

1:13going to get is this array field of thumbnails now you can just straight

1:15thumbnails now you can just straight

1:15thumbnails now you can just straight away command click one of these trees

1:17away command click one of these trees

1:17away command click one of these trees that are in here and paste it in so you

1:19that are in here and paste it in so you

1:19that are in here and paste it in so you can hit that um and there's how it will

1:21can hit that um and there's how it will

1:21can hit that um and there's how it will look inside of the sanity development

1:23look inside of the sanity development

1:24look inside of the sanity development environment um inside of the sanity

1:25environment um inside of the sanity

1:25environment um inside of the sanity Studio however we have these 3x2

1:27Studio however we have these 3x2

1:27Studio however we have these 3x2 examples here which you can also do so

1:29examples here which you can also do so

1:29examples here which you can also do so again command click I believe it's

1:30again command click I believe it's

1:31again command click I believe it's control click on Windows uh you want to

1:33control click on Windows uh you want to

1:33control click on Windows uh you want to click this and you basically want to

1:34click this and you basically want to

1:34click this and you basically want to paste it in and that's how it will look

1:36paste it in and that's how it will look

1:36paste it in and that's how it will look now you can do this for every single one

1:38now you can do this for every single one

1:38now you can do this for every single one of these so for example I'll do the next

1:40of these so for example I'll do the next

1:40of these so for example I'll do the next one down and all we're doing is we're

1:42one down and all we're doing is we're

1:42one down and all we're doing is we're trying to get it roughly 3x two

1:44trying to get it roughly 3x two

1:44trying to get it roughly 3x two sometimes it's a little bit bigger

1:45sometimes it's a little bit bigger

1:45sometimes it's a little bit bigger sometimes it's going to be wider like

1:46sometimes it's going to be wider like

1:46sometimes it's going to be wider like this um but the lucky thing about figma

1:48this um but the lucky thing about figma

1:48this um but the lucky thing about figma is because of the way that it actually

1:50is because of the way that it actually

1:50is because of the way that it actually scales the image up and down even if I

1:52scales the image up and down even if I

1:52scales the image up and down even if I hit this now where it's a much wider

1:54hit this now where it's a much wider

1:54hit this now where it's a much wider version it should kind of Zoom it into

1:56version it should kind of Zoom it into

1:56version it should kind of Zoom it into the center now this doesn't look perfect

1:58the center now this doesn't look perfect

1:58the center now this doesn't look perfect and it's going to drive me crazy so what

2:00and it's going to drive me crazy so what

2:00and it's going to drive me crazy so what I'm going to have to do is I'm going to

2:01I'm going to have to do is I'm going to

2:01I'm going to have to do is I'm going to have to do it again and try and leave

2:02have to do it again and try and leave

2:02have to do it again and try and leave more space in there now that's probably

2:05more space in there now that's probably

2:05more space in there now that's probably pretty close remember you're trying to

2:07pretty close remember you're trying to

2:07pretty close remember you're trying to hit three by two so if you make sure

2:09hit three by two so if you make sure

2:09hit three by two so if you make sure that you're you're following that same

2:10that you're you're following that same

2:10that you're you're following that same ratio it will hit roughly the same ratio

2:12ratio it will hit roughly the same ratio

2:12ratio it will hit roughly the same ratio perfectly there now I not going to be

2:15perfectly there now I not going to be

2:15perfectly there now I not going to be able to live with that either because

2:16able to live with that either because

2:16able to live with that either because it's got those next icons below it so

2:18it's got those next icons below it so

2:18it's got those next icons below it so what you can do in these situations is

2:20what you can do in these situations is

2:20what you can do in these situations is hit the little fill section at the side

2:22hit the little fill section at the side

2:22hit the little fill section at the side hit crop and just shift it about however

2:25hit crop and just shift it about however

2:25hit crop and just shift it about however you want and shift up the size to get it

2:27you want and shift up the size to get it

2:27you want and shift up the size to get it to work so if you see there that to me

2:30to work so if you see there that to me

2:30to work so if you see there that to me looks great um and you can do that for

2:32looks great um and you can do that for

2:32looks great um and you can do that for every single one of your components and

2:33every single one of your components and

2:34every single one of your components and all you will do at the end of this is

2:35all you will do at the end of this is

2:35all you will do at the end of this is you will export them with the same name

2:37you will export them with the same name

2:37you will export them with the same name as the page builder components and put

2:39as the page builder components and put

2:39as the page builder components and put them inside of the sanity studio folder

2:42them inside of the sanity studio folder

2:42them inside of the sanity studio folder and from that point onwards it all works

2:44and from that point onwards it all works

2:44and from that point onwards it all works perfectly um but this is a great way to

2:46perfectly um but this is a great way to

2:46perfectly um but this is a great way to basically template these screenshots and

2:48basically template these screenshots and

2:48basically template these screenshots and make it easier for you and much much

2:49make it easier for you and much much

2:49make it easier for you and much much faster than uh traditional way of doing

2:51faster than uh traditional way of doing

2:51faster than uh traditional way of doing it so have a great day hope that's

2:53it so have a great day hope that's

2:53it so have a great day hope that's helpful bye