# Figma for Edu: Figma Design and Figma Make, back to basics

## Метаданные

- **Канал:** Figma
- **YouTube:** https://www.youtube.com/watch?v=1lcWnSUKsIg
- **Дата:** 18.03.2026
- **Длительность:** 58:00
- **Просмотры:** 2,441

## Описание

Get a copy of the demo file here: https://www.figma.com/community/file/1604215183364863067

In this workshop we will cover a Figma Design and Figma Make workflow to help you visualize your ideas, and make them testable and shareable with a functional working coded prototype. We will cover how to move between both applications as you refine your ideas. 

00:00 Introduction
02:48 Creating a new Figma Make
03:01 Checking your AI balance
04:43 Prompting a simple game with Figma Make
07:47 Playing the simple game
08:30 Adding in a design from Figma
14:15 Editing Figma Makes with prompts and edit tools
30:30 DJ player example
33:43 Copy design from Figma Make to Figma Design
44:53 Annotations and Radial navigation example
____________________________________________________

Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/

## Содержание

### [0:00](https://www.youtube.com/watch?v=1lcWnSUKsIg) Introduction

Hi everybody and welcome to the Figma 4. edu monthly workshop. My name is Miggy. I'm joined by Alex. Today we are going to be doing a rundown on using Figma Design and Figma Make. Today we're going to give you some updates on some functionality uh and kind of show you how to use Figma Design and Figma Make to make realistic prototypes uh for your workflows. So these tools are going to give you the ability to not only uh design and refine your uh digital sites and or projects and or ideas and or concepts. With Figma design, you can visualize your ideas and Figma make helps make them true-to-life prototypes with real working code using AI. So you can make your own utilities. I often like to use Figma make to make uh new color pickers or new composition makers. Uh I like to I've actually made a DJ mixer. I'll kind of share that out as well. So you can make true interactive pieces that you can uh then refine and or take those visuals back into Figma Design. There's many different workflows. It can be very intimidating, but we're here to get you started and kind of show some of the options that you have while you're working. But basically, it allows you to take worded prompts and make those into realistic prototypes. Right here, the reason that I say find opportunities for design is often times you might not even know what it is that you need to design for. Let's say, you know, you're working on a specific type of app. you can see what the AI brings to the table and it helps you take a look at it. You can look at it constructively. critically and it helps you make new choices uh before you might even begin on your own design journey. Um so one thing that I do want to note this is uh as you're working you have a number of AI credits right those credits get refreshed every month with a verified account. you can see those credits when you click on the uh Figma logo. So, uh right here, this is a new make. I'll actually show you how to create that. If I go here in Figma, I'm in my my Figma uh app right here. If I create a new make, there's many different ways to create a new make. Like, I can just go home. Um I can create a new Figma make and then it'll ask me uh like what I want to look for. Oh, hold on. That was my community page actually. Let me make sure that uh that I go like even here to my drafts, right? I can go to my drafts.

### [2:48](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=168s) Creating a new Figma Make

I can come up here. I can create a new make. Um when I create that new make, I'm going to get this page. It's going to give me a prompt. Now, if I click here in the little Figma file, if I look at my AI balance, I can see how many

### [3:01](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=181s) Checking your AI balance

credits that I have left on my balance. And as you're working, you will consume those AI credits, but you can get a sense of what credits have been uh used as you're currently uh working. So, I just wanted to highlight that first and foremost that, you know, as you're working, you know, you may hit a limit. So, just be mindful of that as you're engaging with your projects and knowing what you have available. If you're an educator and you know you want to uh kind of like uh are looking for more, please reach out to educationfigma. com if you have like a larger than-l life project or something. You know, we'd like to make sure that we support you any way that we can. Um so we already mentioned uh starting with a prompt, right? There's many different ways. You can start with a design in Figma design. something that you've already created on the canvas. Um, or you can start with a prompt. And this is, uh, as I mentioned, finding design opportunities. Let's say you don't quite know where to begin. It's a great way to start by asking it to create something for you. However, there's going to be more often than not, you want to work with something that may already be on the canvas that you're going to begin. So, uh, we're just going to start with a simple prompt, right? Uh, we're just going to run through this together. I'm going to talk through what's happening and then we're going to try to just kind of rough out something in Figma design and put that in. All right. So, we're going to do that together. Um, and this way you can kind of get a sense of what may happen. So, let's say you've never done this before. You want to just kind of see like real time what's happening. So, let's say that we want to create a

### [4:43](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=283s) Prompting a simple game with Figma Make

