Figma Design Class Part 3

Welcome to our session today, which is going to be on Figma plugins, commenting, prototyping. It’ll be a fun session. We have a little bit of creation project to work on together as a group today. A little bit of preface before we walk into this stuff.

I just want to get a poll of everyone attending here. Are you familiar with Figma? Have you used Figma before? Just so I kind of understand how deep or surface level to go. So if you have you, if you use Figma, can I see like a hand raise? And if you don’t it’s okay. Totally okay.

Okay. Got it. It’s like 50, 50. Okay, cool. So awesome. So here, let me pull up Figma. So Figma itself is a really, really amazing application. What we’ll do is let me share this link, send it over through our chat so everyone can open it up. And then when you open it up, you can play with it.

Yeah. You’ll have so much fun. And we also have Figma tutorials too. So if you go into our YouTube channel, you can definitely check out some of our really, really introductory crash course files or crash course videos where we talk about the structure of the document and how to edit it. And so what I like everyone to do, first of all, is here.

You’ll see these different pages on your tab. What you’d want to do is just right click the main document, duplicate the page, and then duplicate it and just write your name on it. So you’ll have a page that’s just for you. You can do whatever you want as you follow along our tutorial today, and you don’t have to worry too much about it.

Yeah. Awesome. Yeah. Cool. I’ll give everyone a second or two. And while you do that again, it’s going to be in the left pane here. If you can’t see it, sometimes you might, sometimes the pages are like this. You might have to just drag down this panel below to show the layers here. Yep. Duplicate it and just name it as your name.

And that’s just going to be your little canvas for today. You can play around. Yeah. And just to preface a little bit about Figma and where it is in the entire ecosystem of design software, it came out of the rise of web design and the simplicity of web design as a movement. From this really complex, a lot of gifs, a lot of huge images to more clean, efficient design. And along with that, we’ve seen a lot of the tools like Photoshop/illustrator, just unable to get some of these projects done really quickly and also really efficiently as well. And so Sketch really was the big mover and shaker back in the day when I first came out. Along with Sketch there were some other applications like Omnigraffle and stuff, but they, they were good brainstorming tools, but not really great design software.

But sketch came out and Figma came out as a competitor of Sketch to provide all the different offerings that Sketch had, but also a layer of collaboration. So what you see right now, as we’re all in the document together, right? You’ve probably have noticed a bunch of people’s names and a bunch of arrows. This was a feature that was launched recently with Sketch, and they just were able to launch Sketch Cloud, but up until then, they weren’t able to do that.

So really what Figma is doing to design software industry is kind of what Google did with Google docs, Google sheets, to Word and Excel at the time. And so we’re seeing a huge emergence of all these collaboration features, where you can work together.

Plugins
—

But for today, what we’re going to talk about are a few things. We’re going to talk a little bit about plugin features. What are they. What we can use, how to power our designing and a little bit about prototyping as a functionality, and then a little bit about some collaboration features. They have cool. It’s going to be a little jumping all over the place today.

So bear with me. Okay, cool. So today we’re going to talk a little bit about the community tab here. So if you just go to your home screen here right on Figma, and you’re able to go to community here, this section of Figma, you should be able to see all the different files, all the different attributes.

If you’re on web, are you able to just click into this from the top? Does it work on the web version?

I just put the link in the chat that has the community link. So you should be able to get through it from your browser.

Okay. Awesome. Thanks Kenny. So the community side, this one’s really, really cool with Figma. Particularly because not only can we get plugins that add additional functionality to the software, but we can collaborate with other people making design documentations and files as well. But what we really enjoy first, we’ll go through some of the additional plugins to really help our design and highly recommend you to check them all out when you have the opportunity to do so. Just to kind of break down some sections of the page. Here at the top, you can search for all the different features.

You can either search for companies and creators, which is interesting and start following them. You can start following tags. Those are different document types. And then you could search also for document names. So some really interesting tip, you can just search. If you’re working on a particular project in the community tab to see if anybody has created something similar to what you might be working on.

And. The benefit of using plugins, which is really cool, is to simplify some of the workflow. So especially in design, I’m sure as you’ve created documents, you’ve maybe have done a lot of redundant things over and over, right? At least for myself, for example, getting stock photos or getting lorem ipsum texts often on Chrome and grabbing the stuff, jumping back into the software and then back and forth to fill in the content.

