So I’m finally getting towards the end of the Google UX Design Professional Certificate and now I’m onto course five, Create High-Fidelity Designs and Prototypes in Figma.

In Create High-Fidelity Designs and Prototypes in Figma, students will create high-fidelity mockups in Figma, make them interactive, conduct more research, then present their final, polished high-fidelity prototype. It’s the longest of the UX courses I’ve taken so far; broken up into six weeks rather than the standard four.

Previously, I’ve reviewed the first four courses in the UX Design Professional Certificate. You can check out my reviews here:

• Course 1: Google’s Foundations of UX Design – Coursera Course Review
• Course 2: Start the UX Design Process – Coursera Course Review
• Course 3: Build Wireframes and Low-Fidelity Prototypes – Course Review
• Course 4: Conduct UX Research and Test Early Concepts – Course Review

Create High-Fidelity Designs and Prototypes in Figma is broken up into six weeks:

Week 1: Starting to create mockups
Week 2: Applying visual design principles to mockups
Week 3: Exploring design systems
Week 4: Participating in design critique sessions
Week 5: Creating high-fidelity prototypes
Week 6: Testing and iterating on designs

Week 1: Starting to Create Mockups

Week one of Create High-Fidelity Designs and Prototypes in Figma starts with some basic introductory information followed by a long quiz testing our knowledge so far. This quiz is identical to the introductory quiz from course four, but with a few additional questions.

Next we discuss how to take a low-fidelity design to a high-fidelity mockup in Figma. To do this, students are shown how to create a brand new page in Figma to start their mockups, then create frames for each different screen we want to make; basically, start from scratch. I’m not going to do it that way. My low-fidelity wireframes were pretty polished so I’m just going to create the new page, then copy and paste all my old stuff into there. This way I still have my original interactive wireframes and can just build on top of them rather than starting from scratch.

In the next few videos the instructor goes into some visual design basics; typography, colour, and iconography. Then we discuss grids, containers, alignment, and how to use negative space. Basically, the week is meant to teach practical graphic design information. None of this was information that I needed, so I just played the course videos in the background while I worked on my mockups in Figma. Although, I did learn how to add automatic grid lines in Figma, which was something I wasn’t able to figure out on my own.

This week’s final project is to use everything that students have learned about visual design to apply to their app designs. After submitting my mockups, I got to grade some assignments. The first one I saw had no files attached, so I had to flag it as incomplete. The next one took a bit long to load, but ended up being not too bad.

Unfortunately, one issue with this assignment is that students are asked to submit a PNG file of their mockups, rather than the standard PDF. Unfortunately, PNG files are really hard to read in the Coursera interface, and many students aren’t able to view the assignments at normal size unless they know to right click to open the image in a new tab. Why did they suddenly ask for a PNG instead of a PDF? Many students submitted PDF files anyway and I just marked them normally.

Week one took me about four days, which was mostly just refining my Figma mockups, adding imagery and colours, then polishing them to share.

Week 2: Applying Visual Design Principles to Mockups

Week two of Create High-Fidelity Designs and Prototypes in Figma teaches students more visual design principles, but this time we learn about emphasis, hierarchy, scale and proportion, unity and variety, similarity, proximity, and common region. So we started with practical design information, now we’re onto the principles of design. Again, this is all good information for UX designers to know.

I don’t need to take notes on any of this information, so I’ll jump right into the quizzes instead. If I miss anything I’ll go find the video or reading to explain if I have any gaps in my design knowledge. I did have to review a few things, but only because they use terms I’ve never heard before being used to describe design principles. After that I quickly read through the video transcripts just to make sure I didn’t miss anything vital.

Week two took me half a day because I just submitted the exact same thing from week one; my polished, high-fidelity mockups. I didn’t need to go back to add variety, proximity, common region, or any other examples of design principles because they were already there.

The peer grading actually went pretty well this time too. The projects I got to review were actually quite well done. Outside of some poor colour choices on buttons that were hard to read, everyone did a good job. What a nice surprise.

Week 3: Exploring Design Systems

Week three of Create High-Fidelity Designs and Prototypes in Figma starts talking about design systems. This essentially refers to visual branding guidelines that a designer or developer would follow when working on a project. We look at Material Design, which is Google’s design system, then Polaris, which is Shopify’s design system.

Next we discuss sticker sheets, which apparently is just a weird name for a design kit. Or maybe it just sounds weird to me because I’m a parent with kids who love stickers? Anyway, a sticker sheet is just a bunch of your components and elements that you’re using in a design, in one location so you can copy and paste them where needed. I never knew this had a name, it was just something every designer did to save time. But I guess it’s a bit different when your elements are interactive.

What’s cool though, is that in Figma, you can turn elements into components, then if you make a change to one component, it updates every instance of it. That is handy.