simple game. Now, in Figma, you can prototype, but you know, here you can make things truly interactive. uh whereas you're not just moving through screens, but you can really kind of build out something. So, let's say if I want to try out a game, let's make a uh let's make my window a little bit larger there so those of you in the back can see. And I'm going to click here. I'm going to say let's make a uh simple space game where the uh oh, actually, this is another little fun tip. Um, I'm currently on a Mac and on Mac there is a dictation option. So, when I click uh my dictation, Oops. Let's see if it'll let me. There we go. I can actually just type in whatever I want by saying it. So, let me delete that. Let's make a simple game with a little graphic rocket ship that shoots at other alien ships. The rocket ship is across the bottom of the screen. The alien ships are coming from the top of the screen. Allow for three levels. Allow for powerups and allow for five lives. Uh I can control the ship with the left cur left arrow on my keyboard and the right arrow on my keyboard. Um and shoot with the space bar. Didn't get all of that, but let me turn off my dictation. There we go. And shoot with the space bar. Okay. So, I use the dictation to uh make that. Usually, I would type myself, but uh you know, for the purposes of the workshop, I could just talk through it. So, what's happening here is now that I've made that prompt, you could see my little avatar. You could see the prompt. It's going to give you reasoning. So, as it's working through, I think that this is an opportunity to begin to see how the AI is kind of articulating back what it is that you're asking. So, I'll create a space shooter game with a rocket ship, alien enemies, multiple levels, power-ups, and live system. Let me start by checking the current setup and build the game. Right. So, right now, it's working with three files. You can get a sense of how it's beginning to craft it. Um, and then as it's building this out, it's going to be thinking and moving through. Let's see. Yeah. So, create new make. Yeah, some of the screens are going to look different depending on what it is that you're working on. All right, so this is coming down. Um, and so once again, what we can do too is this is getting built here. I'm actually going to uh head on over to uh Figma Design and uh one thing is I think this is still going. Yeah, that's still going. I'm going to let that go. Uh, but here in Figma, what I can also do is begin to think about what might I do in designing my own ship game. Um, so like let's say, oh, here we go. I think it's starting to get somewhere. Perfect. I've created a fully functional space shooter game with all the features you requested. The game includes a rocket ship at the bottom that you control. And look at that. We got a space shooter

### [7:47](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=467s) Playing the simple game

game. Press enter to start. Right. And now you can It's giving me I think a power up. There we go. I could then shoot the games. Uh, and so this is now a functional game that's uh working, right? And as I mentioned, this currently, oh, I got double boost, right? It's kind of even come up with some of the like little output. So, I have a sense of what it is that I'm working for. Now, I can see that my level one complete. I can press enter for next level. I'm going to say that this actually did a pretty good job. So, this can then be a starting point that I may then choose to build upon. So, as I mentioned, I'm going to go back into Figma and let's say I could start with a design, but I'm actually pretty happy with what it came out with thus far.

### [8:30](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=510s) Adding in a design from Figma

Let's say I want to create a new rocket ship style. So, I can go in here. I'm going to choose the polygon tool, right? And let's say I want to build my own little rocket ship. So, let's say, you know, we have like little blue ship here. Um, I'm going to use these graphics to kind of make something that's fairly rudiments, but you know, kind of build that out. So, let's say, you know, here, um, let's throw in a little rectangle and put that there. And so, yeah, so I can begin to just kind of use these shapes to build out, you know, something more to my liking, right? And this can be more complex as well. Um, but, you know, I just want to show y'all the relationship of what you kind of build in. So, essentially what you're going to do is you're going to use Figma for generating the context or even some of the visuals that you may then use. So, here we go. I got my like little ship. I'm going to select that all together. I'm going to put that in. Okay, that looks pretty cool. Um, and so let's say I want to use this now as my rocket ship, right? Uh, I'm going to put this inside of a frame. So, I'm going to rightclick and I'm going to say, you know, uh, frame selection, right? So, frame selection. So, it's now in a frame. And I'm going to call this my ship. So, I can copy this frame. Command C. I can head over to the rocket ship game. Um, and uh, if I want to, I can will let me select the rocket ship. No, I can't But what I'm going to do is I'm going to paste that design that I have in here. So, I have my little pasted design here. And I'm going to say use this graphic for the rocket ship instead. Um, and then prompt it. So, uh, that's going to move through and, um, it's basically going to like use the reasoning. It's going to think through that concept, uh, and it's going to pull that in. Now, let's see. So, it's going to be working with the file. It's going to reconextualize the code. Then, let me show y'all while that's kind of moving through that some of the other things that are going on in here. So, if you do want to get a sense of the code, you can always click on the code link right here. Once you're in the code view, you can get a sense of the uh Got it. Okay. You can get a sense here. Game over. I died. So, you can get a sense of like uh guidelines. So, if you wanted to add additional context that governs the overall game, right? You can add additional rules and guidelines uh as it's building out. I can see that something's changed. Oh, rocket ship. There we go. Cool. So, let's press enter. Oh, let me get out of this edit mode. Let's press enter. And there we go. I have my ship. And my ship is now the ship that I designed in Figma. Now, relatively simple design. Um, but, you know, with more time, I can go in and I can make that graphic more refined. Uh, so then this way it more closely matches what I'm uh trying to sort of represent, my intent. So if I wanted to change the style design of the villains, if I wanted to start to change the style and design of some of the other aspects here, I could do that. If I also wish, I can go into the code um and I can start to see where those libraries are pulling in. Um if I want to download this as a package, I can come over here and I could actually just uh download uh that code. It's going to save as a zip file. Um and then that way I have it there as well. Okay. So um other things that you can kind of do in this context if you want to test it out on like a mobile device you want to see its responsiveness. This is going to matter more when you're generating something more akin to a website. Um so uh other things that you can kind of see here. I'm going to like let this run. I'm just going to close this out because I'm going to show you in some other examples. Uh I also just kind of want to play this game. I'm just like, "Oh man, cool. I beat level one. Let's go to the next level. " Let's head on back and just kind of start talking about this. You can always start with a design as well. I'm going to show you in another example that I have here in this file what starting from a design looks like. I'll show you one of the outputs and I'll show you a way to think about it when you are uh let's say you're working in a context where you know you want to redesign a navigation a developer like ah that's too hard to design but then you can prompt it in Figma make uh other things you could do you can publish to the web or to the community. So here um as a student user or as an education user you do have the ability to uh publish uh at least one of these sites. Uh however you can also make these available on community. There's a number of makes available on community. So if you're looking for other examples of other things that folks have made when you uh make that available on the community um then you can kind of see the other things that people have made and prompted and you can even remix from their existing designs. So I did want to highlight that. Um so once again you can also edit your designs in line with prompts or code. So I'm going to show