We actually have plugins to expedite that process. We also have some plugins that actually provide you with additional wireframes and free resources, which is really awesome. And then you can collaborate with other folks as well. And so a couple of tips for you as far as plugins go. My recommendation is first starting with most popular plugins, which is really great.

So if you’re in the community tab, if you go into this fourth row and you click browse all plugins, this should expand out the most popular plugins. Generally, whenever I searched for plugins for applications, I like to start here particularly because you have a huge community of folks who’ve already verified.

Yes, this is a great plugin I like to use. But sometimes. Work is in the case where plugins get outdated. So you might have one that’s really popular, but let’s say a developer doesn’t support it anymore. You might have a high download count, but it’s broken. So just be cautious if you use it, it’s not working.

And developers haven’t worked. If you look at this last updated, right. For example, and you see something like, like a year or two years ago, for example, it may work or it may not work. We’ll go over the shortcuts in a second. And then the third tip is to edit your lists of plugins regularly. So, it’s really easy to go shopping and go crazy and add everything, but just understand that if you blow up your Figma, it may slow down the performance overall.

And so what I was sharing are just some of the features that I just, I really love and enjoy with some of the plugins that will help you with your. So a couple of ones, the first one is Unsplash. So depending on where you are, if you’re in the community tab, what I’d like for you to do is click this install link here, right?

Or if you go to plugins, if you have the application Figma installed on your computer, you can actually go here, browse, plugins, and community, and it should open up plugins for you. And then you can install Unsplash. Basically. Copy this link, copy link. I can copy this link. Cool. Okay. So as we jumped back into here, the really great thing about Unsplash is that it provides us with free stock photos.

So if we just make a square rectangle, so for those of you who are new, just hit the letter R and then just drag and create a box. And then once you’ve hit it, there’s two ways you can access a plugin. You can either go to the top plugin here and then click on Unsplash here and then see all these different images that pop up.

Or if you’re on a Mac and if you have the application installed, it’s just command forward slash now you can just type in on splash and then target the plugin from there. Does this work on the web version perhaps? Oh, you need the, oh no. Right here. Yeah. So if you’re on the web version, if you just click the letter F here, you should be able to see the plugins you’ve installed from here, which is awesome.

You could just design straight from your browser. Yeah. And you just want to click Unsplash. Cool. Yeah. And so what’s really great is once you have it. All you have to do is you can either just drag it and then draw. You can’t do that anymore. Actually, if you just click here and then click insert image is you’re automatically insert the image into the boxes you’ve made.

Also what’s really cool is if you have multiple boxes, 1, 2, 3, 4, 5, 6, are they cool? You can do that. You can do presets here as a tab. If you right click anywhere on the canvas on the window you can access plugins. Ah, yes. Awesome. Smart. You can actually click a group here in the presets and automatically grab that theme of the images.

Really cool. Right. So if you’re creating user profiles or anything that is dealing with the list, you can also, again, highlight all of them. And if you want to change it, you can click portrait here. And all of a sudden you have all the images populate and fill in.

Unsplash photos are free to use commercially plus I don’t believe attribution is needed, so you can actually use this and ship the products and it’s okay. Which is awesome.

Is everyone following?

Yes. And let me zoom through the other plugins and everyone can have, yeah. The presentation too. You can use as a resource. But what I’d like to get to is the prototype section. So the next one is Lorem Ipsum. This is a really great one. So if you’re also back in this list. Lorem ipsum is another one that if you install it here, oopsies,

and then copy link. This one’s really cool where if you have a bunch of texts or if you don’t have texts at all. So if you’re on the computer, you just push T you can actually start typing. You can actually open up lorem ipsum and then it generates lorem ipsum copy for your ready. Great copy. So I’m generally hunting these down through the web, but with this plugin, you can generate gigantic texts of Greek copy as placeholder, which is awesome.

The next one is content reel. So here we have a video and just to kind of show you what this is, but this is another plug-in to definitely check out, which is really cool. Similar to Unsplash it’s more than photos, but you can also have texts, you can have dates. You can have names, you can have all different types of content, which is really awesome.

And what’s really cool is if you select multiple pieces of text, you can use content reel to then, populate all the names, dates, et cetera there.

Cool. I’m gonna go through this. Everyone will have access to recording after feel free to play around. But I definitely want to spend our time on the prototyping because that one will be much more hands-on I think, and then we don’t use these plugins specifically. But these are some of our favorites that we like.

