{"id":"youtube:SEig1qfOMsg","source":"youtube","sourceId":"SEig1qfOMsg","account":"robotostudio","type":"video","title":"Creating preview Images for page builders in Sanity Studio","body":"Here's a quickfire video showing you how to go from website to page-builder preview images in the shortest time possible with our Figma community file. Shoutout to @amranmohamed377 for the inspiration.","bodyFormat":"text","sourceUrl":"https://www.youtube.com/watch?v=SEig1qfOMsg","canonicalUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio","sourceUrls":["https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"],"authorIds":["https://robotostudio.com/blog/author/jono#person"],"publishedAt":"2024-08-13T00:00:00.000Z","modifiedAt":"2026-08-11","checkedAt":"2026-09-17T13:02:04.791Z","language":"en","visibility":"public","topics":["sanity","editorial-experience"],"gaps":["Video authors are credited by the original Roboto page; individual transcript speakers remain unassigned."],"segments":[{"id":"segment-1","startMs":3030,"endMs":3040,"text":"hey how's it going so this is a quick"},{"id":"segment-2","startMs":3040,"endMs":6269,"text":"hey how's it going so this is a quick\nvideo um to basically create icon array"},{"id":"segment-3","startMs":6269,"endMs":6279,"text":"video um to basically create icon array"},{"id":"segment-4","startMs":6279,"endMs":7550,"text":"video um to basically create icon array\nso creating the little thumbnails that"},{"id":"segment-5","startMs":7550,"endMs":7560,"text":"so creating the little thumbnails that"},{"id":"segment-6","startMs":7560,"endMs":10110,"text":"so creating the little thumbnails that\nsit inside of Sanity um for page"},{"id":"segment-7","startMs":10110,"endMs":10120,"text":"sit inside of Sanity um for page"},{"id":"segment-8","startMs":10120,"endMs":11990,"text":"sit inside of Sanity um for page\nBuilders and things like that now"},{"id":"segment-9","startMs":11990,"endMs":12000,"text":"Builders and things like that now"},{"id":"segment-10","startMs":12000,"endMs":13230,"text":"Builders and things like that now\neverybody has their own way of doing"},{"id":"segment-11","startMs":13230,"endMs":13240,"text":"everybody has their own way of doing"},{"id":"segment-12","startMs":13240,"endMs":15350,"text":"everybody has their own way of doing\nthis but we have a fast way to do it if"},{"id":"segment-13","startMs":15350,"endMs":15360,"text":"this but we have a fast way to do it if"},{"id":"segment-14","startMs":15360,"endMs":17470,"text":"this but we have a fast way to do it if\nyou already have the components built"},{"id":"segment-15","startMs":17470,"endMs":17480,"text":"you already have the components built"},{"id":"segment-16","startMs":17480,"endMs":19189,"text":"you already have the components built\nand more importantly this actually will"},{"id":"segment-17","startMs":19189,"endMs":19199,"text":"and more importantly this actually will"},{"id":"segment-18","startMs":19199,"endMs":21550,"text":"and more importantly this actually will\nmatch the aspect ratio of the little"},{"id":"segment-19","startMs":21550,"endMs":21560,"text":"match the aspect ratio of the little"},{"id":"segment-20","startMs":21560,"endMs":23070,"text":"match the aspect ratio of the little\nthumbnails that are in there and look"},{"id":"segment-21","startMs":23070,"endMs":23080,"text":"thumbnails that are in there and look"},{"id":"segment-22","startMs":23080,"endMs":24710,"text":"thumbnails that are in there and look\nreally really clean if you do it this"},{"id":"segment-23","startMs":24710,"endMs":24720,"text":"really really clean if you do it this"},{"id":"segment-24","startMs":24720,"endMs":26589,"text":"really really clean if you do it this\nway um so let me show you how we work"},{"id":"segment-25","startMs":26589,"endMs":26599,"text":"way um so let me show you how we work"},{"id":"segment-26","startMs":26599,"endMs":28150,"text":"way um so let me show you how we work\nwith it so this is the existing ralo"},{"id":"segment-27","startMs":28150,"endMs":28160,"text":"with it so this is the existing ralo"},{"id":"segment-28","startMs":28160,"endMs":30070,"text":"with it so this is the existing ralo\nStudio website and we don't currently"},{"id":"segment-29","startMs":30070,"endMs":30080,"text":"Studio website and we don't currently"},{"id":"segment-30","startMs":30080,"endMs":31710,"text":"Studio website and we don't currently\nactually have the thumbnails so what"},{"id":"segment-31","startMs":31710,"endMs":31720,"text":"actually have the thumbnails so what"},{"id":"segment-32","startMs":31720,"endMs":32990,"text":"actually have the thumbnails so what\nwe're going to do we're going to hit"},{"id":"segment-33","startMs":32990,"endMs":33000,"text":"we're going to do we're going to hit"},{"id":"segment-34","startMs":33000,"endMs":35389,"text":"we're going to do we're going to hit\ncommand and minus a couple times until"},{"id":"segment-35","startMs":35389,"endMs":35399,"text":"command and minus a couple times until"},{"id":"segment-36","startMs":35399,"endMs":38430,"text":"command and minus a couple times until\nwe hit around 75 something like 50%"},{"id":"segment-37","startMs":38430,"endMs":38440,"text":"we hit around 75 something like 50%"},{"id":"segment-38","startMs":38440,"endMs":41069,"text":"we hit around 75 something like 50%\ncould even work um I'm on a MacBook uh"},{"id":"segment-39","startMs":41069,"endMs":41079,"text":"could even work um I'm on a MacBook uh"},{"id":"segment-40","startMs":41079,"endMs":43869,"text":"could even work um I'm on a MacBook uh\n14 in so essentially the screen size"},{"id":"segment-41","startMs":43869,"endMs":43879,"text":"14 in so essentially the screen size"},{"id":"segment-42","startMs":43879,"endMs":45470,"text":"14 in so essentially the screen size\nisn't big enough to be able to take a"},{"id":"segment-43","startMs":45470,"endMs":45480,"text":"isn't big enough to be able to take a"},{"id":"segment-44","startMs":45480,"endMs":47350,"text":"isn't big enough to be able to take a\nmassive screenshot around it so this is"},{"id":"segment-45","startMs":47350,"endMs":47360,"text":"massive screenshot around it so this is"},{"id":"segment-46","startMs":47360,"endMs":49310,"text":"massive screenshot around it so this is\nhow we get around it just remember the"},{"id":"segment-47","startMs":49310,"endMs":49320,"text":"how we get around it just remember the"},{"id":"segment-48","startMs":49320,"endMs":50709,"text":"how we get around it just remember the\nsize that you're doing it for because"},{"id":"segment-49","startMs":50709,"endMs":50719,"text":"size that you're doing it for because"},{"id":"segment-50","startMs":50719,"endMs":52910,"text":"size that you're doing it for because\nyou have to do all of them by the same"},{"id":"segment-51","startMs":52910,"endMs":52920,"text":"you have to do all of them by the same"},{"id":"segment-52","startMs":52920,"endMs":56029,"text":"you have to do all of them by the same\nuh zooming out uh ratio so here we go"},{"id":"segment-53","startMs":56029,"endMs":56039,"text":"uh zooming out uh ratio so here we go"},{"id":"segment-54","startMs":56039,"endMs":56670,"text":"uh zooming out uh ratio so here we go\nwhat we're going to do is we're going to"},{"id":"segment-55","startMs":56670,"endMs":56680,"text":"what we're going to do is we're going to"},{"id":"segment-56","startMs":56680,"endMs":57869,"text":"what we're going to do is we're going to\ntake a screenshot of this I'm going to"},{"id":"segment-57","startMs":57869,"endMs":57879,"text":"take a screenshot of this I'm going to"},{"id":"segment-58","startMs":57879,"endMs":59270,"text":"take a screenshot of this I'm going to\ntake a big old screenshot try and leave"},{"id":"segment-59","startMs":59270,"endMs":59280,"text":"take a big old screenshot try and leave"},{"id":"segment-60","startMs":59280,"endMs":61990,"text":"take a big old screenshot try and leave\nas much space around it as possible and"},{"id":"segment-61","startMs":61990,"endMs":62000,"text":"as much space around it as possible and"},{"id":"segment-62","startMs":62000,"endMs":63509,"text":"as much space around it as possible and\nwe're going to go into figma and we're"},{"id":"segment-63","startMs":63509,"endMs":63519,"text":"we're going to go into figma and we're"},{"id":"segment-64","startMs":63519,"endMs":64950,"text":"we're going to go into figma and we're\ngoing to use this new community plugin"},{"id":"segment-65","startMs":64950,"endMs":64960,"text":"going to use this new community plugin"},{"id":"segment-66","startMs":64960,"endMs":66789,"text":"going to use this new community plugin\nthat we or Community document that we've"},{"id":"segment-67","startMs":66789,"endMs":66799,"text":"that we or Community document that we've"},{"id":"segment-68","startMs":66799,"endMs":69149,"text":"that we or Community document that we've\njust used uh inside of figma and we're"},{"id":"segment-69","startMs":69149,"endMs":69159,"text":"just used uh inside of figma and we're"},{"id":"segment-70","startMs":69159,"endMs":70830,"text":"just used uh inside of figma and we're\ngoing to open it up and it looks"},{"id":"segment-71","startMs":70830,"endMs":70840,"text":"going to open it up and it looks"},{"id":"segment-72","startMs":70840,"endMs":72350,"text":"going to open it up and it looks\nsomething like this now what you're"},{"id":"segment-73","startMs":72350,"endMs":72360,"text":"something like this now what you're"},{"id":"segment-74","startMs":72360,"endMs":73710,"text":"something like this now what you're\ngoing to get is this array field of"},{"id":"segment-75","startMs":73710,"endMs":73720,"text":"going to get is this array field of"},{"id":"segment-76","startMs":73720,"endMs":75630,"text":"going to get is this array field of\nthumbnails now you can just straight"},{"id":"segment-77","startMs":75630,"endMs":75640,"text":"thumbnails now you can just straight"},{"id":"segment-78","startMs":75640,"endMs":77390,"text":"thumbnails now you can just straight\naway command click one of these trees"},{"id":"segment-79","startMs":77390,"endMs":77400,"text":"away command click one of these trees"},{"id":"segment-80","startMs":77400,"endMs":79149,"text":"away command click one of these trees\nthat are in here and paste it in so you"},{"id":"segment-81","startMs":79149,"endMs":79159,"text":"that are in here and paste it in so you"},{"id":"segment-82","startMs":79159,"endMs":81550,"text":"that are in here and paste it in so you\ncan hit that um and there's how it will"},{"id":"segment-83","startMs":81550,"endMs":81560,"text":"can hit that um and there's how it will"},{"id":"segment-84","startMs":81560,"endMs":83990,"text":"can hit that um and there's how it will\nlook inside of the sanity development"},{"id":"segment-85","startMs":83990,"endMs":84000,"text":"look inside of the sanity development"},{"id":"segment-86","startMs":84000,"endMs":85789,"text":"look inside of the sanity development\nenvironment um inside of the sanity"},{"id":"segment-87","startMs":85789,"endMs":85799,"text":"environment um inside of the sanity"},{"id":"segment-88","startMs":85799,"endMs":87870,"text":"environment um inside of the sanity\nStudio however we have these 3x2"},{"id":"segment-89","startMs":87870,"endMs":87880,"text":"Studio however we have these 3x2"},{"id":"segment-90","startMs":87880,"endMs":89469,"text":"Studio however we have these 3x2\nexamples here which you can also do so"},{"id":"segment-91","startMs":89469,"endMs":89479,"text":"examples here which you can also do so"},{"id":"segment-92","startMs":89479,"endMs":90990,"text":"examples here which you can also do so\nagain command click I believe it's"},{"id":"segment-93","startMs":90990,"endMs":91000,"text":"again command click I believe it's"},{"id":"segment-94","startMs":91000,"endMs":93030,"text":"again command click I believe it's\ncontrol click on Windows uh you want to"},{"id":"segment-95","startMs":93030,"endMs":93040,"text":"control click on Windows uh you want to"},{"id":"segment-96","startMs":93040,"endMs":94670,"text":"control click on Windows uh you want to\nclick this and you basically want to"},{"id":"segment-97","startMs":94670,"endMs":94680,"text":"click this and you basically want to"},{"id":"segment-98","startMs":94680,"endMs":96870,"text":"click this and you basically want to\npaste it in and that's how it will look"},{"id":"segment-99","startMs":96870,"endMs":96880,"text":"paste it in and that's how it will look"},{"id":"segment-100","startMs":96880,"endMs":98590,"text":"paste it in and that's how it will look\nnow you can do this for every single one"},{"id":"segment-101","startMs":98590,"endMs":98600,"text":"now you can do this for every single one"},{"id":"segment-102","startMs":98600,"endMs":100270,"text":"now you can do this for every single one\nof these so for example I'll do the next"},{"id":"segment-103","startMs":100270,"endMs":100280,"text":"of these so for example I'll do the next"},{"id":"segment-104","startMs":100280,"endMs":102550,"text":"of these so for example I'll do the next\none down and all we're doing is we're"},{"id":"segment-105","startMs":102550,"endMs":102560,"text":"one down and all we're doing is we're"},{"id":"segment-106","startMs":102560,"endMs":104190,"text":"one down and all we're doing is we're\ntrying to get it roughly 3x two"},{"id":"segment-107","startMs":104190,"endMs":104200,"text":"trying to get it roughly 3x two"},{"id":"segment-108","startMs":104200,"endMs":105230,"text":"trying to get it roughly 3x two\nsometimes it's a little bit bigger"},{"id":"segment-109","startMs":105230,"endMs":105240,"text":"sometimes it's a little bit bigger"},{"id":"segment-110","startMs":105240,"endMs":106830,"text":"sometimes it's a little bit bigger\nsometimes it's going to be wider like"},{"id":"segment-111","startMs":106830,"endMs":106840,"text":"sometimes it's going to be wider like"},{"id":"segment-112","startMs":106840,"endMs":108709,"text":"sometimes it's going to be wider like\nthis um but the lucky thing about figma"},{"id":"segment-113","startMs":108709,"endMs":108719,"text":"this um but the lucky thing about figma"},{"id":"segment-114","startMs":108719,"endMs":110230,"text":"this um but the lucky thing about figma\nis because of the way that it actually"},{"id":"segment-115","startMs":110230,"endMs":110240,"text":"is because of the way that it actually"},{"id":"segment-116","startMs":110240,"endMs":112429,"text":"is because of the way that it actually\nscales the image up and down even if I"},{"id":"segment-117","startMs":112429,"endMs":112439,"text":"scales the image up and down even if I"},{"id":"segment-118","startMs":112439,"endMs":114190,"text":"scales the image up and down even if I\nhit this now where it's a much wider"},{"id":"segment-119","startMs":114190,"endMs":114200,"text":"hit this now where it's a much wider"},{"id":"segment-120","startMs":114200,"endMs":116230,"text":"hit this now where it's a much wider\nversion it should kind of Zoom it into"},{"id":"segment-121","startMs":116230,"endMs":116240,"text":"version it should kind of Zoom it into"},{"id":"segment-122","startMs":116240,"endMs":118550,"text":"version it should kind of Zoom it into\nthe center now this doesn't look perfect"},{"id":"segment-123","startMs":118550,"endMs":118560,"text":"the center now this doesn't look perfect"},{"id":"segment-124","startMs":118560,"endMs":120469,"text":"the center now this doesn't look perfect\nand it's going to drive me crazy so what"},{"id":"segment-125","startMs":120469,"endMs":120479,"text":"and it's going to drive me crazy so what"},{"id":"segment-126","startMs":120479,"endMs":121149,"text":"and it's going to drive me crazy so what\nI'm going to have to do is I'm going to"},{"id":"segment-127","startMs":121149,"endMs":121159,"text":"I'm going to have to do is I'm going to"},{"id":"segment-128","startMs":121159,"endMs":122630,"text":"I'm going to have to do is I'm going to\nhave to do it again and try and leave"},{"id":"segment-129","startMs":122630,"endMs":122640,"text":"have to do it again and try and leave"},{"id":"segment-130","startMs":122640,"endMs":125749,"text":"have to do it again and try and leave\nmore space in there now that's probably"},{"id":"segment-131","startMs":125749,"endMs":125759,"text":"more space in there now that's probably"},{"id":"segment-132","startMs":125759,"endMs":127469,"text":"more space in there now that's probably\npretty close remember you're trying to"},{"id":"segment-133","startMs":127469,"endMs":127479,"text":"pretty close remember you're trying to"},{"id":"segment-134","startMs":127479,"endMs":129229,"text":"pretty close remember you're trying to\nhit three by two so if you make sure"},{"id":"segment-135","startMs":129229,"endMs":129239,"text":"hit three by two so if you make sure"},{"id":"segment-136","startMs":129239,"endMs":130630,"text":"hit three by two so if you make sure\nthat you're you're following that same"},{"id":"segment-137","startMs":130630,"endMs":130640,"text":"that you're you're following that same"},{"id":"segment-138","startMs":130640,"endMs":132949,"text":"that you're you're following that same\nratio it will hit roughly the same ratio"},{"id":"segment-139","startMs":132949,"endMs":132959,"text":"ratio it will hit roughly the same ratio"},{"id":"segment-140","startMs":132959,"endMs":135150,"text":"ratio it will hit roughly the same ratio\nperfectly there now I not going to be"},{"id":"segment-141","startMs":135150,"endMs":135160,"text":"perfectly there now I not going to be"},{"id":"segment-142","startMs":135160,"endMs":136430,"text":"perfectly there now I not going to be\nable to live with that either because"},{"id":"segment-143","startMs":136430,"endMs":136440,"text":"able to live with that either because"},{"id":"segment-144","startMs":136440,"endMs":138270,"text":"able to live with that either because\nit's got those next icons below it so"},{"id":"segment-145","startMs":138270,"endMs":138280,"text":"it's got those next icons below it so"},{"id":"segment-146","startMs":138280,"endMs":140229,"text":"it's got those next icons below it so\nwhat you can do in these situations is"},{"id":"segment-147","startMs":140229,"endMs":140239,"text":"what you can do in these situations is"},{"id":"segment-148","startMs":140239,"endMs":142190,"text":"what you can do in these situations is\nhit the little fill section at the side"},{"id":"segment-149","startMs":142190,"endMs":142200,"text":"hit the little fill section at the side"},{"id":"segment-150","startMs":142200,"endMs":145270,"text":"hit the little fill section at the side\nhit crop and just shift it about however"},{"id":"segment-151","startMs":145270,"endMs":145280,"text":"hit crop and just shift it about however"},{"id":"segment-152","startMs":145280,"endMs":147790,"text":"hit crop and just shift it about however\nyou want and shift up the size to get it"},{"id":"segment-153","startMs":147790,"endMs":147800,"text":"you want and shift up the size to get it"},{"id":"segment-154","startMs":147800,"endMs":150229,"text":"you want and shift up the size to get it\nto work so if you see there that to me"},{"id":"segment-155","startMs":150229,"endMs":150239,"text":"to work so if you see there that to me"},{"id":"segment-156","startMs":150239,"endMs":152589,"text":"to work so if you see there that to me\nlooks great um and you can do that for"},{"id":"segment-157","startMs":152589,"endMs":152599,"text":"looks great um and you can do that for"},{"id":"segment-158","startMs":152599,"endMs":153990,"text":"looks great um and you can do that for\nevery single one of your components and"},{"id":"segment-159","startMs":153990,"endMs":154000,"text":"every single one of your components and"},{"id":"segment-160","startMs":154000,"endMs":155390,"text":"every single one of your components and\nall you will do at the end of this is"},{"id":"segment-161","startMs":155390,"endMs":155400,"text":"all you will do at the end of this is"},{"id":"segment-162","startMs":155400,"endMs":157869,"text":"all you will do at the end of this is\nyou will export them with the same name"},{"id":"segment-163","startMs":157869,"endMs":157879,"text":"you will export them with the same name"},{"id":"segment-164","startMs":157879,"endMs":159830,"text":"you will export them with the same name\nas the page builder components and put"},{"id":"segment-165","startMs":159830,"endMs":159840,"text":"as the page builder components and put"},{"id":"segment-166","startMs":159840,"endMs":162430,"text":"as the page builder components and put\nthem inside of the sanity studio folder"},{"id":"segment-167","startMs":162430,"endMs":162440,"text":"them inside of the sanity studio folder"},{"id":"segment-168","startMs":162440,"endMs":164070,"text":"them inside of the sanity studio folder\nand from that point onwards it all works"},{"id":"segment-169","startMs":164070,"endMs":164080,"text":"and from that point onwards it all works"},{"id":"segment-170","startMs":164080,"endMs":166190,"text":"and from that point onwards it all works\nperfectly um but this is a great way to"},{"id":"segment-171","startMs":166190,"endMs":166200,"text":"perfectly um but this is a great way to"},{"id":"segment-172","startMs":166200,"endMs":168190,"text":"perfectly um but this is a great way to\nbasically template these screenshots and"},{"id":"segment-173","startMs":168190,"endMs":168200,"text":"basically template these screenshots and"},{"id":"segment-174","startMs":168200,"endMs":169869,"text":"basically template these screenshots and\nmake it easier for you and much much"},{"id":"segment-175","startMs":169869,"endMs":169879,"text":"make it easier for you and much much"},{"id":"segment-176","startMs":169879,"endMs":171670,"text":"make it easier for you and much much\nfaster than uh traditional way of doing"},{"id":"segment-177","startMs":171670,"endMs":171680,"text":"faster than uh traditional way of doing"},{"id":"segment-178","startMs":171680,"endMs":173309,"text":"faster than uh traditional way of doing\nit so have a great day hope that's"},{"id":"segment-179","startMs":173309,"endMs":173319,"text":"it so have a great day hope that's"},{"id":"segment-180","startMs":173319,"endMs":176519,"text":"it so have a great day hope that's\nhelpful bye"}],"transcript":"Hey, how's it going? So this is a quick video to basically create icon arrays, so creating the little thumbnails that sit inside of Sanity for page builders and things like that. Now everybody has their own way of doing this, but we have a fast way to do it if you already have the components built. And more importantly, this actually will match the aspect ratio of the little thumbnails that are in there and look really, really clean if you do it this way.\n\nSo let me show you how we work with it. So this is the existing Ralo Studio website, and we don't currently actually have the thumbnails. So what we're going to do, we're going to hit command and minus a couple times until we hit around 75, something like 50% could even work. I'm on a MacBook 14 inch, so essentially the screen size isn't big enough to be able to take a massive screenshot around it. So this is how we get around it. Just remember the size that you're doing it for because you have to do all of them by the same zooming out ratio.\n\nSo here we go. What we're going to do is we're going to take a screenshot of this. I'm going to take a big old screenshot, try and leave as much space around it as possible, and we're going to go into Figma. And we're going to use this new community plugin that we, or community document that we've just used inside of Figma, and we're going to open it up and it looks something like this.\n\nNow what you're going to get is this array field of thumbnails. Now you can just straight away command click one of these trees that are in here and paste it in. So you can hit that, and there's how it will look inside of the Sanity development environment, inside of the Sanity Studio. However, we have these 3x2 examples here which you can also do. So again, command click (I believe it's control click on Windows), you want to click this and you basically want to paste it in, and that's how it will look.\n\nNow you can do this for every single one of these. So for example, I'll do the next one down, and all we're doing is we're trying to get it roughly 3x2. Sometimes it's a little bit bigger, sometimes it's going to be wider like this. But the lucky thing about Figma is because of the way that it actually scales the image up and down, even if I hit this now where it's a much wider version, it should kind of zoom it into the center.\n\nNow this doesn't look perfect and it's going to drive me crazy, so what I'm going to have to do is I'm going to have to do it again and try and leave more space in there. Now that's probably pretty close. Remember, you're trying to hit 3x2, so if you make sure that you're following that same ratio, it will hit roughly the same ratio perfectly there.\n\nNow I'm not going to be able to live with that either because it's got those next icons below it. So what you can do in these situations is hit the little fill section at the side, hit crop, and just shift it about however you want and shift up the size to get it to work. So if you see there, that to me looks great. And you can do that for every single one of your components.\n\nAnd all you will do at the end of this is you will export them with the same name as the page builder components and put them inside of the Sanity Studio folder. And from that point onwards, it all works perfectly. But this is a great way to basically template these screenshots and make it easier for you and much, much faster than the traditional way of doing it.\n\nSo have a great day. Hope that's helpful. Bye.","transcriptOrigin":"Edited transcript from the original Roboto page","thumbnailUrl":"https://img.youtube.com/vi/SEig1qfOMsg/maxresdefault.jpg","durationSeconds":175,"videoId":"SEig1qfOMsg","publisherName":"Roboto Studio","faqs":[{"question":"How do you make thumbnails for a Sanity Studio page builder?","answer":"Build the components on your site first, then take a wide screenshot at around 50-75% browser zoom. Paste the screenshot into a Figma template that already has 3x2 thumbnail frames, crop each one with the fill and crop tools, and export. Naming each export to match its page builder component is what wires it up inside Sanity Studio.","sourceUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"},{"question":"What aspect ratio should Sanity page builder preview images be?","answer":"Aim for a 3x2 ratio. That's what the thumbnail slots inside Sanity Studio render at, so matching it means your previews look clean and don't get awkwardly stretched or letterboxed when editors pick a block.","sourceUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"},{"question":"How do you add preview images to a Sanity page builder?","answer":"Export the thumbnails as image files using the same names as your page builder block components, then drop them into the Sanity Studio folder for the studio to pick up. Once the filenames line up with the schema, the previews appear automatically in the block picker.","sourceUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"},{"question":"Can I use Figma to design Sanity Studio thumbnails?","answer":"Yes. Figma works well because it auto-scales pasted images to fit a frame. Roboto Studio uses a Figma community document with pre-sized 3x2 frames, so you paste a screenshot in, crop it, and export. Figma's centered scaling means even slightly off-ratio screenshots end up roughly correct.","sourceUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"},{"question":"What is a Sanity page builder?","answer":"A Sanity page builder is an array field of section blocks (hero, feature grid, CTA, and so on) that editors compose into a page. Each block has its own schema, and most teams add a small thumbnail per block so the picker shows a visual preview alongside the name.","sourceUrl":"https://robotostudio.com/videos/creating-preview-images-for-page-builders-in-sanity-studio"}],"path":"/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio","indexable":false,"contentHash":"f265df27748e89fb09e47979b6e8c064ba3129c2dc24e25ed03180b83f1f0b66","representations":{"html":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio","markdown":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio.md","json":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio.json"},"generation":"bcb598ae5ec44a3005ea0356","jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://robotostudio.com/#organization","name":"Roboto Studio","url":"https://robotostudio.com/","sameAs":["https://clutch.co/profile/roboto-studio","https://www.youtube.com/@robotostudio","https://x.com/studioroboto"]},{"@type":"Person","@id":"https://robotostudio.com/blog/author/jono#person","name":"Jono Alford","url":"https://robotostudio.com/blog/author/jono","sameAs":["https://dev.to/jonoroboto","https://x.com/jonoalford","https://www.reddit.com/user/jonoalford/"],"worksFor":{"@id":"https://robotostudio.com/#organization"}},{"@type":"Person","@id":"https://robotostudio.com/blog/author/sne#person","name":"Sne Tripathi","url":"https://robotostudio.com/blog/author/sne","sameAs":["https://x.com/sne_hil"],"worksFor":{"@id":"https://robotostudio.com/#organization"}},{"@type":"WebSite","@id":"https://bestsanityagency.com/#website","url":"https://bestsanityagency.com","name":"Roboto Studio evidence","publisher":{"@id":"https://robotostudio.com/#organization"}},{"@type":"WebPage","@id":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio#page","url":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio","name":"Creating preview Images for page builders in Sanity Studio","publisher":{"@id":"https://robotostudio.com/#organization"},"mainEntity":{"@id":"https://www.youtube.com/watch?v=SEig1qfOMsg"},"isPartOf":{"@id":"https://bestsanityagency.com/#website"}},{"@id":"https://www.youtube.com/watch?v=SEig1qfOMsg","name":"Creating preview Images for page builders in Sanity Studio","url":"https://www.youtube.com/watch?v=SEig1qfOMsg","datePublished":"2024-08-13T00:00:00.000Z","dateModified":"2026-08-11","inLanguage":"en","author":[{"@id":"https://robotostudio.com/blog/author/jono#person"}],"@type":"VideoObject","description":"Here's a quickfire video showing you how to go from website to page-builder preview images in the shortest time possible with our Figma community file. Shoutout to @amranmohamed377 for the inspiration.","transcript":"Hey, how's it going? So this is a quick video to basically create icon arrays, so creating the little thumbnails that sit inside of Sanity for page builders and things like that. Now everybody has their own way of doing this, but we have a fast way to do it if you already have the components built. And more importantly, this actually will match the aspect ratio of the little thumbnails that are in there and look really, really clean if you do it this way.\n\nSo let me show you how we work with it. So this is the existing Ralo Studio website, and we don't currently actually have the thumbnails. So what we're going to do, we're going to hit command and minus a couple times until we hit around 75, something like 50% could even work. I'm on a MacBook 14 inch, so essentially the screen size isn't big enough to be able to take a massive screenshot around it. So this is how we get around it. Just remember the size that you're doing it for because you have to do all of them by the same zooming out ratio.\n\nSo here we go. What we're going to do is we're going to take a screenshot of this. I'm going to take a big old screenshot, try and leave as much space around it as possible, and we're going to go into Figma. And we're going to use this new community plugin that we, or community document that we've just used inside of Figma, and we're going to open it up and it looks something like this.\n\nNow what you're going to get is this array field of thumbnails. Now you can just straight away command click one of these trees that are in here and paste it in. So you can hit that, and there's how it will look inside of the Sanity development environment, inside of the Sanity Studio. However, we have these 3x2 examples here which you can also do. So again, command click (I believe it's control click on Windows), you want to click this and you basically want to paste it in, and that's how it will look.\n\nNow you can do this for every single one of these. So for example, I'll do the next one down, and all we're doing is we're trying to get it roughly 3x2. Sometimes it's a little bit bigger, sometimes it's going to be wider like this. But the lucky thing about Figma is because of the way that it actually scales the image up and down, even if I hit this now where it's a much wider version, it should kind of zoom it into the center.\n\nNow this doesn't look perfect and it's going to drive me crazy, so what I'm going to have to do is I'm going to have to do it again and try and leave more space in there. Now that's probably pretty close. Remember, you're trying to hit 3x2, so if you make sure that you're following that same ratio, it will hit roughly the same ratio perfectly there.\n\nNow I'm not going to be able to live with that either because it's got those next icons below it. So what you can do in these situations is hit the little fill section at the side, hit crop, and just shift it about however you want and shift up the size to get it to work. So if you see there, that to me looks great. And you can do that for every single one of your components.\n\nAnd all you will do at the end of this is you will export them with the same name as the page builder components and put them inside of the Sanity Studio folder. And from that point onwards, it all works perfectly. But this is a great way to basically template these screenshots and make it easier for you and much, much faster than the traditional way of doing it.\n\nSo have a great day. Hope that's helpful. Bye.","thumbnailUrl":"https://img.youtube.com/vi/SEig1qfOMsg/maxresdefault.jpg","embedUrl":"https://www.youtube.com/embed/SEig1qfOMsg","uploadDate":"2024-08-13T00:00:00.000Z","duration":"PT175S","publisher":{"@type":"Organization","name":"Roboto Studio"},"caption":{"@type":"MediaObject","contentUrl":"https://bestsanityagency.com/videos/SEig1qfOMsg/creating-preview-images-for-page-builders-in-sanity-studio.vtt","encodingFormat":"text/vtt"}}]}}