### [14:15](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=855s) Editing Figma Makes with prompts and edit tools

you an example that I generated here. Um, so this is a prompt that I used to kind of like create an app um like a dashboard app for measuring like social energy, right? So all of this was generated through a prompt, right? I haven't yet gone in and began to edit with my own design. Um, I may have prompted this because I wanted to test out maybe what, you know, a example of a dashboard may look like. Uh, that way I can find opportunities for design. I can make my own product uh requirements document. You know, as I'm building out this app for an example. Um, so here I can kind of see some of the interactive parts. What I want to highlight here is that what's been generated is a multi-page uh site, right? So, if I come up over here, we now have this newer feature that allows me to better navigate those pages as well as add pages. So, if I feel like something is missing, I need to add another page, I could then go in, suggest a new page. So, as you're building these things out, it'll come up with a navigation, right, with like my settings, my dashboard, and if I need to on a more granular level edit those, I can do so here. So, I can go to that live page. Now, other ways that I can begin to edit this make is uh there's this point and edit tool, right? So, I can select that. I can go in and uh basically I can just edit this text live. So, I want to say, you know, social uh energy. Wait, what was that say before? Live energy sensing, right? Social energy sensing, right? So, I'm able to edit it live while on the page. Um, if I want to change like other styling, right, I could do that as well. So, I can select the uh let's come back here. Here, I'm going to select that div and I want to change some of the padding or like the spacing. Those aspects of the design I can make right here. It doesn't even really uh require me to do a lot of prompting. So, I can go in and make those uh edits. So even here if I need to change the font I can click and I can look for a font that is more to my liking and make those edits on the live page. Let's say here too I immediately want to go into the code. Um so I can go to the source code and I can see where respectively like where that is in the code and I can also make an edit here. So I could say live uh energy, you know, sensing dashboard, right? I can uh then make that change. Um and uh let's uh save that. And when I go back, it should update or yeah, I have to right over here in the left, it's going to tell me uh the diff of what's been changed. So I may then need to uh save that. And then once that's uh saved, it should then show up. I don't know if I made the change properly, but let's go. Oh, it was on a different page. Yeah. Yeah. Uh let's see. Was it live dashboard? No. Live. Let me just check. Live. Go into the code. Live energy sensing dashboard. I don't know why it's not changing the text, but might just need a refresh. So, other things that you could do uh as you're working, if you want to change the prompt itself. So I can select this button. You can see I have the context of the button and I can say change uh button colors to uh be more of an orange uh color. Right? So I could be general, I could be vague, or I could be more specific and I can give it exact color values. Um so let's say if I want to be more general, um I can do that. And the one thing you have to remember is when you're working with uh kind of like indeterminate prompting um sometimes it might require like a secondary prompt or change um as you're like working on it. So um one thing that I do want to highlight too is that you know we're continuously like updating the product. We're uh working on um you know refining how these things are are working. So, um, here we go. Homepage, title, gradient, CTA button. So, change colors to orange. So, let's hope that it did it because I'm prompted live. Bam. There we go. So, now I have orange buttons for everything. This is great. And you can see that the reason me asking it to be more orange is because there's actually like a gradient here that's sort of representing it. So, I could have put in a very specific value, but kind of being more uh it's kind of like asking it, it's going to kind of like take that into consideration uh and kind of change that overall. And you could actually see it's kind of affected like other aspects of the design as well, not just the button. So, uh as I'm moving through you, you'll notice that some of these outputs tend to to lean on the purple as you go through these. So um one thing that you could do is in that context file that I mentioned earlier is uh you know you could always go in uh into the guidelines and within the guidelines you can start to set certain properties that you want to lean into or if you don't want to do other things. So I'll show you some examples here uh right here where it's like only use absolute positioning when necessary. Opt for responsive and well ststructured layouts. Uh let's see what else it says that use flexbox and grid by default. Right? So if you have certain aspects uh or certain instructions that you want to have it perform on a regular basis, you can include that. This is currently commented out, but you can take those lines, put it into the guidelines file, and then it'll essentially use those guidelines to govern additional prompts. it'll have that additional context so you're not having to put everything into that specific bar right there. All right, so let's head back in here. Um, uh, oh, there was one other thing. Oh, I didn't include it in this file, but here, I'll show you one other thing that's really cool. Um, so let's say I go back to this example and I'm like looking at the visuals, right? Uh, wow. I really took that uh literally that orange. So, um, I'm going to make some edits. I'm going to come over here. I'm going to select this text. I can see that that's cut off. I can make this a little bit bigger, right? And, uh, I've made that edit. I can see that the edited file is there. I'm going to hit save. It's going to apply it. Right? That's good. Um, however, let's say you're working on a site layout and you want to use your own icons. graphics. When I have this point andclick tool and I click on one of those objects, you'll notice there's this option here that allows you to upload your own custom graphic into that spot. So, if you are building out a website and you're like, "All right, I prompted this, you know, this thing for building out a portfolio page, but I want to use my own visuals. " This will give you the opportunity to upload those as you wish. So, I can go back into Figma Design. Actually, I'm going to take this like little like heart. Uh, I'm going to press shift X to swap the fill in the stroke. I'm going to make that a little bit bigger. Um, I'm going to put this inside of a frame. So, let's frame that selection. Uh, let's make this a perfect square. So, let's just say uh we should make it a little bit smaller. Let me press F. I'm going to hold down the shift key. I'm going to draw a frame that is one. Let's say 256x 256. I'm going to copy that graphic. Command C. I'm going to paste it into here. Going to hold the shift key. I'm going to bring this down. And I want to use this uh this icon. Let's uh put that in the center. Make it a little bit smaller. There we go. Let's say I want to save this out as an SVG graphic. Right. I'm going to hide that background. I'm going to call this heart. And I'm going to come over here to the export tab here. I'm going to choose SVG. I'm going to export that heart graphic. I'm going to save it to my desktop. And so now I'm going to come back over here and let's say I want to, by the way, I haven't even tried this yet. I've I've come across this, but I haven't had need to try it. So I'm trying it live for the first time right here. Oh, it's not going to let me use an SVG file. So boom. I just learned that. Uh, so going to come over here. I'm going to export this as a PNG graphic. Uh, so there we go. So I have my 256 PNG graphic. Let's export heart. png. And uh, I'm going to make a recommendation that we have the ability to upload SVG. I'm going to show you other ways of uploading changing that as well, but let's update the heart PNG. I can see there it is. It's been uploaded from my computer. And uh let's see if that works. So use the new graphic. I told you I haven't even used this yet. So let's see if this works. Fingers crossed. No. All right. I'm going to have to provide some feedback for the team. Kind of expected that to happen. Yeah, sometimes. Sometimes my account may have something like this that may not work. So it's happened to you a lot of times. I'm going to have to provide that feedback to the team. Let's see if it allowed me to do that. Oh man, it did. It did its own thing. Uh I think it allowed me to kind of represent that graphic. I'm going to try this one more time. Uh, and then I'm going to see if I can get this to work cuz I want to upload it with my graphic. And that's all right. That's the beauty of a live workshop. And then also, you know, sometimes you work on these sorts of things. And uh let's see. Let's see if I can kick it in. No, I can move it, right? But when I upload that image, it's not going to let me do it. I'm so sad. All right. I'm gonna have to leave the feedback. Something went arry there, but that's okay. I'm going to hit discard, so it's not going to worry about that. Um, also, at any point in time, like let's say I made that change, I did not want to make that change. I can go back to a previous prompt. So, I can come over here in a lefthand panel where it says one edited file and I look for that little restore this version. Now, the way that this works, it's not actually going to undo everything, right? So the history of everything that you're doing in Figma make, right, is kind of like linear and moving forward. So don't think of it as an undo that's going to go back, right? Because all of your previous actions are still stacked. So it's not going to like just remove everything that's happened since that undo. Um it's kind of like another action that has just been performed on top. So I was able to easily go back to that previous version. So if you find yourself going deep into a make, right, because we're in this world of kind of like indeterminate um kind of building, right, you really need to consider uh how that's going to be incorporated. So you can easily go back and just be like, hey, it was it was working before. Let me go back to that version. And easily just do that as well. All right. So, uh, somebody was saying, "How do you move text around the screen? " I'm not quite sure what you're asking. Um, so here, once the text is in Figma make, it's essentially being structured like onto that page, right? So, you're able to change like and adjust its position, its padding, its margin. Um, but if you do want to uh like let's say move something up or down, I would highly recommend that you know you begin to prompt it. So I can take that div, I have the context of the div and I could easily say you know move to the bottom of the page. Um, and then it'll perform that function. So it'll effectively kind of like handle that for you a little bit better. Um, you could easily do that in the code view as well, but I'm actually wondering if there's um something specific to my setup that might not be working uh or responding to the code updates. So, I'm just going to have to like double check on that. But here we go. It's going to say perfect. I moved the graphic to the bottom of the page. The abstract energy waves image now appears at the very end of the homepage. Oh, it went to putting that graphic back in. That's interesting. So, uh, I'm going to show y'all a couple other examples. Um, one other thing that I did want y'all to like also consider. So, remember I couldn't get that heart to work as an SVG graphic. Um, I can always use the SVG code that uh is rendered from a graphic that's on the canvas. So, here I could take this heart graphic. I can rightclick. I can copy paste as SVG. You can even copy paste this as code like CSS, iOS or Android. But I'm going to specifically want SVG. What that stands for is scalable vector graphic. It's a essentially a language that determines the drawing of any visual that you see uh in Figma. So I can copy that as SVG. This is what SVG code looks like. Uh basically determines like the width, the height, the viewbox for it. So, I'm going to try to make a change on that page using the SVG. I'm going to copy that SVG. I'm going to head back over here. I'm going to provide this context and I'm going to say replace this icon with this SVG graphic. And I'm going to paste in the code. So, I can just paste in that SVG code. Uh, it will then use it. So, even if you're using like let's say an initial prompt and you want to use the SVG graphic code to um be there, you want to add in a logo, um you want to, you know, further brand it. And I'm seeing a question, can you bring what you made in make and put it into design mode? Yes, you can absolutely do that. And I'll actually show you uh a make that I leveraged that and it saved me a ton of time. So, here we go. Let's see if this is going to Okay, so there we go. I've replaced the icon here. Uh I definitely wanted it there. I don't there I feel like there's something funky about this specific make in that it's sort of uh not picking the