The next one is one called Mapsicle. So this one is one where you can actually install Google maps directly into the, yeah, I can share it.

So this one, you can install maps directly into your document and you can actually have different settings to customize the size of it, how much you want to zoom. So you don’t have to go in pecking in Google maps. Also, what I’ve noticed is if you’re on Google maps, you also bring up your Google maps, which has your favorites, your hearts, and everything.

And sometimes I have to open an incognito to get rid of all of that. The next one is charts. This one’s a really interesting one that we like that. Yeah, I don’t wanna play this where we can put in a bunch of data and we can actually generate a chart really quickly without having to open up Excel, sheets, whatever it is.

And so you can actually edit and manage charts and the data points directly within Figma, which is really great. So in the instance, you have to edit things. You can just edit some of the properties and this one’s called Charts.

And then the last one just to highlight, which is really interesting is this plugin called Wireframe that actually provides preset wireframes of specific pages to use, which is crazy.

Right. If you download wire frame in terms of like pages for like log-in page, account, page, blog templates, all of it wireframes are all provided for you already. So, especially for folks who are diving into UX, it was kind of a little cheat to at least help get you started. Interesting. There’ll be templates and everything for you.

Yeah. And all you do is you just, it’s similar to Unsplash you just either drag it out content really easy to use. Cool. Any questions there. So that was just highlighting some of the plugins highly recommend for everyone to check those out and see which one helps you in your workflow.

And then just one more thing with collaboration. This one is a really interesting feature, which is the game changer, which is really interesting. So if you go into your document, right, let’s all just go into the you can all go into my document right now with my name. So if you go to pages here on the left and then you just scroll and then you just go to my name.

Yep, absolutely. You see right where everyone’s mouse is, which is really cool. Right? So the first thing I’ll show you is this feature where you can follow people. So if you actually look on the upper right-hand corner, right, you see. All the people’s icons and you see my face, or if you don’t, you actually can click the plus 14 and just click the one that has my face on it with my emoji.

Yeah. And so you can actually just follow me in my screen. Do you see that? So if you haven’t yet go to pages, click on my name and then once you’re there, or you don’t even have to do that, you can actually just click my, a picture from the top anywhere you are. And it should jump automatically to where I am and where I’m scrolling so I can zoom in zoom out.

And so this is a really amazing tool where if, for example, we’re collaborating and you’re showing someone your designs, but let’s say zoom or your presentation is just not working. You can actually use this to have someone follow you. At their own leisure. And what’s also really great about this is someone can follow you and see exactly what you’re doing.

And then at any moment they can scroll away and they can break out into their own flow. And if they want, they can just click on anyone else’s name as well. So feel free to right now, just for fun, if you just want to click someone random, follow their mouths and see where they are at, which is really cool.

Right?

Yeah. Really cool. And so you jumped all around the document. Yeah. Awesome. Cool. And the next part is the commenting feature. So this one is really great. At the very top here. You’d have all these icons, right? You have this icon at the end, that looks like a speech bubble. And if you hit it, it opens up commenting mode.

Alternatively, you can just hit the letter C with your keyboard to turn on the commenting mode. And this one’s really great that in the sense that you can add comments directly on objects and Figma. And so right now I just want you to just write a comment and just write, whatever you’d wish feel free to do it on my board, your board, wherever you feel comfortable and, or just do it on my board.

Yeah. Just feel free to ruin it. Here and then post it. Yep. Yep. So really cool. This is another great feature where if you’re collaborating with folks, you can add comments, designs, documents, and then populates all on the right side here and feel free right now. In the comment mode, click on somebody else’s comment and then feel free to reply back into it.

Yeah. Oh, awesome. Yep. Yes.

Cool. And some features here, which are really great. If you’ve typed a comment, written anything you can actually go and edit and delete, so you can always modify it. The check mark here is for completing comments. So let’s say you have a lot of comments in the system and people have updated design documents.

If you just click the check mark, it would just all disappear. Yeah. So feel free on your comment thread to click the check mark, and then you can close out your comment and disappears. And if you actually want to see all of them, you can actually go in the right tab here. Yep. And then you can go select only yours, all or show resolved comments.

So in case you’ve resolved something and you’re like, ah, shucks, let me pull it back. If you just go here, all show resolved comments, you should be able to pull all the comments back. So a really great way to help organize potential to do lists items and you have to work on as well. Yeah. Great feature.

