What is Figma?

- [Instructor] To start this course, I wanted to take a look at a generic UX design workflow and see how Figma fits into that workflow. I also wanna discuss the Figma feature set and mention just a few things that set Figma apart or that might be a little different, and also show a bunch of the current tools that compete with Figma for your projects. So let's dive in and answer what is Figma. Let's start by looking at a generic UX design workflow. Now, UX stands for user experience design, and it's something that a lot of us have heard of these days and may be actually doing it.

But user experience design is a little different from just straight up web or app design. It really means that we're diving into the customer, what they need, their pain points. We're figuring out who they are. We're doing a lot of things like research, different types of research, that is. We're creating what are called personas to find out who that generic customer is. We're also creating user flows, which basically means how they go through the app or how they go through the website to get from point A to point B. We're taking all that information and then we're starting to wireframe.

We're creating low-fidelity wireframes, which are usually, like, gray boxes and text and things like that, where we don't care about imagery, colors, fonts, or full-fledged designs for both. Then we're creating a working prototype. We're trying to figure out, okay, before we build this widget, maybe an app, maybe a website, how can we make it to where people can test it out on device, they can tap on a button and go to another screen, for instance, and actually get a feel for how it's gonna work. We can then share it with people, test it, gather feedback, and then start to iterate or change, make changes based on the feedback we receive.

And finally we're gonna go out and build. Now this is really generic. Depending on your project, your company, whatever, there could be a lot of other points in here. Figma actually fits squarely right in here, so it's gonna allow us to go in and design, wireframe if we want, low-fidelity or high-fidelity, create a prototype right within Figma, share it, test feedback, gather that feedback, and then iterate, keep going. Now I just wanted to mention that there are a lotta tools out there for designing, prototyping, sharing, essentially UX design.

We do have Figma. We have Adobe XD, which really does a lot of this, as well. We have Sketch, we've got InVision, Proto.io, Marvel, and just so many more to even count. But I just wanted to make you aware that there are a lot out there. Figma is just one tool that we can use. Figma actually calls itself a collaborative interface design tool. Now what does that mean? It just means that people are using it for UX design, for websites, for apps, that type of thing, but we can share it, we can create a prototype right within the tool.

Now you can if you want in there, like I said, create a UX/UI design. You can work with components, which are actually called symbols in a lotta applications. You can apply effects like drop shadows, different things like that, blurs. In Figma, artboards are called frames, and you'll learn that pretty quickly. There are also pages we'll discuss. We have the ability to look at or work with versioning to version our content so we can go back in time if we don't like a version of something. We also have vector networks, which are just a different way to draw. You'll see. It's pretty cool, actually.

We can share in real-time collaboration, which is pretty impressive, honestly. You can see different people looking at it at the same time as you right within the project. We have team projects and sharing different content. We have commenting in real time. We have prototyping, and we also have code. You can look at and copy code from certain features or objects within the prototype or the design. So with a basic understanding of what Figma is, let's jump in.