If you would like to turn your design presentations into an interactive design prototype and see your clients look amazed, give them some ability to interact with .jpgs – use a tool like Figma. Kori shows you the simple methods today.
Full Video Transcript
Hey y’all, my name is Kori Ashton and welcome to another WordPress Wednesday. You have found a video on a YouTube channel dedicated to all things WordPress. A lot of my resources have to do with freelancer tools. Those of us out there who have created a freelance business or a small agency, and you’re really, really learning how to use WordPress and you’re selling these digital products. I have a lot of resources on this channel specifically for you.
So today’s tool is actually teaching you how to create an interactive prototype of your designs so that you can send these to the client and let them kinda click around and enjoy them without ever having to build any code, yet.
I know a lot of times clients struggle with visioning how it’s all gonna work together and if you just send them the static JPEG, sometimes they just don’t get it. They don’t understand how to connect the dots. So giving them an interactive prototype will allow them to kind of engage, not fully, but at a level that. They’ll be able to click around and enjoy some of the process, enjoy some of the engagement. And really start to see how the project is coming together.
This is a really great step to connect them with your designs and to have them approve the process so that you can move into development. So let me show you the tool and guess what? It’s all on the budget of free.
Brought To You By Liquid Web
Hey, this video is brought to you by Liquid Web, the most helpful humans in hosting. If you’re interested in getting help anytime with WordPress, be sure to reach out to them not only for amazing hosting solutions, but also for incredible WordPress support.
Figma Account Creation
So you’ll wanna come over here to figma.com and create your own account. You’ll sign up and again, pricing for these things as of today does offer free starter package up to three projects. Two different editors can collaborate through this and you’ll be able to save 30-day version history if you’d like.
If you’d like to upgrade to an actual paid program, it’s really inexpensive and totally worth the value to allow your clients to understand this process a lot more easily and quickly. I promise you this is gonna help you in your sales process.
Exploring Figma
Once you get to your dashboard, you’re just gonna go ahead and click up here in the right-hand corner. This plus sign, it’s gonna allow you to have your very first project. And this is your very simple dashboard. This is where you can create so much. It’s so cool, in this space.
We wanna create each screen if you will. Each screen that we have, and we have the home page, we have the contact page and we have the gallery page. We wanna create those as what Figma calls frames. So you’ll see this little hashtag area here. This is frame. We wanna connect with that over here on the right side it gives us different options for sizes. Phone versions, tablet versions, desktop versions, watch, paper, social media.
So for now for this example, I’m gonna go ahead and use a desktop frame. It automatically sets it to this 1440 by 1024. You can easily adjust that to any size that you want. Just dragging and dropping this outlined area. But I’ve already got my screenshots created, so what I wanna do is drop in my picture so you would place image. Let’s choose that option and go get your screenshots, your JPEGs out of Photoshop. Once you have it, you can click. And it will paste it in.
Now I’m gonna zoom out for a minute and size this down to my area here. We wanna be sure to keep this, inside of our frame here. Notice that it’s kinda truncated, but what I wanna do is just elongate that frame so that my full, screenshot lives here and is visible. There it is, you wanna make it a little bit wider. You can, however you wanna do that.
That’s done, that is my home screen and I’m gonna go ahead and name it Home Page. So that, that frame is named Home Page. So that’s done, I’m gonna go ahead and duplicate that and make our second frame. Frame, desktop. Drag that up here and I’m gonna go ahead and go in here and place my second image.
For now, that’s gonna be our contact page. Notice then if, you wanna adjust the layers here on this left side, you can move them around completely and separate the layers. If you’d like to include them into a frame, you just kinda indent them over and that includes them inside of that frame area. I’m gonna go ahead and name this contact or reservation page, and then I wanna go ahead and make that, larger, so that we see the full screen. There we go. And kind of, slide that over and slide this over.
Making certain that our frame kinda fits snug so that there’s no weird scrolling for the user experience there. Okay, we’re almost done already. Check this out you guys, we’re gonna go ahead and add in our third frame just that you can kinda see the easier navigation. We’re duplicating what we’re doing here, desktop. I’m gonna go ahead and put in the gallery picture, that you saw me, show you in the example. So I’m gonna place an image here, go down here and do the gallery scene.
You can do as many scenes as you want. And, this one we’re gonna name gallery page, right? There you go. And, if you see me moving both of them, it’s just because they’re both highlighted. So you just wanna be sure that you haven’t grabbed both of them. And I’m just gonna shrink that down to fit right into our scene there.
Looks like I might be missing my header. Let me zoom in a little bit. Standard controls on Figma, super simple to do. Command plus zooms you in. If you wanna know what the extra controls are, they’ve got a lot of shortcodes for you. You can come here to this little question mark, come into keyboard shortcodes and see all sorts of different ones here. Zoom effects. You can see how to zoom to selection, by Shift + 2, and that takes you right into the selection of where you’re tinkering and playing.
All sorts of great shortcuts on the keyboard though to learn and be able to use this program a lot more quickly. There we go.
Alright, so now I’ve got my three scenes, right? Or as Figma calls them, our three frames, and here’s what we’re gonna do now. We are going to make some clear buttons, lay them over so that we can activate them and actually move between screens. It really is going to be that simple for us to do. We just wanna be able to highlight some things and let them be spaces that the clients can click on and enjoy some minor navigation and experience what it might feel like to move through the site.
So here I am on the home screen. I wanna highlight this reservation button and allow it to be clickable. So you’re gonna come up here, we’re gonna add a rectangle in. I’m just gonna put a rectangle over that button. In the fill area, we actually wanna make it completely clear. So I’m gonna grab this opacity, drag it all the way down and make it completely clear so that nobody knows that there’s an object laying over this, that there’s a rectangle living there. We just want it to look like the regular button.
So I’m gonna say, button, reservations, right? That’s that button right there. So I’m gonna show you right now how I click it and link it over to our contact or reservation page. When you have that object highlighted, that rectangle, we’re gonna come over here to a tab called prototype. When you click on there, it allows us to add some interaction options, check this out. So, on click, look at all these different options that you have by the way, Mouse Over, On Drag, while hovering.
So we’re gonna choose for now On Click, ’cause we want the client to actually click on this button. When you click on it, we want it to navigate to or swap with, you have some options here. Navigate to, the contact or reservation page. That’s it, that’s all. And you notice here that it went ahead and connected it, it dragged it over and connected it. I’m gonna show you the animation on that here in a minute. But for now, I wanna go ahead and go back over here to this contact page and add a home button so you can see it move back and forth. So now we’re in the contact scene or as Figma calls, the Frame. I’m gonna make another rectangle up here. We’re gonna stay in that design mode ’cause we wanna make that rectangle fill completely clear, totally transparent. There it is right there.
Let me zoom in so you can kinda see, a little bit more closely what I’m doing here, okay? Here’s that rectangle right there. You can kinda shrink it down and make it fit just over that space. So it feels really natural and really comparable to the user experience, on the live site.
We always wanna be really organized and label all of our objects, button, home. And again, we wanna add the interaction, right? So we’re gonna go to Prototype, Interaction, On Click, Navigate To, Home Page. Alright, so check this out. Up here in the top right hand corner, next to our Share, is a play button. When we click on that, it’s gonna open these up, into another scene. This is it right here, you guys, Home Page.
Notice here we’ve got reservation. See my hand change, look at my cursor. It is an active button. When I click on it, it takes me over to the Contact Us page. This is it here, scroll down. I get to see the entire scene. Isn’t that amazing? Click on home and I’m back on home. There it is. I didn’t have to write any code. All of this is set and ready to share with my client. If I really wanted to give this to them right now, all I’d have to do is click Share Prototype.
So there are some options here. You’ll wanna choose anyone with this file link, can view is what we want them to say, ’cause we don’t want them to get editing access, right? We just want them to be able to view it. So we click copy the link that’s been copied to my clipboard. Now I can share that in an email with the client, allowing them to come over and click through the great experience. Feel around, see how this feels. To kinda click through these pages. I’m gonna go ahead and show you the other one that I did that has three scenes here. This one has the gallery scene, the contact page and the home page in here.
Are all interconnected so you get to see them. I’ve got multiple areas on here where you can click. There’s the gallery, so when you’re here on the gallery page you can come to the contact us and click as much time as you wanna spend adding different navigation options in here.
You can do that for the client and they’re gonna be able to really get a feel for what your design looks like and what they’re paying for. So they can approve all of these and say, “Absolutely yes, I love it. “This is approved. “Go ahead and send it to development.” That’s what you’re looking for, using a tool like this. There are so many different tutorials that you can study, read, watch online for Figma. You just saw this in just a matter of minutes. How quick and easy it was to create this interaction.
You can build wire frames with this. You can build mobile mockups with this. There are so many different ways to use this incredible tool. I’m gonna challenge you to find a tool like this, if it’s not Figma find your own tool, online that’s gonna allow you to build out prototypes like this that can absolutely improve your process and hopefully improve the value to your customer along the way.
Alright, y’all, I hope you’re having a great one. If you like content like this, be sure to check out my whole channel. I’ve got over 400 videos right here, right now, all for free, and there’s a whole playlist just for freelancers. I hope y’all are having a great one. I will see y’all next WordPress Wednesday. Be sure to subscribe, bye.