Right. Let’s see, what else would the collaboration and what’s really great about the collaboration with a little pin marker is that it stays with the design objects themselves. So, hi, my big recommendation is just make sure when you hit the commenting tool, when you have this little marker that you put it on an art board, right?

So as I enter an art board here, you can see that it highlights, right? And then I hit the comment and I add the comment. And so whenever I move this frame, it will always move with me, which is amazing. So just be wary of putting the comment into the void. In that instance, it’s not attached to anything.

And so if somebody shifts and moves around our boards, then. They might have, they might lose track of where it’s located. Yeah, really cool. Right. Let’s see. And also there’s the @ feature, so you can actually @ and you can tag people who are in the document who you’ve collaborated with, and this should automatically send them an email notification.

So in the instance you’ve commented something and you might, I think that they didn’t see it immediately. You can actually add somebody and write their name and then they should show up. Yeah. Cool. Awesome. Cool. Cool. And then here, next to all, you can control your notifications as well. Okay. So I would say those are the strongest collaboration features that I can give you as tips.

Now let’s go into prototyping. Any questions on the commenting stuff? Collaboration. It’s pretty straightforward

thinking our board. Yeah. Yeah. James. So it’s just when I’m in the commenting mode, right. Do you see how, as I move between artboards, some artboards are highlighted in blue. Do you see this right? So when it highlights in blue, and then I place a comment, the comment is actually getting placed and anchored with the document.

Right? So when I click here and I add a comment and I click post. Then as I moved this art board, let’s say over here, and I go back into comment mode. Do you see the comments stays with my object? So just make sure when you’re placing the comments that it’s highlighting the frame in blue. Now you can actually see it also on the left.

Do you see this choose topic right here? Turn blue as the commenting feature highlights and hovers over the object. Yeah. Cool. Any other questions?

Awesome. Cool. Let’s see. We won’t go over the basics of the design particularly because we have another tutorial based on it. But what we didn’t go over in the last session was the way you can prototype, which is really cool. So going into the prototype mode here, so on the right pane, we have three different modes, right?

We have design, prototype, and inspect. So the design tab, when it’s like that, as I click on any file, right? These are all the different attributes related to designing. You can edit the margins, colors, shadows, whatever you, whatever, a design elements that exist, that you want to add, subtract, whatever it is.

Right. But if you go into the prototype mode, this completely changes the mode that you’re in and while you’re in this mode, this is where you’re creating a a click through model of whatever you’ve created as a design. So prototyping is a really great way of we’re creating applications, websites, whatever it is to create a almost lifelike scenario that we can visualize and see how it works.

Yeah. So it’ll totally make sense. Let me just walk through really quickly what it looks like. In the prototype mode, we have all these different drop-downs right. So device is what type of frame you want to put this at? Right? So typically you want to choose a frame that’s going to fit with the different design documents that you’ve created. So here I’ve created mobile comps, right. And it’ll work best with the frame and you’ll see why in a second. But if you created something for apple watch, you’d want to select that iPad mini or another tablet. You want to select that as well. But what’s really interesting is also you can have custom sizes or presentation.

And what I’ve seen as a trend too, in the industry, people have been using Figma for creating presentations that they use the designs. And so what they do is they’ll create designs and they’ll make them into objects that can be reuse and repurpose, and it links all the different properties. Right. And then they’ll have design slides that they’re creating in Figma.

And then what they’ll do is they’ll click play. And then when you click play, they’ll showcase what it looks like. And I’ll hit that in a sec. The model here, this is just adjusting the color of the frames. So in your layer, so in your documents, I want everyone to go into your own prototype and then feel free to select one of the phones and then adjust one of the models.

Yep. And you should be able to see a preview of what it would look like. Yep. Make sure you’re in your layer. And then background. This adjusts, the background color of our presentation. So typically use black, particularly because on black it makes our designs pop, especially when we’re working with white screens.

When we use white everything just bleeds together, but sometimes I’ve seen people use dark gray, particularly because dark gray allows dark phones to pop against the frame. Yeah. So feel free to change the background actually to whatever color you like, like your prototype. Yeah. And then flows.

I’ll explain in a second what they are. First, let me just delete the flows just in case so I can start over from you. Cool. And prototyping is really interesting. And the fact that we can start linking pages together. Yeah. But before we start linking pages together, I want to just show you what it looks like.