The end of this week had a somewhat confusing quiz that required students to explore Google’s Material Design page and Shopify’s Polaris page. The quiz also included a question that absolutely had two correct answers (I checked over my notes and the course materials multiple time to check), but you could only select one. Somehow, I got that question wrong, so I retook the quiz again, which was very similar, but not exact to the original. This one changed the troublesome question though, so I could just complete the quiz and move on.

This week took me a day to complete. Yay me!

Week 4: Participating in Design Critique Sessions

Week four of Create High-Fidelity Designs and Prototypes in Figma is all about design critiques; giving and receiving feedback, participating in design critiques, and using feedback to improve your designs.

I’m not really sure we need to spend a whole week on this, but I suppose it’s useful for people who haven’t been exposed to getting or giving feedback on design work before. The instructor goes into detail about the different roles that people have during a design critique; saying there is a facilitator, a presenter, reviewers, and occasionally, a notetaker. I have never experienced a design critique session that was this formal, ever.

Typically, if I was presenting my ideas, I would also be taking notes, and occasionally be facilitating the session, unless the creative director was. Everyone else would be there to review and suggest changes; or evolve the design on the whiteboard or on paper.

Design critiques are going to look different at every company you work for, but they often won’t be as formal as Google suggests they will.

So in this course, one thing students are taught to do is to point out issues with the design, but NOT to offer solutions. This is a hard thing to do. In other words, we’re supposed to say something like “is this design accessible enough?” rather than “could you increase the contrast on these buttons to make it more accessible?”

Next there’s a mock design critique, and in the critique, one of the reviewers asks as question similar to the one above, then immediately follows it up with a solution. This is what I would expect from a real world design critique, since designers are taught to offer solutions if they see an issue, but why the contradiction?

This week also ended with a quiz that was somewhat confusing in a few parts, specifically when there was more than one option that seemed correct to a multiple choice question. Fortunately, week four went quickly and only took me about half a day.

Week 5: Creating High-Fidelity Prototypes

Week five of Create High-Fidelity Designs and Prototypes in Figma is about… drumroll… creating high-fidelity prototypes in Figma! That’s right, we’re in the endgame now. To start, we cover the basics of interactivity in Figma again, then move on to how to make screen transitions like dissolve, move in, etc.

The rest of this week covers accessibility considerations and how to make a high-fidelity prototype feel a lot more like the real thing by adding button states. The course didn’t really explain how to make the different button states very well, so I had to head to YouTube to figure it out. It took me awhile.

The last time I created button states was in Macromedia Flash. Yes, before it was even an Adobe product. Somehow, it was more intuitive creating button states in Flash, so this was a bit tricky for me. Eventually I figured it out by watching this video from Mavi Design.

This week took me three days to do; which was mostly spend on polishing my prototype, testing it, revising, and doing all of that a few more times until I was happy with it.

So these are my final screens from my app for an antique store, I’m calling Panache Antiques (not a real store).

Week 6: Testing and Iterating on Designs

Well, it feels like this course should be done by now, but it’s not! We still have to get more feedback then present our designs. The last week of Create High-Fidelity Designs and Prototypes in Figma is all about conducting another usability study, refining our designs, learning about case studies, and finally, creating a case study for our project. This will be the last thing we do with our mobile app designs in the entire program.

To make things a bit easier, students are given a case study template (Google Slides doc) to fill out for their final project. I actually just jumped right into working on this first before watching any of the course videos, which mostly covered things we were taught in the previous courses.

After another usability study, I refined my designs a bit more and added it all to my case study document in the provided format, but in my own visual style. The whole document was 25 pages. My presentation design wasn’t anything spectacular. I wanted to keep things really simple and easy to follow because this was going to be peer-graded. This meant the case study needed to match the given template pretty close or elements were going to be hard to find. Here are some of those pages:

Create High-Fidelity Designs and Prototypes in Figma – In Summary

Overall, Create High-Fidelity Designs and Prototypes in Figma was an interesting course because it forced me to learn some really interesting interactivity tools in Figma that, on my own, I never would have. This course initially went relatively fast for me, but only because there was so much focus on visual design, which I was able to go through quickly.

I ended up finishing this six week course in exactly two weeks, with the majority of the time being spent on the final case study. The case study was pretty straightforward thanks to the template and clear grading guidelines, but it was still occasionally unclear which version of something you were supposed to include in the case study because it basically asked for things from all stages of your design process, going back to the second course in the program.

Now I’m entering the 6th course in the Google UX Design Professional Certificate, which is Responsive Web Design in Adobe XD.

Are you interesting in taking Create High-Fidelity Designs and Prototypes in Figma? Have you taken it already? Is there anything you want to know about this course in particular? Let me know in the comments below 🙂

Photo Credits

Photo by Jazmin Quaynor on Unsplash