### [30:30](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=1830s) DJ player example

right context of the right thing. Um, so it's worked with two files. I replaced the sparkles icon with the red heart SVG graphic you requested. Yeah, I feel like there might be like a bug right now just like selecting the context that I want. But you can see that we got the graphic in there. It's just not going to the right place. So, um, I actually just got this question. Copy design layers and paste back into Figma. Um, I'm going to show you all that with this example. So, this is another example. And this is one of those examples where recently I actually had the need to make a uh I was actually asked to perform some of my music uh at a Figma event. Uh, and I needed a way to play it. So, I made a mixer that actually worked with music. I'll tell you the original prompt. There's actually quite a few prompts for me to get it to its current state, but I basically asked it, make a DJ player that allow me to upload and play MP3s. There should be two sides and a cross fader. Allow me to drag and upload songs to the playlist under each side. Show a playhead on the current song. Allow me to click the other side to crossfade and begin playing the next song. So, now that I have this, I believe, let me make sure I'm sharing my computer sound. So, I'm going to share my computer sound and I'm going to drag in. I have a couple of different tracks. So, I'm going to drag the tracks right in. And the thing that you'll notice is I just dragged MP3s off of my desktop and I placed it in here. So, these are uh little songs that I made. Um, when I click it, it'll analyze the audio and it'll generate the waveform for the audio. It tells me which deck is currently playing and then I can play it. Y'all hear it? So, when I press the enter key, it'll actually fade out the music. I press enter, it'll play it. And then I can and then I can cross fade it. — And so that way you can see that uh now if I want to switch tracks, right? So I can play it and it's playing this one. and it'll go back and play the other one. So, um I needed a way to like play this live and somebody was asking the question, can I take what I've made in Figma make back into design? So, there's this option up here in the righth hand corner, copy design.