Cool. So at the very top, you should see this play button, right? Click the play button. Once you’ve selected your phone, the model, the background color, you should see a screen that pops up, right. That looks like this. It probably chose a random screen. Yeah. And it just does that by default, because if you haven’t set it, there needs to be a screen to start, but what’s really great is first it puts all the no, it didn’t for me.

Cause it’s not connected. Cause there’s one connection. Okay. One sec. So if you didn’t connect any of the screens, technically, actually, no, nevermind.

Technical difficulties. So what you should see is a screen, right? That has an iPhone frame, that background we chose. And this is really great, especially when we’re presenting something, an example to someone, right. Once I close out of this, I can actually go in. I want you to change the phone. Let’s do a Google pixel two and then click the play.

Right. So now you see a different phone that is set up altogether. Cool. Yeah. Super cool. Right. And so what’s really great. Here is you can present it to people. You can also record the prototype, right? Like a share, and then you have a prototype video file you can share to people. And what I will also note is you’ll see up here, it says, share prototype.

So the link that is generated here, if you click copy link, Is a completely different link than the Figma file. So if we go back to Figma here and we click share and we copy this link, that link will send people to this document. Yeah. Alternatively, if you’re in the play mode, the visualization mode, if you click share prototype here and click copy link, this will send a link for people to get to this page.

Yeah, really cool. And you can go into different points of your experience and then share that link and it should send them specifically to that page. Yeah. Awesome. So let’s go back to our screen now, any questions so far? So that was just talking a little bit about the panel there and then moving into the prototype mode. Works for everyone?

Yeah. Straightforward. Yeah. Cool. So what I’d like everyone to do is now as you enter the prototype mode, you should be able to click on artboards. Right. And if you’re having trouble clicking artboards and you accidentally click these items, you can either select the name of the art board here to select the whole art board.

Or if you select one of the objects inside of it, if you just hit Esc or, sorry. Nevermind. You hit the command-enter…

Okay. Nevermind. Sorry. I don’t remember the keyboard command.

Hmm. Okay. Nevermind. Just click the art board name. I’ll probably remember it in a second. And what you see are these dots, right? These dots, they resemble How do I say this? The dots basically help link pages together, right? So what you can do is you just hover over the dot and then you pull out an arrow and then you pull it into the next screen there.

Yeah. So what this means is, Hey, on any of this page, I want you to take an action, and then go to this page. Right? And then what you’ll notice is on the right here, an interaction module pops up here. It says interaction, details, blah, blah, blah, blah, all these things. And what this means is these are all the properties that is providing you to get from point a to point B.

And so what it’s saying is on tap, meaning if I tap that object, which was the whole page, then navigate to Sign In. Yeah. You can actually change this to many different functionalities on drag. So that means I have to drag something on the page. On hover means when I move the mouse to hover over it, then it will go to that page.

So there’s all these different triggers, right. Actions that I take that will take me to a destination. Yep. Yep, absolutely. Yeah. And you can have the button go to the page. Yeah. So on the first one, I want you to just have the whole page go to it. Yup. And on the second page on the sign in, I want you to click the log in and then drag that arrow onto this page.

Yeah. And generally when you drag an arrow, you don’t drag it to an individual object. You just drag it to a whole page, right? Because the screen usually shifts into that whole page unless you’re working with individual pieces and it will hover and shift buttons, such as like hover states where the page itself doesn’t change, then just like individual elements.

But generally you select pages to push people into a destination. Yeah. Cool. And then for animation here, feel free to select any animation you’d want. Smart animate is kind of like magic move on keynote, where it tries to move the objects intelligently based on if it exists in the previous document. My advice is sometimes when you do it, it doesn’t look so great.

And so if you want more precision, you may have to go and adjust to yourself. But if you just do dissolve, that usually looks really good. Or for an application, usually a slide in slide out, move in, move out, also make it look really authentic too. And so do that. And so with that, I’ll give everyone a few minutes, just go in, feel free to add arrows to the rest of the screen yeah.

Of the first flow. So feel free to just have them all go, linearly, if you want, I’ll give everyone a few minutes or if you want to be more precise and make certain buttons go to specific pages, go right on ahead. Yeah. And you’ll start to see a bunch of arrows starting to pop up. And what is great is once you select an art board, right.

You can see all the arrows associated with it and you can also manage the arrows by clicking on them and then deleting them, if you want to, or editing them. So here I have two arrows, right? One going from the whole page, one going from the button. I want the button, not the whole page. And so I’ll delete that one.

