Designing, Developing, & Deploying Your Portfolio Part II: Wireframing in Figma
In this series:
- Part I: Research & Planning
- Part II: Wireframing in Figma
- Part III: Building with Bootstrap
- Part IV: Deploying with GitHub Pages
The Tools
As the saying goes, “a 👨 is only as good as his 🛠️.” Luckily for the modern designer, there’s plenty of UI/UX prototyping tools out there that enable users to create detailed and beautiful app layouts and features. The veterans of the space, Sketch and Adobe XD, are the go-to choice for many UI/UX designers out there with years of development and a large support community.
However, each of them has its own catch. Sketch is only available on Mac and costs around $99 for an individual license; Adobe XD is available for free but lacks any sort of collaboration feature for design teams. But, a newcomer that promises both the extensive feature set of these two programs and enables teams to work collaboratively on designs has just entered the ring and its name is…
It’s Figma. You saw that in the title already, but our goal is to teach you the basics of how to use it to create effective portfolios and increase your skillset as a UI/UX designer. In this article, you will learn how to quickly assemble functional prototypes within Figma.
Ok great, so we have our list of stuff we need on our portfolio based on research.
TLDR Part 1: Generally, this is:
- ~3 Case Studies giving a glimpse into our design process, research, product thinking, prototype, etc
- Bio/About section with a strong story and a Resume (which can be on its own as well)
- Anything else to really help set you apart from others in the realm of design or other cool stuff to share
Before we hop on to Figma we need to think about:
It sometimes helps to think about what won’t matter here to focus on what really counts.
At DI we emphasize product thinking, which means thinking about matching needs and problems with solution features. We use design methods in our tool kit like journey maps and post-it ideas, to rigorously hone into a strong product, application, service, etc.
Here that doesn’t matter too much. Design processes are not always linear, and in this case, while it may help to employ some of the design methods to define and ideate there simply isn’t too much to account for what we want to achieve. We focus on standing out amongst others on the same criteria. We focus on differentiation, which paradoxically can be helped by design thinking but not the features of our portfolio which are set in stone for the most part.
Here is what you should consider:
Content
What are the visuals and pieces of work you want to showcase? Storytelling is important to any portfolio think about the pieces that make your story.
Interaction Flows
How your audience will flow through your site. The granular interactions and movements through an interface.
Information Architecture
The blueprint of your site. Specifications of what and where.
A Card Sort walkthrough of how to go about achieving these considerations:
For Content:
Take into account all the projects you have. Here it helps to create cards: this could be print outs or information on post-its of main pieces of content you want on your site.
For Interaction Flows:
Layout the cards you made, and now organize them inflows of ways you think people would best interact with them. Once again here it helps to walk through things as a story.
For Information Architecture
Once you have grouped flows of cards create a structured hierarchical map of how a user would be able to flow through your site through all the user flows.
A helpful link:
User flow is the new wireframe
Now that we have all the requirements and basic maps and details of our site we can get to actually designing how it would look aka coming up with a prototype.
Pencil and Paper First
Before we even open https://figma.com, we must first take out our pencils and a sheet of paper.
While some may prefer to jump into Figma because of their experience or UI Kits/Design Systems/Etc, we suggest running through ideas on paper prototypes as it’s fast, easier, and less worrying about pixels.
While you’re going through paper prototypes it’s important to think about what can actually be made or what’s feasible on development technologies. This is where design systems come in.
Design Systems
What makes Figma such a capable tool is its ability to quickly form organized layouts and elements. This is done through the program’s ability to effectively use assets and styles that make up the designer’s design system. A design system is a library of fonts, shapes, and layouts that allow you to establish a detailed and consistent UI/UX experience.
We’ll be using the philosophy of Atomic Design by Brad Frost, which divides design elements into atoms, molecules, and organisms.
Using this methodology, ‘atoms’ are the most basic components of your UI. Font choices and frequently used elements, like buttons and colors, are some examples of what would be considered atoms. When creating your paper prototypes, try to establish your atoms — elements that are often repeated. In Figma, you can easily create your own library of atoms through Text Styles, Components, and Color Styles.
Once you’ve established your atoms, you can move on to create increasingly complex elements. The benefit of using this structure is that when you eventually move onto Figma, it enables you to have unparalleled flexibility in making changes as you work.
To make it easier if you don’t have an extensive idea of what can be made, we suggest looking at Google’s Material Design system on material.io. Under components, you can see a good list of web and mobile components that can be developed. This should guide the components you make but not the overall look and feel. Material Theming was recently launched by Google to help designers differentiate similar-looking apps because people started to take the same Material Design specs and look to their apps. That caused some branding and identity issues where all apps looked like Google apps, and as a result, we have Material Theming!
On to Figma!
Wireframes
After you have created an iteration of a paper prototype and a general idea of the design system that you want to move forward with, it’s time to create wireframes on Figma. We will walk you through the steps to make your very own home and project page, using the design system you created earlier in the previous step.
Figma is very similar to other vector-based design software: it features a mouse selection tool, a shape creation tool, a pen/pencil, and a type tool. If you’re unfamiliar with these tools, you should practice with them to get comfortable or follow Figma and their support material.
At the early stages of Figma wireframing, it’s important to think more about where you want elements to be rather than what the element is.
In the example above for a portfolio home page, notice how all elements are either very basic or undefined. Use a cross to designate where you want to place images. Keep text to a minimum. The purpose of this is to focus entirely on the placement. Every good design (including your portfolio) relies on a good foundation on in page layout.
Think about what you want the viewer to see first, and where you want to draw their attention.
Once you’ve established a general layout for your portfolio page, you can then further refine your design, adding in details to make it personal. This is where you use your design system to your advantage. Change colors, make fonts bigger, and go wild!
As you move on to other pages of your portfolio, make sure you utilize your design system to keep things consistent. Inconsistency = unprofessional.
If you’ve followed all the steps, you should have the foundations set for your portfolio that showcases your skills as a designer! This guide was meant to be a general overview of the wireframing process in Figma, not necessarily a fully detailed guide on Figma’s features. If you would like more help on using Figma’s tools, we’d suggest going on to Figma’s official resources, and checking out our tips and tricks section!
Figma tips and tricks
Like other design tools there tips and tricks you can follow to expedite your workflow and come up with more polished prototypes. Here are a few we found useful!
- Using components: https://www.figma.com/blog/components-in-figma/
- Using Auto Layout: https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout
- Using Figma Plug-Ins: https://uxdesign.cc/the-15-best-figma-plugins-for-designers-so-far-84332ab1a61
Figma Assets
We just started using Figma Assets and it’s been super helpful. It’s basically a library of UI kits and component libraries. If you open up any of the links it opens up a new Figma file with assets to expedite your workflow: https://www.figma.com/resources/assets/