### [33:43](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=2023s) Copy design from Figma Make to Figma Design

So, it's copying my design layers and it's copied that to my clipboard. And so, now when I go back to Figma, uh I can paste that design and it didn't do such a good job today. I feel like I am not having the best luck with Figma make today. It's doing some uh some weird things. Let me see. Maybe it does it have something to do with uh with my scaling here. I'm going to go back to a previous version. And I did make some edits to it today. It's got an error. Let's see. Update logo. Import statement. Update logo. Replace logo with new design. So I was making some like last minute changes last time I worked on this. And I could also fix the uh sometimes when you're working too, it'll like acknowledge that it sees like an issue and it'll go to fix it. But enable track scrolling. Users getting an error related to Tailwind. Let's check the current state of application. I like to read out loud the little errors, you know, get a sense of what it's doing. One other thing that you can do is you can also ask um like within the chat. So right now we're getting a lot of reasoning. Um so it says it like has found an issue. You can ask it to refactor. If something feels kind of slow, you can ask it to sort of like optimize that behavior. Um, also for those of you who want a your own copy of the DJ mixer in the file that we shared, you can click DJ mixer and you can get your own copy of it. And then we have one other little example here that I'm going to play through. Um, once again, apologies for some of the issues. I mean, this is kind of what happens when you, you know, you're like working on something uh that's a little bit more uh indeterminate. So, I just heard the little chime that means it was done. One of these things finished. Smoothing things out. I'm going to play my rocket ship game while that's going. So, let's go. All right. Cool. So, let's go back. So, can you keep prototyping a Figma file make file once it's been copied into a Figma design file? Uh, here I'll let's just try with this one really quick. So, I'm going to copy that design. And there's not a there's not a direct This actually worked great. Here we go. I was able to paste this one in. So, let's say I'm working with this social energy example and I go to another page like the dashboard page, right? I want to see this dashboard. I can copy that design. It told me the design is copied. Then we head back over here and uh when I paste, boom, energy dashboard design. Now, what's cool about this, I'm going to go into outline mode. So, if I press command K and I type in outline, show outlines, I can see the underlying layers and everything and it's structured, right? It's not just a photo of it. Let's exit outline mode. Um, and so all of this is editable here uh in Figma. And so, if I did want to make an update, you know, let's say I copy that like little heart. Uh, I should make it about the right size. Let's let's get my like little heart here. You know, let's say I'm over here. You know, I'm working here in Figma. Let's make that a little bit smaller. Let's just scale that down. Grab my little I got my little heart, you know, in here. Uh I press enter. Selects all of the children. I press delete. Or um I could just rightclick paste to replace. And I got three extra hearts. I didn't realize I was selecting all of it at the same time. I'm going to group that. Command G and then paste or replace. And boom, I got my little heart graphic right there. So, now that I have this, if I wanted to make an update, I'm going to like cross my fingers here that this is going to work the way that I expected because it has before. Here we go. We got our DJ player back. That's great. Um, so what I can do is I could say, you know, I could go back to the uh where's the homepage? There's the homepage. So, I could say update the homepage uh to look this. Oh, let's make a significant change. Yeah, let's come here, you know, like let's make some additional changes in Figma, you know, let's take that like linear, let's make it black, you know, let's uh you remove this background, right? And what I want you all to at least understand is that like yeah, it's like you're kind of riffing. You're working on your ideas. You're kind of changing things up. Let's uh change that like linear gradient in the back. Let's just go to all white. Uh and I don't want this. I don't know where that came from. That's gone. Right. Just made that go away. So I'm going to copy this. Command C. We're going to head back over to our social energy example and we're going to paste. say replace the homepage with this design. There we go. And we're going to press enter. And let's hope that works. I hope it's working. So, somebody was asking how long does the educational plan last. Um, you can renew it as long as you are still a student or an educator. So, when you verify as an educator, you'll get two years. When you verify as a student, you'll get a year. And then as that year comes up, you know, you still have access to your. edu account um when that education plan ends, you still have access to your files, but the team that you have um either needs to be upgraded to a pro team or you can move your files to like a starter team, but you won't lose access to your files. You just will lose access to some of the protier features that are granted on the edu team. So, uh, the files themselves, you can always move on to another team or another project. You can, uh, kind of have those like in your drafts. Um, so don't worry about that. Does undo controlz work directly on Figma make? Um, it depends on what you have selected. So, if you're within this like little window, um, oh, here we go. Look, we got our design updated. There we go. And look, it has the little heart and it has this heart. So using the context of the actual Figma design page has given us more agency in how it's then taken back into Figma make. So it kind of recognized all the differences. It got rid of the graphic. It updated the little heart there. It updated the heart there. And I still retain all of the other pages that I'm working with. So that has been like a really good output. So let's try our DJ player once again. I'm going to come up here to the right top hand corner. Choose copy design copy to clipboard and let's see how it does. Yeah, there we go. That looks great. So now once again uh when I select I could actually see right all of the individual objects are in here. So if I want to give it more structured changes, one of the things that I did when I initially worked on this, this started off as a dark mode application and um I realized that when I was performing live uh especially during the uh the day, I couldn't actually see the interface. So I needed like a light mode version of it. And so I then was able to kind of copy the design here. you know, I swapped out some of my colors and it provided me a better output overall. So, um, copy design, paste design is going to be one of those great ways that you can work with the most context between Figma design and Figma make as you're riffing on your prototypes. So one other thing that I wanted to uh highlight is that um I wanted to show you all that like in Figma you can still prototype your examples. This is a simple prototype that um I worked on uh with another developer just kind of like as an example to see uh how this would work where I have this graphic and I wanted to create a radial navigation. Right? So we have these graphics. You can see here in Figma uh we have the frame inside the frame you know there is a uh within here you can see we have the start state frame here you see that we have like the menu button we have all of the different items. Now, one thing that you can do to um add context as you're working as well is to come down here and choose uh annotations. So, this is going to be important if you are also doing other things like uh using MCP server uh to code your designs. So right now we're using Figma make as kind of like the way to use the context from Figma and the prompt to generate a design. Let's say you're working directly with MCP server cloud code and you want to provide additional context um that just kind of is carried with your design. you can create um like let's say here I want to create a animation animation uh label and uh let's choose that as animation and I can give it some additional context where I could say you know uh transitions um should be. 3 seconds um easing curve let's say if I want to think about you know this prototype and I have an easing curve that I'm using right um oops let's go here right so I have an easing bezier curve that is generating the start and the stop so it has an ease in and an ease out um and so let's say I could even take that bezier and put that as part of my annotation you know use a bezier easing curve with values. Right? So