So feel free to do that.

If you want to be precise, you can look at where on the page. You might need a click to send people, right? So here on this page, Basics Course sends people to here and they’d be able to select that. Slide in. Yep. Cool. And whenever you’re ready, you can actually go back to the play button, tap the play.

Yep. And then you have a prototype now and you can click and then see all your things that you set up. Cool. Right.

So that’s pretty much prototyping 101 in a nutshell. And there’s many ways you can play with the different functionalities to get more advanced, intricate setups. But for the most part, that’s pretty much the basics of how you get a prototype to work.

I know.

Cool. So the next thing, so for Figma users, this will be new for you if you haven’t discovered it yet, but they just recently announced this. Flows, which is really fascinating flows is the ability to create different start points with the same prototype. So what’s really great about flows is let’s say, I create this really gargantuan application, right.

And we have specific use cases that I want to use, for example, testing. Right. We want to start somebody in the sleep mode, for example, and then test that. And not have to go through all of this. Right. And so what’s really cool is we can go over to…

I believe I just do this. Yep. Cool. So what I’d like everyone to do is go to this welcome sleep screen. You click it and to start a new flow, meaning a new point in the prototype to start. You will go here and click flow, starting point plus, and then it’ll say flow to. Yeah. And so just to kind of zoom out for people, if you know what impact this would have on the prototype, let’s click the play real quick.

We see flow one, right flow two. And this is just saying where it starts with the specific prototype. Right? You can actually just drag this and change it to different screens if you want. But once you have two of them, you’ll notice that the prototyping view changes slightly here on the left. We have a panel specific to flows.

And so what’s really cool is now I can click between one and two and they start me at different points with the same prototype. Gigantic prototype, essentially. And so what we can do is we can actually close here. We can create a separate one like this. Yup. With all these pages linked together. Yep.

And then create another prototype. Previously in Figma, what designers are doing to create these types of flows. They were creating separate pages and they’re sharing that. But now it’s really great as now you can have it all within one ecosystem. Also what’s really great is when you click one of the flows here, you can actually add a description to it here. Hey, flow one is the main flow that goes through the core app pages. Yep. You can actually have that and see if it updates dynamically. Yep. Sometimes the prototype mode updates it automatically, sometimes it doesn’t. And so you may have to just double check, but here you can add descriptions and have different flows with different points.

And what’s really great about this is let’s say we’re doing usability testing. So let’s say we were inviting people to test different scenarios, for example, right. We can actually have in the description here, the task, right. What we want somebody to complete, and then we can record the session and just watch them try to complete it.

So overall from a testing perspective, it’s a really great tool that can be used to gain research insights. Cool. Awesome.

Any questions so far?

Cool. Yeah. And then just for folks who are new, this third tab here, the inspect element, this is basically a mode that allows you to click on any element and you can see additional CSS related to that. Pull the different attributes and you can also add notes. I believe somewhere. I’m not sure, actually, I don’t think you can.

No, you can’t. The inspect element here is kind of mirroring. If anyone’s heard of this application called Zeplin a different application that you can use specific for developers to pull different attributes from the design itself. What’s really beneficial about this is for somebody to go in and not be inundated with design so that they can just pull whatever they need.

Yeah. Cool. So that is prototyping in a nutshell, really useful, really great. You could change the landscape orientation. And overall feel free to like play with the designs too. If you’re getting bored break it, move it around. I always say, especially for new designers, my advice is work off of a document that’s already been made for you and just break it apart.

And that’s really how I learned at least how to do design really quickly. Just focusing on all the different documents and example files, and you could pull all this from Figma community, which is really awesome. So for anyone who’s new, highly recommend just pulling different documents and studying them by breaking it apart.

What’s really great is you can click on some of these and you can take a look at how they’ve grouped documents together. Yeah.

Any questions any questions?

Second flow? Yeah. Oh, of course. So adding the second flow. Is just clicking one of the art boards. Yeah. Wherever you want. The second flow to start, you just click on one of them. And then on the right panel on top of interactions overflow scrolling, you should have this one called flow starting point.

Yeah. And you just hit play. And here I created the third one. Yeah,

Of course. There’s certain screens. There’s also additional features in prototyping that you can set up. For example, you’ll notice when you’re in prototype mode, some of the design features won’t work. Let’s say for example, we have a menu, right? We just have a menu here. And then we have a really long page.

