Overview & Roadmap
Hello. My name is Dan Rodney, and this is the introduction to Figma. Today we're going to get an introduction to Figma. We're going to discuss what Figma is and what it can and can't do. We're also going to talk about Figma pricing. A lot of people say Figma is free. There is a free plan, so we’re going to talk about whether you can get away with not paying for Figma. It's both a web app and a desktop app, so we’ll talk about the difference between those two things.
We’ll also be going over how to use Figma at a high level, focusing on how it works in general. In the time that we have, we can’t get into a super deep dive, but it will give you an overview of the basic capabilities and general workflow that you will use when designing things in Figma. We’ll also talk about how Figma compares to Adobe XD and Sketch, which are both competing apps. They are all fundamentally the same type of design apps, just made by three different companies. Finally, we’ll talk about ways to learn more.
For those that aren't familiar with us at Noble Desktop, we've been around for over 30 years and we do all sorts of design and code-related training, so Figma was right up our alley. It's one of the things that we teach along with Adobe XD and Sketch. A lot of people know how to use one of these apps or maybe they know how to use a couple of them, but I've actually used Sketch, Adobe XD, and Figma for many years. I've used Photoshop, I've used Fireworks Macromedia So I've used a lot of different design apps over the years. I'm actively using Figma, XD, and Sketch. Today we're going to be focusing on Figma and how it works.
Getting Started
There are a couple of things that I want to explain that are important about Figma’s setup and its approach to things. and the setup and just understanding its approach to things. A lot of tutorials skip over some of this stuff, so I think it's important before we dive into Figma to make sure that we understand certain terminology and how your accounts impact what you can do with Figma.
I will be showing you how Figma works inside the app, but there are some important things before we do that.
This presentation here is a web address. It is www.nobledesktop.com/presentation/figma and there's a link in the video description down below. When you're in this presentation, you can use your left or right arrow keys to go back and forth. If you're on a touchscreen device, you can also swipe left and right to advance the slides as well. These are interactive slides, so if there's a link, you can click on it and use your arrow keys to go back and forth. There are also little arrow buttons down here to go through these slides. This presentation will stay up and live so you can reference it in the future.
What is Figma?
It is for designing digital products, experiences, and graphics, so it is a UX and UI design tool; UX meaning User Experience and UI meaning User Interface. It can be used for app design and web design or any sort of digital products. If any of you are InDesign users, it's kind of InDesign is for prints and Figma or Adobe XD or Sketch any of these types of design apps would all be for designing digital things like digital graphics, digital products, and digital experiences.
And because Figma also has something called FigJam, which is newer, they will call the traditional Figma either Figma or Figma Design. This is to differentiate it from FigJam. FigJam is a newer product that is also made by Figma and it's for whiteboarding. I'm not going to be talking about that tonight. I'm going to be focusing on the traditional Figma or Figma Design part of things.
What Figma Can & Can’t Do
Figma is focused on digital stuff, so you can work on the look and the feel of websites, apps, and any other digital thing that you're developing. You can make working prototypes to show clients or developers how that design should work, how it should animate. It's the idea that you are designing, whether it's very loose design in wireframes, doing user experience design, doing very tight visuals for the UI design. That's the goal of what Figma can do.
One important thing to understand is that design apps like Figma, Adobe XD, and Sketch do not create a final website or app. That final website or app has got to be coded by a developer. I often see people mistakenly think that because they see it as responsive design, they're going to get a website out of Figma or XD or Sketch. And what you're going to get is a plan, a design for that website or app. You're not going to get a final thing. You can't publish it to the web and be done. You're going to need to get a developer involved.
Think of it as how an architect makes a design for a building. It then goes to the architectural engineer who makes sure that it'll function and draws up specific material plans. Then it goes to construction workers to build. It’s the same thing with a digital product. As designers, we design and plan the project, the experience, the website, or the app. Then we hand it off to a developer to actually bring that into reality and make a final website or final app.
While we're designing, the prototyping features in Figma are quite good, but they're not perfect.
They cannot create every single thing that you can possibly imagine. Figma is not a coding production tool. It is powerful and it can do a lot. All of these apps are quite powerful; Adobe XD can also do quite a bit of prototyping. None of them are perfect in the sense that they can't program or create any sort of interaction. They can create quite a few, but as long as we're close enough to show a client or a developer the idea of what our vision, plan, or design is, that's the goal.
We want to be able to convey our ideas to clients and developers as realistically as possible. But again, we're not actually building the app or building the website. So if Figma falls short and can't prototype a specific type of interaction, the goal is to get close. Think about it like storyboarding. When somebody makes a movie, they create a storyboard to show how a scene goes from shot to shot. Prototyping is the same type of thing. You could make up a storyboard if you can't actually prototype it yourself, but it's quite good.
Projects, Files, & Teams
Before we dive into the app, there are some terminologies that I want to make sure that we understand so that when we get into the app, we'll be able to make connections to some of these things. We’re going to talk about projects, files, and teams. All of this makes a difference in terms of permissions and how you organize things.
Projects
Projects are kind of like folders. They let you group files together in one place, but projects are only available in teams. You might say, “I don't care about that. Why does that matter?” Because your plan is based on teams. Let's say you have a free starter plan, your team gets one project. You're essentially creating a starter team in your free account, so you get one project and that project can only contain three files.
Files
You can have more files than that, which are called personal files. Those go into your drafts, but drafts can't be organized; they are literally in one folder called drafts. If you want to get organized, you're going to need paid team projects. Professional and Organizational teams are the paid plans. You can create as many projects (or folders) as you want, and in them, you can have as many files as you want.
Can you get away with a free starter plan? Potentially, but you're only going to get one project in your team. So the team contains a project and your project contains files, but you only get three files in a single project. So you're getting a little taste when you have the free plan, but you don’t get all the features with the free plan or Figma wouldn't make any money. They want some reason for you to upgrade to the paid plans.
Teams
Teams are pretty important because that's how you create and share your resources, and how you collaborate on your files and projects within a shared team workspace, assuming you're working with other people. Permissions impact how collaborators can interact with the multiple people in your team. On your starter plan or educational plan (both free options), you're going to have a team and the team's permission determines people's access to files on the paid plans.
They can assign roles. And rather than just having team-level permissions, you can assign roles to people and determine whether or not they can edit files. So you get more granular control on the Professional and Organizational paid plans than you do on the free plans. If you are a teacher or student, you can get a free plan and you get a lot of the features of Professional; you can create multiple projects and you can have unlimited files. So you do get a lot of stuff if you're on the Educational plan.
Educational plans are almost like the Professional plans, there is just a slight difference in the permissions that you have. If you want to learn more about these specific permissions, you can click “Figma’s Help” to learn more. Any of the colored text are links so you can click and it'll open up in a new window.
Figma Pricing: Is Figma Free?
Is Figma really free? There's a link here to their pricing, you can click on that. I'll talk about U.S. pricing, though it might be different for other countries. I'm not exactly sure.
Free Plan
Here's that free starter plan. This is really all centered around the teams that we were talking about earlier. This is where you get one project with three Figma files, unlimited personal files that are going to be in your drafts, and unlimited collaborators.
You can still work with other people, but just know that, while you have your three Figma files in your team, there are limitations on the files themselves. You get plug-ins, you get templates, and you get access to the mobile app with the free plan. It’s a great way to test the waters of Figma, but there are going to be a lot of people that will need to pay for a plan to get more features.
Paid Plans
The paid plans start at $12 per person, per month, assuming you're billing annually and committing to a year. If you pay, you get as many files as you want and as many projects as you want. You also get unlimited version history. Importantly, you also get sharing permissions on your files, which you don’t have with a free account. You also get team libraries, which is important for people that are working with others and need to share libraries across multiple people.
The pricing goes up from there. You can pay for even more stuff like organization-wide libraries, branching, and merging, and other additional things if you want. To summarize, the Free Starter plan gets you one single project and in that project, you get three files, but you get unlimited personal files, all unorganized sitting in a drafts folder.
The Professional plan gives you unlimited files, unlimited projects, unlimited version history, sharing permissions, team libraries: a lot of good stuff. A lot of people are going to need to pay for that. At an organizational level, you get everything in that plus organization-wide libraries, branching, merging, and some other features as well.
Which is Best for You?
Hopefully, by now you've gotten the idea of whether the Figma starter plan will work for you. It's certainly good for some people. It depends on your needs, especially if you are an independent person that doesn't need organization too much. Remember, in a team, you only get one project. I wish you could organize your drafts into folders, but you can't.
Basically, if you need to organize your files because you have a lot of them, you need to set sharing permissions, or share team libraries, you're going to need to have a paid plan. You can always get started with a free plan and see if you need those features. If you do, you can always upgrade at that point.
Comparison to Other Apps
In terms of pricing and comparing Figma to its competitors out there, Sketch is $9 a month (again, these are all US prices). Adobe XD is $9.99, basically $10 per month. If you already are a Creative Cloud member, Adobe XD would be no extra charge at all because you're already a member. Figma is $12 a month, assuming that the free plan isn't good enough, which for some people it would be. They all have similar pricing, but there is a few dollars a month difference between them.
Figma is a Web App
This makes Figma fundamentally different than all the other apps because Sketch and Adobe XD are desktop apps that you must install. Figma requires a constant internet connection and all your files live on Figma servers. You can download copies, but you cannot work on those local copies. If you ever want to edit them, you can re-upload them, but they must be living on Sigma's servers to be worked on.
The only reason to download files would be to make a backup of something if you don't trust Figma’s servers. What if Figma did get hacked? Any of these companies can get hacked, so if you did want to back up your work, you can download local copies to keep as a backup. If the Figma website goes down, you can't work on them or edit them. You can potentially go through a conversion site to convert them to a different file type, but generally, you've got to have internet and all of your files live online. In most cases, this is not a problem.
Just keep in mind that without the Internet, you cannot create a file, you cannot open a file, you do not have an app when you don't have internet. You might be wondering what happens if a file is open and you lose internet access? You can keep working. The changes are saved in your browser and supposedly, even if you closed the file, the changes will resync to the website when the website goes up again. I haven't tested that out because it hasn't been a problem for me.
Basically, if you don't have Internet and you try to launch Figma you won’t be able to create files or open them because they need an Internet connection to work. Some companies, like pharmaceutical companies and legal companies, have rules and regulations that can be a bit of an issue because they need to store files on their servers. Those industries are probably going to have to come around somehow because all of these apps are going online. Hopefully, those industries will change with the times, but it’s just something to keep in mind.
Benefits of Being a Web App
One of the biggest benefits is you don't have to install anything. You can simply log in to the website. You do not have to install an app unless you need local fonts, and I’ll talk about that with the desktop app in just a second. You do get access to all the Google fonts, but you don't have access to local fonts unless you install something. For the most part, you can just go to Figma.com, log in, and start working with nothing to install, which makes it nice and easy.
Also, when you're working, you get to see what other people are doing in real time. This works like Google Docs because files are auto-saved and updated. You can see their cursors as you're working. The idea of live, co-editing at the same time was a revolutionary thing for office documents; Figma does the same type of thing but for design.
Web App vs. Desktop App
When I talk about the web app, it's just the website (Figma.com) versus a desktop app. They do have a desktop app, and here's a link that you can click to go download the desktop app for Mac or PC. I would highly recommend installing the desktop app because it does make the experience nicer, but you don't technically have to install it. All features work in both the web app and the desktop app; functionally speaking, it is the exact same thing.
The desktop app is essentially a full-screen browser for the most part, and they’re very similar. There are only a few minor differences, but for the most part, they're the same. The biggest challenge with the web app is that it cannot access local fonts unless you install something. You need to either install the desktop app or they have a font service. So, if you don't want to go through and install the full desktop app, you could install a font service, which gives the website access to your local fonts.
I can't imagine why somebody would be against installing the desktop app, but they'd be okay with installing the font service. For me, the desktop app is definitely nicer, so that's how I prefer to use it. To get access to your local fonts, you have to install either the full-fledged desktop app, which comes with the font service. If you want a lighter install, you can install Figma’s font service which gives you access to local fonts through Figma.com.
There are a few areas where the desktop app is nicer, so I’ll point some of these things out.
When you're doing things like exporting graphics in a browser, it's just going to zip them up and throw them into your downloads folder. You won't be able to choose where you save them, and you have to unzip them because you're going to be downloading multiple files. With the desktop app, you get to choose where you're saving them. You don't have to unzip them because it doesn't have to zip them up for a download.
Also in the desktop app, you automatically get multiple tabs for each file. While you could do that in a browser, you would have to manually open up a new tab and go to the app. It's just an automatic thing in the desktop app. It's fundamentally very similar, but there are some things that are a little bit nicer. If you can go with the desktop app, I would definitely advise it. Functionally speaking, you're going to be able to do all the same things in the web app and the desktop app.
Intro to Using Figma (Designing & Prototyping)
Let me jump in and show you how Figma actually works. I want to show you both the web app and the desktop app so you can see some of the differences. I just went to Figma.com and logged in. Once you go to the website, this is what you see. This is your home screen, and over here on the left, you've got these drafts. Drafts are where all of your unlimited personal files go.
On the left further down, this is where your teams are. If you have a free team, you'll have just one team and one project underneath it. If you have a Professional plan, or in my case, I have the Educational plan, I can create a new project, give it a name, and I can have as many of those projects as I want under my team.
In another browser, I’m already signed in with the free account. Here's my free account, and I already have one project. If I try to create another project, it says, “You're already on the free plan and you have one project, which is the maximum on the starter plan. Please upgrade to create multiple projects.”
Also on this free plan, when I have my team project selected over here on the right, I can see I already have my three Figma files. In this project, I can only have three files. So you’re just given a taste of what you can do with projects in your team. All your files are going to be stored in drafts. Just imagine that in your drafts are all of the files that you ever create, unorganized, just sitting in there; that's what you'd experience.
You can organize it by a list view, but it's going to be unorganized there. They’re encouraging you to get the more expensive plan, which is not surprising. By the way, there is a search. You can search for your stuff there, but you have to remember the name of the file. You're not going to get folders there unless you pay for the Professional plan.
There are a couple more differences between the website and the desktop app I want to highlight. Here I've got the desktop app. I'm going to go ahead and open that and you'll notice that these look exactly identical. This is basically a full-screen browser. Here are the subtle differences between the desktop app and the website.
Right here are my drafts, so I can go ahead and create a new design file. This is why I said sometimes they call it “designs” as opposed to a “Figma Jam file.” You can also import files from Sketch, and it says “Import files from Figma” as well. You might be wondering, “Why would I import a Figma file if I'm in Figma?” That's if you download a file. If you export a local copy and you want to re-upload it, that's how you would open up one. But that's not normally what you're going to do. Normally, you're going to share it with other people and they're going to get invited to that.
If I create a new design file here, then this loads. Now I'm in the app, and whether I'm in the desktop app or in the web app, the interface is going to look exactly the same. The only difference is these tabs. Here, I always have a home tab that I can go back to, and I keep that tab open for the file. So if I want to create another file, I can open yet another file. I can have multiple open without having to manually choose to open up multiple tabs. If I ever want to go back to that home screen, I click the home button. So it's nice that they automatically make these tabs in the Figma desktop app.
If you're using the website, notice there's a Figma menu over here that's a little different than what you see here. There's a little extra something here when you go into this main menu, and that's “back to files.” Because I don't have multiple tabs open here, how do I get back to my home screen? I have to go into the Figma menu and I have to go “back to files.”
Once you're in a file, you're in that file there and there's not a home button. But you can click on the Figma menu and go back to your files. In the desktop app, they don't have that “back to files” because you click the home button. For the most part, these are almost exactly the same, except for these minor differences that you quickly get used to. It's nice to have that automatic home button there all the time, and that you can keep all these different files open at the same time without having to create a browser tab for it.
Of course, you can always create a new browser tab for it. Hit either Command +T on a Mac or CTRL+T in Windows and go to Figma.com. Here I am in the app, so I still have this file open and I can browse other files and open those. You can always make those tabs yourself, but in the desktop app, you get it done automatically for you; it’s just a little bit nicer of an experience. Because of that, I will be using the desktop app. Fundamentally, once you're looking at the app itself, it's going to be the same.
As I'm ready to start to create stuff in this file, Figma has these things called Frames. Other apps will call them artboards, but Figma calls them Frames. Frames are for the artboard, but they can also be used for things inside of artboards, not just artboards. It's not exactly fair to say that Frames are exactly like artboards, because you can do other things besides just using them as artboards.
A Frame is going to be a container where you’re going to put your design. I'm going to click on that Fame tool on the right. Then we'll see this sidebar open up with some different options.
Now we're in the design tab right here, and you can see a bunch of different common sizes.It depends on what you want to create here. Let's say you want to create a phone, here are a bunch of common phone sizes.
I'm going to click on one phone size here. When you're done, it always goes back to the move tool, which is a normal pointer selection tool. If you want to create another frame or artboard, you can click on that button again, insert another one, and start to use the various tools to draw on them. I can grab a rectangle, for example, and start to draw.
Each time you choose one of these things that you want to create, notice how it keeps switching back to the selection tool. This is different than Adobe Apps, where you have to keep going back to the selection tool. Here, it’s automatic; once you're done with something, it always goes back to your selection tool.
You can hold your spacebar to scroll around in your design app. Figma doesn’t have scroll bars, so you need to use your spacebar to do that. You can come up here and choose the hand tool, but the spacebar is much easier to use. I'm going to click on these things and delete those. In fact, I'm going to delete this artboard.
Files are automatically saved as you work, so you don't need to worry about saving any of your files. In terms of naming, right up here is your file name. Notice this is saved into drafts as “Untitled.” I can click on that name and give this a name. This is going to be for “4A Cafe,” and that's now my file name and it's stored in drafts.
If I click on drafts, I can move it to a different project and if I want to create a new one, I can come over here to my team and click the new project button and I'll call this my “4A Cafe Design.” Now, anybody in my team can edit that. Or I could say that other people on my team could only view it. Or maybe I only want to give certain people access to it by inviting them. For now, I’ll let anybody on my team be able to edit, which means they can view and edit the project.
Now I have that project in my team and I can choose to move it there. Now it's in the “4A Cafe Design” and this is called “4A Cafe.” Just so we can see where that got stored, we can go back to Home. Notice, I now have my team with my project in here and I can see that file there. I can double click on it, open it, and now I'm back in. Saving is done automatically for you; you don’t have to worry about that.
I can name this “Phone” so it's not iPhone-specific branding, and I can start to design in here. If I want to import a graphic, we've got different shapes here. If I click on the arrow, I can see different things that I can insert, vector shapes that I can draw. I can also place images in here; I can drag and drop, or I can choose to place an image.
I'm going to go to my desktop where I have some files for my 4A Cafe. I've got some logos here, and I’ll select the one that I want. For vectors, you can import things like SVG (Scalable Vector Graphics). For photos, you can import things like JPEGs and PNGs. Figma is not going to support the Adobe Native file types if you're used to Adobe apps. But, you can save as an SVG, JPEG, or PNG. Those are all standard graphic formats that you can bring in. I'm going to click on this SVG here to bring it in.
This is actually been brought in as a frame. Sometimes when you import things, they come in as frames rather than groups. And frames have slightly different properties than groups. I'm going to switch over to a group. How do I know it was brought in as a frame? First of all, over here you can see a frame, but over here in my layers panel, I see the little icon for frame, which is that little hashtag. When I switch over to group, notice the little dashed outline there. In that group, there are a bunch of different vector shapes. If I double-click to go into that group, I can manipulate the things that are in that group.
You can also undo those things, which brings me to the menus. If you're on a Mac in a desktop app, you have all the normal menus that you would expect. But when you're on a PC or in the web app, you don't have that menu bar. So how does it work there? Let me switch back to Firefox here.
Let's say you're designing in the web app here. If you’re in Firefox, Chrome, or whatever browser you prefer, you're going to get your normal browser features. The menu for Figma is this menu over here. You can click on that and that's where you get your file menu, your edit menu, all that good stuff. On Windows, you always have to go over here, even in the desktop app. All web app users also have to go into the menu over here. Only Mac users in the Figma desktop app get access to these top-level menus.
I don't know why they didn't implement those on Windows. They could have, surely, but for some reason, they didn't. If you are using the desktop app, even on a Mac, you can still go over here and get the standard menu that you would see on Windows or in the web app. I like that on the Mac, you don't require an extra click to get into these. For instance, I could just click on objects instead of having to click here to get to objects.
That might not sound like a big deal, but being able to save a click, at least for Mac users, is another advantage of using the desktop app. Like I said, everything works in the web app and on Windows. The desktop app has some subtle things that make it nicer. Functionally speaking, you can still do all the same things on the website.
Now I'm going to double click to go into that group, select the things that are down below here, and delete those. I want this top part and I will call this “Logo.” This is a vector shape, so I can size it all I want. I just need to make sure I hold shift to not distort it. I'll pop that up here in the middle and center it. There are smart guides that will help you center, but you can also use your alignment buttons over here.
If you only have one thing selected, you'll be going to your artboard rather than aligning to some other objects; when you only have one thing, what else are you going to align to? It's going to be your artboard. I'll put that on the top of the middle there, and I'm going to go back and insert one more image. This time I'm going to place a photo in, so I’ll go into the location photos to find the photo that I want to bring in.
I'm going to drag to size that. So when I drag, it sizes the image, and it's going to do this cool cropping here. The idea behind this is that whatever shape you're defining, whether you want it to be tall or wide, you probably want to fill that whole area, right? You probably don't want it to be some other aspect ratio; the whole point of you making your image a specific aspect ratio is probably because you want it to be that way.
That's the default, but there are ways you can change that. I actually want this to be behind the logo, so I'm going to go over my layers and drag that below. You can reorder things here in your layers panel, and then I can resize this and make it look nice for the top part. That looks good.
I'm not going to build this entire website here, but I want to show you a couple of features. We can bring in our graphics, we can add text by going up here to my type tool. One of the things people would want to see is the menu. I'm not going to put the menu on this page, I'm going to make another page with the menu. I'm going to click here, type out the word menu, and on the right, I can go to my text options.
When you go into this font menu, you're going to have access to all the free Google fonts. If you're not familiar with Google Fonts, when you go to fonts.google.com, there are a lot of fonts available for you to use and these are all free. Lots of designers are currently using these, so you might already be familiar with those. You get access to all of those built into the Figma web app and desktop app no matter what.
To get access to your local fonts, you would need to either be using the desktop app or have that font service installed. Otherwise, you will have all of the Google fonts. There are a lot of fonts in this menu, even if you don't have that font service installed because you will get access to all the Google fonts. I'm going to center this so that when I make this text bigger, it stays under there. We’ll stick with that font and make that just a little bit smaller.
Let's say I want to create another screen. I want to talk high level here about the overall workflow. I'm not going to do super deep dives into each particular area, but I want to talk about the bigger workflow. You're going to design different artboards, one after another. Instead of just calling this “Phone,” I could call this “Home” because that's my home page. Then I'd want to have another one so I'd duplicate that by going to edit, then duplicate.
Keep in mind that these top-level menus are only available on the Mac desktop app. If you're not using a Mac or the desktop app and you’re using Windows or the web app, you’ll have to go into the Figma menu, then go to edit to find your edit menu. Now I’ll click duplicate to duplicate that artboard. Sorry, “frame,” as they call it. I'm so used to all the other apps calling them artboards, so forgive me if I say “artboard.” Figma officially calls them frames.
I'm going to call this “Menu” and this is actually going to be the menu. On the menu, I don't think we need this super large photo. As I pull that up, you see how it keeps scaling it. This isn’t exactly what I want to do. I'm going to Command+Z or CTRL+Z to undo that. Under fill, there are different ways to treat images. Right now, this is set so that this image is a fill on this rectangle.
Essentially you created a rectangle, and that rectangle could have a color fill. I could switch this over to be a solid color if I wanted to. Or it can have an image, like I just had. Let me command Z to undo. It’s an image fill, which happened automatically because I brought in the image, but I don't want it to fill that whole area. I want to do a crop.
By switching over to crop, I can pull this up. I don't want to actually distort the photo there, I want to double click there. I thought it was already set to that. When you have it set to crop as opposed to fill, you can see these extra little handles. This is where you can crop your photo. Just make sure you hold shift, or grab the container. Now you're cropping it rather than it scaling automatically. As long as it's set to fill, it's going to do that automatic scaling like we saw in the first version. Once you set something to crop, when you double click you can manipulate the photo inside the box, or you can manipulate the box itself.
I'm going to bring that up and crop that because I like that look. I'll keep some of that up. This is more like “Go to menu,” and this is the actual menu page. When I'm building the menu page, I might want to have two columns. Maybe I want to have little photos with words underneath.
When I'm designing, I can select my artboard. Then over here on the right, I can create these things called layout grids.
Layout grids are a design grid. I can hover over here and click the plus, then I can choose which kind of grid I want. I don't want this graph paper-style grid. In this case, I want columns. I don't care so much about the rows, I want to do columns in this case. For me, I want to do two columns; this color is fine. Although if I was doing a pink design page, I might need to change that to some other color that doesn't interfere with my design.
This is for me to see temporarily. I can turn them on and off over here, and if I want some outer amounts there, I can put this as being centered and give this a specific width. I’ll use my up arrow keys here to go one pixel at a time; Shift + arrow goes ten pixels at a time. I can create some border or a buffer of space and have it centered on the page, so it's all on the outside.
The idea being that there's a gutter on the inside and then there's this thickness for each of those columns. Then whatever space is left over is the space that's outside on the outer edges. I'm fine with 25 gutter in between, and maybe 145. That looks good to me. In the future, I can turn that layout grid on and off. I could do so by coming over here and doing that. The idea is that, once you have that on, you should be using the view setting to turn that on and off.
Layout grids are up here. Any layout grids that you have active, when you turn them on and off using this menu item, they will come on and off. Be careful of the keyboard shortcuts. Because Figma is a web app, it will probably use different keyboard shortcuts than you’re used to typically using. For example, on a Mac, we don't always use control. We’re used to using “command.” This little up arrow on the Mac, that is control.
So, it’s CTRL+G as in grid. Not command, not shift– control. These might be slightly different keyboard shortcuts than you're used to. Things like zooming to fit is Shift+1. Not command, not control, just Shift + 1. They'll use shift with keyboard shortcuts without using things like control, alt, command, option, or any of those. They’ll just use shift with things.
I've never seen other apps do that, but that's because it's a web app. Even though you might have the desktop app installed, they're not going to change keyboard shortcuts between the web app and the desktop app. It would be weird to use two different sets of keyboard shortcuts. Just keep in mind that the keyboard shortcuts might be a little bit different from the keys that you use when compared to your normal desktop app experience with Adobe Apps or Microsoft Apps.
Now I've got this grid that I can design on, and I'm going to place a couple of photos in here. So I'm going to place in some food photos. Let's say I grab in some artichoke. It takes a moment to upload that photo and drag it in there. By default, this is doing that scaling, like so. There we go. And I'm going to insert another image here. This one will be the arugula pizza. There you go. Draw that one and size that up there.
As I'm doing this, I do not need to be holding shift because as long as this is set to fill, it's always doing so proportionately. I don't have to worry about distorting that photo that's in there.
I could add some text down below that. Once I'm done, if I don't want to see that grid anymore, I can go into the view and turn off my ayout grids and I could see the final result.
Now, you go through your design, you add text, photos, and design the whole thing to make it look nice. In terms of workflow, what are you going to do next? It might be nice to give somebody a walkthrough so they can click on something and go to the next page. That is the prototyping. We've got design, prototype, inspect– the three steps of your workflow, if you will.
I've got my design, let's say that's done. I go to prototype. For the prototype, I had chosen an iPhone 13 mini when I originally created these artboards here, so that's already been set. If you don't like the midnight color and you like pink or something, you can even choose different colors there. Your design is going to appear in the preview of this, so you're actually going to see it and you can change the background color for what that's going to be on depending on your design.
In the prototype mode, I can select things and I've got this new little blue circle over here.
That was not there in design mode, but it's there in prototype mode. I can grab that little circle and when I hover over, it turns into a plus. I can drag that to the board that I want to go to.
When I tap, it will navigate to the menu page. Right now it'll just do it instantly, although there are some different animations that you can do.
Let's have it slide in, that will be kind of cool. You can hover over the preview there to see how that animates from the right. I like that, we'll say that's good. So that's the interaction that I just added, right? If I ever select this again, I can see that the interaction is there and I can always click on that to open up the interaction details. When I'm in the prototype tab, I can see those, but when I go back to design, notice how they go away until I go back to prototype.
Right now, this is called “Flow 1.” I can give that a name. This could be my normal “walk-through.” Okay, now I want to see this. I know it's not super exciting to just go to one screen, but let's see it. There's a preview button up here. They call it “present,” so I'm going to present this.
In the desktop app, that's going to open up a new tab. In the web app, it will either open up a new tab or potentially a window depending on the browser that you're using.
So here I go, and I can click on that. Look at that! It does a little animation. If I want to restart and go back to the beginning, there is a restart button down here, or I can hit R for restart to go back to the beginning and try it again. Notice that this is an iPhone and I did not accommodate for the top bar where there's normally the time and a battery display.
I can keep this design open. Even in the web app, if you have another browser tab or another window your design is opened up in, you can always keep that open because it will live refresh. This is connected to your design. If you do anything on your design, like changing your font because maybe you didn't like that design, when you go back, that's going to instantly change.
Any change you make, let's say you're just going to set the font back to something simple like Arial, then that's going to automatically update.
What was I going to do? The status bar, right. Another thing I could do if I don't want to put in a status bar and deal with this quickly, I can go back over here to my design, back to the prototype. Instead of doing an iPhone that's got the notch, I could switch back to an iPhone with the same width, so 375. The old iPhone8 is also 375. It's a little shorter, but the iPhone eight didn't have the notch. I could also choose that, and you can choose which style you like here. When I come back now, you'll see that it's in the iPhone8 style. Now you see it doesn't deal with the notch.
Of course, you can always put in some artwork for the notch, but I just wanted to show you that now I have an artboard that's too tall. It has to scroll up and down because you're going to have content that, of course, is too big. As this artboard gets taller, you will have to swipe down or scroll down to get to that access content that comes down below. You can also use your left and right arrow keys when you're in this preview as well.
Just to show you the web app experience, since not all of you will be using the desktop app, I'm going to come back over here. In this case, I'm in Safari and I'm logged into the same account. That means I still have access to my team, my project, and my file in my project. I can double-click on it and open it up. I can actually have this open in both the web browser and the desktop app.
Now I actually get to see myself twice. Hey, if you ever wanted to clone yourself, this is the way to digitally clone yourself. Here in the web app itself, if I ever want to go to “Present” in Safari, they block the pop-up window. You’ll have to click on this little button and that will open up the window. They're going to open up in a separate window and you have to not block that; you have to choose to unblock it. In most of the browsers it opens up in a different tab, but I just wanted to point that out if any of you are Safari users. Just a slightly different experience there.
Let me switch back here. So I have designed something, I've prototyped something, and now I'm ready to share it with someone. When I'm in this present mode, which if I had ever closed it and came back here, I can go to this present button again to open it up again. In here, I want to share this prototype. Up here at the top, I can “Share Prototype.” If I want to invite specific people to this, I can put in their emails here.
I could say “only people that I invite,” or I could just let anybody with the link. I can also choose, can anybody with the link edit? Can anybody with the link just view it? Can they view only the prototype, not the file itself? In this case, I'll just let anybody view the file, so they can view the file or the prototype. I'm going to copy that link, and this makes it easy in this case because anybody with a link can view it. A client or a developer could go to this link in a browser.
Here in Chrome, I can go to Figma.com I am not currently logged in in this browser here, so I'm going to paste that link. This is something you could email to a client. I'm not logged in and notice how it even says “log in or create an account.” Here, I'm kind of the anonymous person. I can go through, I can work with this and interact with it, which is pretty cool that people can go in and experience that.
If they log in to an existing account or they create an account, which can be a free account, then they can add comments. For example, if I go to “add a comment,” to be able to comment, they have to have an account. Again, it can be a free account, but they do have to have an account to be able to comment. I could even sign in with a Google account if they don't want to remember a username and password. It does make it pretty easy for clients to collaborate with you.
By forcing clients to log in either with a Google account or to create a new one, you would know who they are and you'll know who's leaving comments. If they do log in, they can they can leave comments there. The cool thing about comments is they'll actually be integrated into your experience. You can even write comments yourself to either other team members or to clients.
For example, you can say, “What do you think of this font?” Then other people will be able to see that particular comment
In terms of workflow, you design, you prototype, and then you share. These files live in Figma, so when I close it, that file is going to be there. In this case, in my team under a project so that other people would have access to it. I gave everybody access to this project in my team. If I have other team members, they can go in and they can work on this and we can all work at the same time. You see the cursor moving around and you'd see all the people up here that are currently working in the file. You get to see them working, you get to see them doing stuff. It's a pretty cool experience. If you've ever worked on Google Docs, it’s a pretty similar experience to that.
In terms of using Figma, that's the general workflow at a high level of what it does. Obviously, there are a lot more features of what it can do. Let me go back to my presentation and talk about a couple of other things.
Figma vs. Adobe XD & Sketch
Sketch is a Mac-only app while Adobe XD and Figma both work on Mac and PC. Figma even works on Linux because it works in a browser, so you can use it on more platforms. That's one thing that could be an issue. Even though a lot of designers use Mac, there are some companies that use Windows. So XD and Figma both work on both platforms.
Figma only works online. Files must be stored online. For some industries, that can be a problem. For most industries, it’ll be fine, but Adobe XD and Sketch let you choose to work locally or online. There are going to be more things that work online, and for some features, you have to have Internet. You have to share online, and more features are requiring internet more. But Adobe XD and Sketch let you store your files locally and work locally if you want to. That is a choice, whereas with Figma it's not.
If you work somewhere where you don't always have internet, if you're on planes or trains that don't have a good internet connection, in that case, XD and Sketch are better than Figma. Figma does require you to always be on the internet, which for a lot of people that's not a problem, but just something to keep in mind.
Sketch does not have a free plan. They have a 30-day trial, but they don't have a long-term free plan. Adobe XD does have a free plan, which they call the Starter Version. They do really hide it, so this link takes you to it. If you just go to the Adobe XD website, it’s kind of hard to see it, but you can get it for free with the starter plan. Like Figma, there are limitations. You can't do everything. All these companies do need to make money, so they're going to put limitations on their free plans. It has its own specific set of limitations, but there is some free plan that you could get started with to try Adobe XD if you wanted to
I mentioned this earlier, but Sketch is the cheapest. Not by a lot, but by a couple of dollars a month. Then Adobe XD, and then Figma being the most expensive if you have to go with a paid plan. For some people, the free plan might be good enough depending on their needs, but for some people, they're going to have to pay. Especially for those at companies, they're going to be paying. It's not a big price difference, only a $3/month spread between them. But it's a little bit of a difference.
Sketch has the most limited prototyping features. Early on, Sketch leaned on other supporting apps like Envision to do prototyping, so they did not build prototyping and animation features in until very late. They've only added basic prototyping, whereas Adobe XD and Figma both have very strong prototyping and animation features, so they are both much stronger when it comes to prototyping. Sketch is strong on the visual design side, but not very strong on the prototyping side. I'm hoping that, as time goes on, they will be adding more prototyping features but currently, they've only introduced basic prototyping features.
In terms of files that you can open, Adobe XD can open up the most. In Adobe XD, they want everybody to come to them, so you can open up Sketch files, Photoshop files, and Illustrator files. You can open almost any type of file. They knew that they were late to the game, so they wanted everybody to switch to them by making it as easy as possible to switch from other design apps. Figma also wants you to switch from Sketch, so they can open up Sketch files and Sketch can only open up Sketch files; they can't open up any other kind of file.
Unsurprisingly, Adobe XD integrates better with Photoshop, Illustrator, and even After Effects. You can send your designs over to After Effects to animate. So that's not surprising; it’s an Adobe app, what do you expect?
Figma had an early lead in terms of online collaboration, but since then Adobe XD and Sketch have added online collaboration as well. On the Figma website, when you look at Figma compared to Adobe XD and Sketch, they throw some shade on their online collaboration features. They're like, it has to sync and it's not as fast. They all have different online collaboration features and they work well in Sketch and Adobe XD.
There is one comment they make that is valid. When you're working with comments, they are integrated into Figma so that when you're in Figma, you get to see the comments directly in the app as you saw, but in Adobe XD and Sketch, they're only on the website. They're not integrated into the apps themselves. You always have to go to the link; you have to leave the app to see your comments. In that one sense, they're not quite as integrated, but they do have the online collaboration features. That’s important, especially as more people are working from home. You can collaborate online with any of these apps.
In terms of the job market, this is something that's fluctuating. For those of you watching this around the time of recording, it's true now. I don't know what the job market's going to be like six months from now or a year from now, but at the moment, we currently see more UX/UI jobs asking for Figma and Sketch than Adobe XD. In terms of features, I'm going to say that Figma and Adobe XD are the most complete. Sketch doesn't have as many features, but in terms of the job market, I see more jobs requiring Figma and Sketch.
I think XD was a bit late, so I don't know if that tide is going to be coming and more people are going to start using Adobe XD as time goes on and they get used to it. It just hurt Adobe that they were later to the game, so naturally, Sketch was the first big one, and then came Figma. So there are still a lot of jobs that are asking for Sketch because it was one of the first apps that started this wave.
Conclusion
I know there are lots of other subtle differences here and there, but I just wanted to give you a big picture of how Figma measures up to Adobe XD and Sketch. In conclusion, all of these design apps are good. They're all certainly stronger than doing digital design for websites and apps, for example, in Illustrator or Photoshop, because there are a lot of features that these apps have that Photoshop and Illustrator don't have.
Do I create graphics sometimes in those apps? Sure. But in terms of websites and apps, the design experience of what you can do in these apps are so much better. The collaboration, the workflow of design, prototype, share. That workflow, which is common to all of them, is non-existent in something like Photoshop or Illustrator.
Sketch did get a head start and there are a lot of people using it, but Figma and XD are definitely leading in terms of features. I definitely see a lot of jobs now asking for Figma. I'm not sure what's going to happen with XD because Adobe's always innovating. Every month or two, they're putting out pretty big updates. The good thing for me, I think, is that there's real competition in this industry. Any one of these companies having a monopoly is not good. It's good to see all of these companies vying for our attention as designers, all wanting us to use their apps, because they're just going to keep adding more features.
All of these apps are still relative newcomers. When you think about it, Photoshop has been out for more than 30 years and I think Sketch maybe came out about ten years ago, but it didn't catch on and start to become mainstream for several years. These are all kind of like toddlers, if you will. There are still a lot of features that I would love to see added to these apps, but they just keep getting better and better.
On a monthly basis, we're seeing updates from all of these apps, so I'm definitely excited to see these apps continue to develop and add more features as the months go on. I hope this has given you a good idea of what Figma can do in in your workflow.
Learn More with Noble Desktop
There are ways that you can learn more if you want to learn more with us. Our classes are live interactive classes, they’re hands-on classes where you'll see both demonstration and you'll get access to practice things yourself.
We have a Figma Bootcamp, which is a two-day class if you're taking it during the day. If you're taking that at night, it would be for two weeks. We actually have one coming up for anybody watching this in the near future here, but you can always look at all the upcoming dates and see. Sometimes we'll have them on Monday and Wednesday nights or we'll have them on Monday and Tuesday during the day just depending on the schedule. They’re the same amount of hours and you’ll get the same amount of learning in both of them. You can check that out if you want to learn more details about Figma.
We also have bigger certificate programs too. That Figma Bootcamp is incorporated in a certificate program. Whether you're learning UX and UI, just UX, or just UI which we call visual design, you can learn these as part of the Visual Design Certificate as well. There are definitely ways you can learn more with us and we hope to see you in a future class. I hope this has been enjoyable and that you've been able to learn some from this. Thank you all for attending.
The link to this presentation is down in the video description below, but again it's nobledesktop.com/presentation/figma. Thanks again, and I hope this has all been useful for you.