### [44:53](https://www.youtube.com/watch?v=1lcWnSUKsIg&t=2693s) Annotations and Radial navigation example

you can put this annotation in here. If you're working with an engineer, that annotation, that context is going to work to provide context for any prototype that you create. I can use this to then generate an output. So the way that we had considered this was not only to create that radial navigation, but we also then prompted it to have different types, right? So we have like a snappy navigation, we have an elastic navigation, we have a slow normal navigation, right? We even have one that's randomized with how the items come in and out. So you can use Figma make uh not only as let me just change this from hello world right I just double click on that text why are you why you being weird Figma make um so I'm just going to say here like uh rotation example I don't know where it got that style from there we go it's working now so we have the rotation nav It's because it knows I'm going to live stream. It's just like I'm going to act up. I'm gonna make you look bad. Here we go. So, we got our rotation example. And this can then serve as like a degree of uh like iteration, right? You want to iterate on your design. You want to show multiple outputs. Uh so even here we see what are the important aspects of it. So the duration of the transition, how you might stagger the transition out, the easing curve that is provided with it and um we had Figma make provide additional suggestions. So then that way we could determine what might be the best way to uh kind of create that. So um here in Figma, I'm going to basically take that frame. I'm going to copy it and let's try and make a new make. And once again, you could just paste that frame right into Figma. And you could say, you know, create a radial navigation. Um, use the annotation provided in the frame. Um, give uh alternate alternate. You know what? I should just use my microphone. Alternative options, some that are more snappy, uh, an animation that's randomized, allow me to have at least four total options and preview on the radial navigation. title the page radial nav example. So we're going to use the context in Figma. We're going to take it into make, you know. Oops, it's still writing. And once again, the thing that I really want to encourage all to do is take a look at its rationale. often times when you see the rationale that's provided by Figma make it gives you insight in terms of what it's thinking how it's approaching it and then can help you craft better prompts to make those outputs a little bit better. All right, so we're going to let that cook for a little bit. Um, so I encourage you all within this file to take a look at those two examples. We have a um another workshop that we covered uh some of the Figma make examples. So right here getting started with Figma make for edu. Uh some of the examples there we kind of made some like 3D rotational graphics with SVGs. Uh and also I created an example where we made an analog clock. So check out some of those examples from those uh that previous workshop. But um as I mentioned before, you know, sometimes you just need to make a utility for yourself. Figma make is a good opportunity for that. Sometimes you want to test out an idea. Maybe you need to, you know, make a simple site. Uh sometimes you might want to just test an idea out uh to then find out like, oh, I need to make a product requirement stock. Maybe let me use Figma make to tease out what I might not know or tease out some of my own biases. Uh we made a little example. All right. So, the example's not great, right? But, you know, it's getting there. And we can see there's a there's an elastic version, there's a random version. The thing that I want y'all to recognize, too, is that it is indeterminate. So, sometimes you're going to get things that aren't quite right, and sometimes you need to go back into your Figma file and make adjustments as necessary because the way that it may be interpreting the output. So even here um I'll say you know try and match the original design as closely as possible. Um and then other things that you could do here. You could see that a lot of these graphics showed up absolutely fine. Um here in troubleshooting this what I might do is just go in and replace that graphic outright. But the thing to recognize is that it's not going to be perfect for you to understand what it is you're trying to do and to feel empowered to go in and make the changes that are required, you know, to change, right? So, it's going to do its best to use that context. It's going to interpret it as best as it can. Um, and it is going to take a few prompts and or uh direct edits on the canvas to make those uh edits and continue to change. So, that being said, I'm going to take a look and see if we have any questions. Can you replicate, remix an existing design collateral from Figma design into uh Figma make? So, yeah, any designs that you have, you could even use a published library um and include that. So I didn't demo that here but um if you go in you can use exported libraries from your team um as an initial context and you can also uh edit that uh guidelines file um to kind of uh interpret how things are going to work. So, uh, if you're at the point where you've already built a library in Figma, um, what you could do is in that library file, you get it ready for Figma make, there's going to be an option when you publish it. And then here you're going to have an option to, uh, use that existing library and in using this concept. In a further workshop, um, I'll cover how to make use of that. Uh, let's see here. All right. So, you can see that it's already starting to get closer, right? Right. It's recognizing, you know, the top and the bottom. So, what I might do then is then grab that graphic and change it there. But you can see that the progress is already made. Very rarely are you able to sort of like oneshot a design, but your design intent and uh what you're trying to do is going to matter greatly. So, you could see here that I need to tell it to put those objects from behind. So, you know, make sure objects um as they come out of the nav come from behind the original button, right? And then so that's going to cook. All right. Let's see. Uh if you realize you want to edit the prompt after entering it, uh can you stop the AI process so it doesn't waste credits? Um I don't know if it um how that works, but yeah, at any point you can stop a process. So uh if you realize that a process is going and you want to like keep it from continuing to um you know like work in that regards, you can hit that stop and that'll be acknowledged uh as you're producing it. So good question. Um is it possible to make wireframes in Figma make? Absolutely. You can tell it to use kind of like a wireframe style. Um, you can prompt Figma make. So, prompt it in terms of what you're trying to generate. I would argue like, you know, feel free for that initial prompt to give it as much context as possible. You could even kind of give it some uh examples from Figma uh proper to say, use this style of wireframe when creating a wireframed layout. Or you could even say, you know, give me a button to enter a wireframe mode. Um, so start to think about how you want to envision that as wireframes. So I have a website ready with animation and sections that are prototype, but every animation starts on click and we add that page into Figma and make it look real. So, and yeah, instead of having it be on click, I would just prompt it to say like on hover or, you know, like on mouse enter, you know, giving it uh u you know, providing those frames as necessary, but uh just be explicit with how you want those interactions uh to play out. Let's take a look here. Uh all right. Might still need to work on it a little bit more, but you know, I did wanted to show you that output. If you want to take a look here at how this was created, I'm going to actually go back to one of the original prompts. Uh just kind of show you that and we'll kind of close out for today. But I do want to thank you in advance for coming to our workshop. I really appreciate you all. So yeah, here what we said. We're making a navigation component using the main button to create a radial nav open and collapse animation. Items should fade in and out and come from behind the main button. See, that's what I should have said. I should have said come from behind the main button. When the nav is closed, the main button should scale down. When opening the nav, all the new nav items should come from behind the main button, fade in and rotate. So the things that you really want to do is you want to make sure that you articulate, you know, the very respective like the things that you want to do. So um if you're working on a file like this that may have certain guidelines, you know, feel free to, you know, write those out and then bring those in and then that way can be sort of better representative of the output that you're trying to create. Um, as mentioned, ways to get this out of Figma make is you can go into code. Uh, you can download that code, but you can also use a make as and use this with like MCP server to take this over into claw. Like you can use what is generated in the make for other applications. Uh, which is going to make the make all that much more powerful. So once again, thank y'all everybody for joining in today. I really appreciate you. Uh be sure to check out future monthly workshops uh with myself and Alex. Um hopefully I demystified some of these tools and uh enabled y'all to uh or encourage you all to uh go in and explore and try out some new things. So really appreciate y'all and as always, happy designing. — Awesome. Thank you so much, Mickey. In the chat right now, you are going to find a survey. We want to know what you thought about this workshop and want to learn about in the future workshops. So, I'm dropping that in right now. Thank you so much for your feedback. It gives Mickey and I a really good sense for what's going well here and what you'd want to see changed in the future. The other thing I'm going to drop into the chat is the RSVP link to future workshops. Shout out Ivy. Good to see you. So many friendly faces in this chat. I love seeing y'all month after month. Uh definitely join us for next month's workshop and again get that feedback in. We are so eager to hear from you. Megie, it looks like you have potentially a marriage proposal happening in the chat right in time for Valentine's Day. Took a screenshot. Marissa, thank you for the giggle. That was very funny. — Um awesome. Thank you so much everyone. And like I said, this will be recorded and posted to our YouTube. should be available to you in about a week. Thank you so much for everything and let's do this. — Thank you. I'm going to play out some music and close this out.

---
*Источник: https://ekstraktznaniy.ru/video/17763*