Let’s say, for example, we’re designing, right? Rarely we design pages like this. Right. We designed page from the top to bottom and we just have all this stuff here. And what’s really great about this is we can determine how overflow is treated. Right. So we can have certain items too, that stay sticky in place as well.

And so let’s see,

but this one, I just only want the vertical scrolling, meaning I go up and down on the screen. Let’s open that up. I’ll show you. So here we have scrolling enabled. Yeah. So if you actually have a screen and you don’t want people to be able to scroll and overflow means if it goes off the canvas, right?

So, all the content that’s outside of the visible area of the phone. If you go to no scrolling here, it should automatically stick what’s on the page.

What the heck? It should not be scrolling. What is happening?

Hm. Steven’s having technical difficulties. It should not be scrolling. Steven’s having some technical issues. Ivan, one useful tip. You can add interaction for the back button to special back element, which remembers where you came from. That we can have a page that two entry points and clicking back, we’ll go to the right original page.

Yup, absolutely. So you can just create these screens and you can have these buttons go back. Yeah.

Yep.

Cool. So this is really cool. Right? So on these back arrows, instead of having to draw the arrow here, we can actually click this and then go into the interactions here. And then tap is the action. Right? What I want to do. The destination, I can actually select back, and that will automatically have a smart recognition of go back to the screen that I came from.

So you can actually make some of these buttons and interactions more advanced without having to do a lot of tinkering. Yeah. Close overlay is for example, I open up a little box on the page. We can have an X, for example, if you hit that, it will automatically close that. Yeah.

Is it in you’re righ. There it is. There it is Kenny. So if you ever want objects, just stay sticky in the prototype. You actually have to go out of prototype mode and go back into design. And then there’s this little checkbox under constraints. So make any object right. And then make your page a little bit longer.

And then if you select the page object that you want stuck on the page, it could be like a menu. It could be all these different attributes, just click the fixed position when scrolling, and then when you go back to prototype and click play, it should automatically stay stuck at the top.

Okay, cool.

Any questions? There’s also a special back element on the canvas as well if you drag to the right of the art board? Oh yeah. Yeah. I remember that. Yep. I remember that now. What’s it like up here or something.

Hmm. It’s something that it comes up here,

right? Yeah. They keep iterating on Figma. I’m like, I remember it was there,

but yeah, yeah, yeah. Yeah. Any other questions for folks? Any other questions? Oh my God. I have like artboard organizing ADHD. Sorry. Any questions? And you can catch all this in a recording too. Yeah. I know they’re not spaced evenly. And sometimes I know. Oh my God.

Okay.

Yeah.

Any questions when we wrap this up?

Awesome. Cool. And for folks who are new to Figma, Figma also has one more feature as we talk about collaboration, which is called FigJam. So, this is an interesting one where if you click the plus icon here, you should be able to have a prompt that shows up, right. A design file or FigJam file. So design file.

This is creating actual design, right? Artboards documents, things that you have to explore yeah. Or things you ought to make into a prototype FigJam. This is more of a brainstorming space. And so let’s click into that. Why they made FigJam was particularly because let’s say we’re collaborating with folks who are not designers, right.

They’re project managers or. Other people who aren’t designed savvy. Sometimes if you throw them into Figma, they get really frustrated and confused. Like, what am I doing? And so they create a fig jam. It’s just this really simplified version where you just write text, put post-its, et cetera. Some people try to design on here and I’m like, no, no, no, no, no, no.

Just go to Figma for that. But for FigJam, this is a great space where you can just brainstorm, add post-its, you can share the link, have people collaborate just like Figma before. And so this feature is available for you, if you just want to brainstorm with folks and still be within the Figma ecosystem.

Yeah. Yeah. Yeah. Fig jam is exactly Miro. They copied Miro. It’s a much lighter version.

Yeah. Yeah. I believe Miro you can also have plugins and stuff, but I believe fig jam you don’t, it’s just text. You can draw, you can add post-its. Yeah.

And they give you stickers and components. Yeah. And so just at a high level, just some things too, if you want to pick between the different functionality. The first question is when you’re thinking about collaborating, right? Who are your end users in this specific scenario? Right. If it’s just to collaborate, just to brainstorm, then go with fig jam. And sometimes this might be a lot easier because you don’t have the ability to tweak right colors. You don’t have the ability to tweak font sizes to the T or all these minute details. And sometimes it’s really good to add these constraints because where I see a lot of designers struggle is they open up a design document and then like five hours has passed, right?

