How to Create Your NFT art on Figma - Complete Guide

Most NFT artists use procreate, but Nolan uses Figma to make his NFT art. In this video, he walks through the steps he takes to setup a generative NFT project in Figma. Using Components and then Variants inside the components, you can layer traits together and see live previews of how certain Traits will combine together. Doing this early on will save you lots of time by realizing early that traits are not going to work with the layering.

What's up everyone. I'm Nolan with Rad collab. And today we're going to talk about creating a generative NFT project inside of Figma. Now, a lot of artists use procreate is they're able to use a pen and do hand drawn layers, but I've always considered myself as much a designer as an artist. What was using a mouse and a keyboard for my art and using Figma components and variants makes it so easy to work with layering and planning out new trait types.I'm going to walk through what I did over on stranded unicorn. So you can see how I use variants and then use duplicate components. When I make new trait types, then we're going to go into my strain of box art file and create components out of all of the trait types we have so far, and then maybe make a few variants to show you how I rig everything up.So let's go, but first, if you haven't already make sure you like and subscribe, because I'm going to make a lot of content like this. If you're an artist looking to get into. Oh, you're a budding creator who wants to make a community. We've got a lot of content coming around the production of NFTs and the ethos behind how to make an FTS.See, we're trying to raise the bar of NMT projects. There's a lot of people out there, cash grabbing, and I know you can do better and we can all do a lot better. So come along with me, make sure you like and subscribe. Okay. Let's dive in. Let's talk about why I use fear Mo. 4 4, 4, 4 figSo this is my art file for the unicorns character. It's a mess. I know, but it's controlled chaos. So we've got 15 trait types, right. And everything is layered on top of each other inside of different components. So basically each trait type has its own layer. So we've got Pegasus wings, which is the. Which is the bottom most layer.We've got different variants on each of those. So because I've rigged up the variance like this, we can simply select it from a dropdown. All of the different trait types. See each one has a component. So these are the horns and inside of there, we've got a variant. There was a moment where I thought I was going to make different colors as the.But I ended up not doing that. However, over on the strand of bots, I think we're going to need to, so I've already done a little bit of the layer rigging, but I'm going to take an early version of the character and break it down into layers so you can see my process. So let's open this layer up so we can see here that this is the module layer.So let's, let's take all of these layers and turn them into components. So this is the head, but inside of the head, there's a lot of different variants. So there's this screen. There's each of these eyes and actually, yeah, that's poorly grouped already. So we're gonna have to do a little bit of work here, but let's dive in.So let's rename this to head. We're going to want to be really clean about our file because this component's going to get reused everywhere. So, okay. So on the head, we've got these eyes, so I'm going to group together these four eyes and I'm going to make a component out of them. Now here's the thing is if you make a, if you right click.And press create component is going to make a component around the perfectly sized area of this layer. That's that's not what we want. If you hold command or control and drag out after creating this component, it makes it so that you can size the layer to the entire frame. This is really important to do because when you go export all of your layers, they need to be the same size so that they can be laid on top of each other.So we've got eyes here. We'll rename this to eyes and we'll drag this off of the file. That way we have a clean version out here. That's separate from the file and we don't need to be operating inside of that. This is really important later on when we make a lot of variance. So what I do now is copy this so you can right.Click and copy, or you can just press command C and then we're going to paste that inside. And so right away, you can see here that this is the master component, because it's this. But then right here, it's not a master component. It's just this square. It's a copy of the master component. This is really important because whatever we do now in here, it updates up top.And my daughter screaming work from home lifestyle. Anybody else? Anybody else out there with a crying baby while you're watching this video, make sure you like and subscribe if you are all right. Hopefully we're through that. So we've got eyes set up now. Let's see what we got here. Okay. This looks like it's the ears layers.So I'm going to group that actually. No, I'm going to put it inside of a frame so you can right click. And where is it? Frame selection. So that is command option G for short cuts. And now we have that in a frame over here. We can rename that frame to ears. And again, we're going to hold command organic. And we're going to drag them out so that it's sized differently.Now, if you're not holding commander control, this is what happens. You see lonelier moves with you. So if you hold command control, it's going to allow you to resize the frame without moving the elements inside. All right, we're going to drag this off. We're going to press right click and create component or command option.K command option K creates a component. You can see it. It's a master component here. Boom. So again, I'm going to copy that. I'm going to piece it inside and because it's size correctly to the layer, it's going to fit perfectly on top of the eyes. Here we go. What's next? We've got the screen. Perfect. Again, gonna command control, command option G size it out.I'm just going to start going really fast. You guys can catch up later.Okay. Okay. That feels good. So we've got all of our layers set up and we are ready to dive into various. On them. So one thing that I'd like to do is clean, keep this stuff really clean because we're going to be making a lot of different layer variants on all of these, right on the mouths we could end up having about 20 miles if, if we're doing our job.Right. So what we need to do is set them up sort of like w what I did over on the unicorns. Right. Each one layered out separately. Um, and you know, you'll earn bonus points if you do it in layer order as well. Cause you know, as you make ears, you're going to find that they need to be on top or behind the eyes to make it look right and layering.So we'll figure that out as we go. But either way, one really quick tip that I like to do is auto layout. Everything as much as I can. Uh, so auto layout you can do by hitting shift a or right-click and we're shift a shift, a add auto layout shift, a boom. So I put over here as a show direction down that way it all is going down.So that cleans it up. We can ungroup that by pressing command shift G and now we've got everything broken out and cleaned up. You can also keep that in auto layout, if you like. I like to break it out after. So the next thing that we do is hit on each of these trait types and we hit over here on the variants.We press the add button. Okay. So we'll just call this antenna to sorry, antenna to, again, we're going to auto lay out this by hitting shift a and now we have it going right to words and we can make them a spaced out as we want to give us some more. I'm going to go do that to all of the other ones. Okay.Okay. We've got everything. Auto layout. We've got two variants for each and now let's go make our base layers. You can see that I already did that in the module, basically without the module. There is no module. Here we go. I think the antenna is going to have a base layer. Yeah, maybe not. Yeah. Let's just strip it down.Uh, I think for the eyes we'll make it so that there's only one eye on the base.It feels pretty good. Uh, I think for ears, we'll just have no ears for the base layer. Now notice that on the side I'm doing the base layer. Um, I'm making a set. The base layer is always, uh, empty, uh, or sorry, I'm making a set of the base layer is always on the. Left most is the best. Yeah. Robots don't need a mouth.Nice. We're getting super stripped down on this. Ah, look at that. That feels like an empty robot and we want it to feel empty because if it has traced, it should feel like it has traits. But it needs an eye. You, you need an eye though, for sure. Okay. What's next? So let's talk about properties now. I ended up deciding to make it, so that way there is going to be an amount of eyes and that's going to have a rarity to it, but each eye amount is going to have the same traits.Right. So well, so you can see on the final character that I got over. I've got, uh, um, for the eyes. I've got it set up. So that way there's laser eyes for a single eye, a double eye, triple quad and multi right. Like surgical. Let's go set that up. So what I'm first going to do is I'm going to move it, move it down so that way, uh, each row or sorry.No, yeah, yeah. Let's do it this way. Yes, no, I was right. Yes. We're gonna make it down. So that way each, uh, each. Sorry, each property is going to be another row. Um, so right, because this is a property, right? The modules, and they're only gonna have one property. And that is if it's, if it's variant one or two, but this one's going to have eyes 1, 2, 3, 4, or it's going to have trait 1, 2, 3, 4.So what I, what you need to do at that point is break out the auto layout. And that way you can add more variants to this, cause you can't really have. Auto layouts with an orderly outs on the variance. It doesn't let you do that. So, uh, just keep it clean for yourself by, um, as much as you can because, uh, you're going to have a lot of traits and you're going to want them to all fit well with each other.So, um, here we go. So we've got properties. We want to add a new property. So the main property is trait, uh, variant, and then the new property is I count. So we'll make the default, I count. Uh, the default, uh, trade is a default. And then, yeah, so you can see that it kind of like auto named all of these. So we're going to have to clean that up a little bit.So what we'll do here is I count for a default. So now what this allows us to do is over here on the eyes, we now have two downs. We've got the default, which, uh, let's just, you know, make these as red or something. So we'll make all these little eye holes red. So over here now we select our eye layer. We can move it to red and we can make it one or four.Right. And so it keeps the different variants on top of each other like this. So you want to make a row for each one and that's how we'll, that's how you can do multiple properties on the same layer. And that's how you get something like that. The next thing I want to show you is how I set up a master component of the character as a whole.That way you can reuse different layering when you're making new trait types. Basically when you have a lot of traits near each other, you want to make sure that there's no overlap on from one layer to the next. And in order to confirm that you need to take your most annoying trait variant and use them in different ways while you're making the new layers that might interfere.Let me show you what I'm saying. So over on the unicorns, you might've noticed these three little guys over here. So this is the, my master, uh, character component. Um, and these are variants or these are the same copies of those. But inside of that, you can update like this horn to have the holographic horn and it doesn't mess with this.It allows you to also, when you go here, click here and do reset all overrides, which we'll take it back to the herbalist corn, but let's say that we're making a mouth trades, right? So. With the mouth. We know that we're going to have to worry about the chin. We're gonna have to worry about the nose. And so, so that's, what we're going to do is each copy of these characters is going to have its own combination of other layers.So for instance, like the nose will have a dangle of the galaxy. Uh, this one, uh, we already had the galaxy knows, but let's just make something like super hard to work with. Uh, yeah. Cool. We'll just put the rhino, no rhino horn nose and then this one. We'll do, uh, yeah, the horseshoe. Septums good for, for the chin.We'll put, uh, that one for this chin. We'll put, let's say, uh, the Norse beard for this one. We put the cruel mustache. No, yeah, that's good. So we have a lot of variants around the mouth area. And so this frees us up to. We'll go find the mounds and we'll take it inside of the main character, right? Because we haven't updated or overrided this mouth.So this is gonna allow us to on the main character, we can switch over to this new trait and see the effect over here. Oh, it looks like this one is overridden. So we'll just reset that. So now what I do is drag this over and I start working on the layer this way so I can see how it plays. With the UC, like this covers up too much of the beards.So we want to like tighten that up a little bit. Um, see if we had it going up this way. It would mess with the note, the nostrils, which the nostrils have to overlay on top of the mouth. Um, so in order to like dangle on top of the mouth, right? So we can't have. Be above these nostrils or it's going to mess everything up while you're working on a new variant.It allows you to see the different layering, uh, options that you're going to have to work within. And sometimes it's just gonna be so hard to work with. And, you know, earlier than you need to you'll know when you need to cut a tree. There's been so many times where I get into the mix and I start making a really cool new trait.And then I realize that it's not going to work with like four of the trait variance that I've already got set up. This allows you to save time and prepare better, to make better layering systems. Also a way to make it easier on yourself is lower the amount of trait types. And I mentioned that in my previous video about planning a generative NFT project.So make sure you check that one out. So I hope you got some great insight about how I set up my. And Figma. I think that the component and variant system is so useful for generative NFT projects, but let me know your opinion. Would you ever make an NFT project inside of Figma or are you a procreate person?If you got anything out of this video, please let me know that I'm doing a good job by liking it subscribing. We're trying to raise the bar when it comes to creating an T projects. There's so much junk out there and you and I, we can do better. See you on the next one. Bye now. Bye. Yes.

Tyler Perkins

Head of Operations, RadCollab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non ex ultricies, eleifend ipsum bibendum, ornare neque. Curabitur semper enim dolor, in accumsan neque fermentum ut. Nullam facilisis sollicitudin arcu, et egestas velit lobortis gravida. Mauris ac nulla accumsan.

Nolan Perkins

Head of Creative, RadCollab

Nolan has been a designer, artist, and editor for over a decade. In the past few years has learned the power of marketing through building a community on TikTok focused on hyper-transparency and building with the community, not for the community.

Similar Posts

StrandedVerse Links