And then you spent all this time doing this little itty bitty things. Then you’re like, how did that happen? And so sometimes brainstorming in this space is really great for you to get the big picture idea, right? Adding some constraints. The next thing is in terms of what are you actually making? Right. And so if you’re creating just a high level brainstorm roadmap, anything that can be done with just text, lines, post-its images, then a fig jam is a great alternative.

But in that instance, you have to create stuff, particularly if you have to export it or creating a prototype. You would want to do Figma for sure. Fig jam, you really don’t have the export functionality to open it up as a JPEG or all these different functionalities. So you are very limited in that regard, but you do have the ability to still follow people share the document.

Same collaboration features also add comments, same thing. We talked about prototyping. This is only in Figma and not fig jam. And then lastly, for note taking, if it’s only for notes, FigJam is a great place to do all that as well. And what you can do is potentially if you want, you can even take screenshots and just use FigJam to be a place where maybe you aggregate all the different comments with post-its.

And so you have a more collaborative way such as, such as like that. So I’ve seen people do review sessions like that and have different fig jam documents set up for particular dates when they brainstorm and do work. Yeah. Any questions? Yeah. So for new folks, Figma is, yeah. Looks like you still need an account based on sharing preferences. Have you ever used the FigJam in a design critique?

So going back to, if you need an account or not, I think for anyone who needs to, I think if you click here can edit and then if you do anyone with the link, I believe anyone can edit, but I think the commenting features you would need to make a Figma account.

Have you used FigJam in design critique or is the comment tool better? It really depends on what you want to do. I found fig jam is a lot better for if everyone has it. Let’s say we’re doing a design project together as a group and we were collaborating and adding feedback. Fig jam would be a lot better for us to all work collaboratively at the same time.

I feel that the commenting feature is a lot better asynchronous, meaning people just do in their own spare time versus having this fig jam at the same time, if you want to vote and all that stuff fig jam is also an opportunity where you can mess it up completely and you don’t have to worry too much.

So you can potentially do is just take exports of all these screens and just throw it into fig jam and then people can collaborate and also know you can’t have different pages or stuff like that. Fig jam is just a once and done this document is for the session. So it’s almost like a notepad, a page of a notepad you open up for folks. Yeah, absolutely. Yeah.

Any other questions?

Cool. Everyone’s a Figma experts. Overall, I would say if you’re not using Figma yet, and you’re doing design for applications or website, Figma is a way to go. It’s so streamlined. So easy. Other competitor applications like sketch and Adobe XD. So experience design that’s Adobe’s version of Figma. I, I would say the first of all, the collaboration feature is the strongest in Figma and the development speed in which Figma is adding new resources is becoming faster and faster. The only caveat is with specific files. If you’re importing images, let’s say JPEGs and photos that are huge in size Figma will down sample it. So it will compress it automatically for you. And I know some folks who work with really big images and they have to be precise.

They just can’t use Figma because of that down sampling. And so in that regard, I would recommend to use sketch, but for the most part, if you’re not working with gigantic like hundred megapixel, a hundred megabyte images but if you’re also working with vectors instead, Figma is a great alternative to do that.

Yeah. What else?

Yeah.

And I would really use the community feature. You could search everything, even if you want, if you need like apple UI, you can just search apple UI and look, there’s all these UI toolkits people have made. So for example, if you’re looking for frames, right, where you need an apple AppleWatch, iPhone, or just something to help visualize, you can find it all here within Figma community. Somebody’s made it, somebody’s sharing it, feel free to go in, use it.

If it’s going into your file, that’s going to be finalized that you’re going to monetize. I would say, just be careful with repurposing some of these documents for commercial use, but if it’s just for brainstorming, it’s just helping you get to a certain point. You can totally use some of these documents to help you get there. Yeah.

Yeah. And for anyone who also is in the industry, looking at just ways of diving into UX I always say just start deconstructing files is really a great way. So, maybe I could switch to a template and I’ll find something. Yeah. So here’s an email template. Let me duplicate it. You’d be able to just go in and see how people are creating emails.

Yeah. Yep, absolutely.

Yeah. And you can see how people structure their files. People sell all these different properties up and that’s a really great way to start learning some of the nuances of what people have created.

Yeah. Any other questions? Thoughts, comments. We’ll go into our activity.