How To Create a Wireframe in Figma

A big part of User Experience (UX) and User Interface (UI) design involves something called wireframing. Simply put, a wireframe is a visual mockup of a web page without all the final details. The goal of a wireframe is to demonstrate how the content should function on the screen.

Doing this work in Figma makes it easy to wireframe lots of ideas quickly and get direct feedback.

Start with wireframes

A few weeks ago, the Product Design team at Flatiron School designed an update for a page on our website. We were moving quickly and instead of starting with wireframes, I instructed one of our designers to start with high-fidelity mockups. Big mistake you guys – starting with pretty mockups created 2 challenges:

  • The polish made the design too precious. We needed our content and engineering partners to critique the content, but they were not sure how much we were open to changing.
  • We ran out of time to iterate. The design spurred some other good ideas, but we spent too much time on the finishes and had no more time to explore.
Wireframe in Figma
When a design has too much detail right away, people have trouble knowing how to respond.

In this case, we were able to push the deadline out another week. The design team regrouped, produced a handful of wireframes without branded styles (colors, fonts, icons, images, etc.), and something magical happened:

  • The content and engineering teams suddenly had helpful questions.
  • It was easier to share the wireframes early and often, so iteration happened naturally.
Wireframe in Figma
Good wireframes focus on the important details.

Wireframe from the inside out

When most people start a wireframe, they skip an important step. Most people start with a big box shape to frame all the content. Then they make smaller boxes inside those boxes to represent things like navigation, page footers, sidebars, and so on.

Instead, start with the most important content on the screen and move out from there. This approach is called Epicenter Design and it will change your life.

Wireframe faster with Figma

If you are making wireframes in Figma, it’s really easy to explore multiple concepts quickly using components templates.

A screenshot of Figma's community showing lots of wireframe templates.

One of the wonderful things about Figma is the Figma Community. Other designers just like you and I have added hundreds of templates to the community library. Many of them are free and new designers benefit a lot from seeing existing solutions to problems they may be working on for the first time.

Want To Try It Out?

Hiring companies consistently rate Figma knowledge as one of the top “must-have” skills for UX / UI Product Designers.

In the Product Design course at Flatiron School, students are taught hands-on, practical skills, including how to use Figma.

A great way to try out the course is by taking a Free Product Design Lesson, with no commitment or strings attached! You can also see all the skills we teach in our Product Design Course Syllabus.

You can also learn more about what it’s like to be one of our students in this day-in-the-life of a Product Design student post.

WATCH: Six Interviews With Leading Product Designers

Thinking of pursuing a career in product design but not sure if it’s right for you? In that case, ditch the google searches and get advice straight from expert Product Designers at the forefront of UX / UI design innovation. 

In the 6 interviews below, you’ll hear from leading Product Designers on career paths, designing for a wide range of users, and how to excel in the field.

Preparing Design Students For The World of Product Design

Tech Perspective Podcast Ep. 15 with Flatiron School Instructor Jennifer Houlihan

Product design and UX / UI – what’s the difference? According to Jennifer Houlihan, Product Design Lead Instructor at Flatiron School, they’re stepping stones in the same design pipeline. The two schools of thought work together to deliver a user-friendly and stakeholder-approved product to market. 

In this episode of the Tech Perspective Podcast from April 2022, Houlihan explains the crossover between the disciplines, the importance of having a holistic design methodology, and how a strategic mindset can help designers level up in their careers.

“Product design includes UX / UI, you can think of it as an umbrella or a circus tent. But product design includes a lot of strategic work mapping business needs and stakeholder needs to what the users need. [product design] is a level up from UX / UI.”

Product Design, Mental Health & Brand Storytelling

Tech Perspective Podcast Ep. 18 with Founder of Really Good Emails Matthew Smith

Are you Yoda or are you Luka/Leia? In this Tech Perspective Podcast Matthew Smith, Founder of Really Good Emails and Principal Designer at Bunsen, explains how knowing a brand’s role in their customer’s story drives better product design decisions and can ultimately result in hyper-dedicated users.

“To me [digital product design] is the skill and practice of creating a user interface people can engage with and do so with utility and enjoyment – that’s where the brand comes in … Design isn’t just about making things look better [it’s] about relationships.” 

Signs You’d Be A Good Product Designer | All Things Product Design

Tech Perspective Podcast Ep. 21 with Flatiron School Director of Design Matt Donovan 

For those considering a career in product design, Matt Donovan, Flatiron School’s Director of Design, recommends they consider the following questions:

  1. Do I like working visually?
  2. Am I a curious person?
  3. Do I like working with other people?

Donovan discusses what makes a great designer, the importance of empathy in design, and whether or not a background in coding is essential in this episode of Tech Perspective Podcast. 

“Product design is like a Russian doll with lots of different components … there’s all the research that goes into it, the high-level strategy … and then there’s the user experience design.”

Design Ethics, Building Products & Intellectual Curiosity 

Tech Perspective Podcast Ep. 22 with Flatiron School Director of Product Design Joshua Robinson 

Versatility and flexibility paired with a deep well of expertise in niche areas can give designers a competitive edge, Joshua Robinson says, but ethical designing is critical to ensuring a quality product that serves all of its intended users. 

Robinson explores navigating ethical quandaries in business, designing for inclusive accessibility, and which qualities are key to excelling in product design.

“Product design encapsulates elements from both UX and UI but also extends it. It brings the designer into the business side of the company and helps them think strategically about the features, products, offerings, and customer experience and touchpoints.”

The Human Side of UX Research

Tech Perspective Podcast Ep. 23 with UX Researcher at Eva Rajewski

With a background in Anthropology and a career in user experience research, Eva Rajewski of values meeting people where they are and using design to validate their individual needs and concerns related to specific product offerings. 

In this podcast interview from April 2022, Rajewski highlights the need for understanding users’ pain points, what graduates can expect day-to-day as a UX researcher, and the future of UX. 

“If you asked someone 200 years ago what they wanted to get around faster, they would’ve said a faster horse. They wouldn’t have told you they wanted a car. The job of the researcher is to understand what the problem is and how to solve it.”

From Radiology Tech to UX / UI Product Designer: Sabrina’s Story

Flatiron School info session Q&A with Product Design Bootcamp graduate Sabrina Hernandez

After almost six years as a dental radiology technician, Sabrina Hernandez decided to pivot and pursue a creative career in product design. After completing Flatiron School’s full-time Product Design Course at our New York City campus, she has since begun a successful and fulfilling career in the field. 

In a Product Design info session, Hernandez chatted with Joshua Robinson, Flatiron’s Product Design Director, about her career transition, challenges she faced leaving healthcare, and her experience with the course. 

“My biggest challenge when changing careers from healthcare to product design was getting my head around a new skill set and believing in myself. You just have to believe that you can expand your mind to learn more and become a new version of yourself.”

Think you have what it takes to join the ranks of the best Product Designers working today? Test your mettle with a Free Product Design Lesson, or check out the Product Design Course Syllabus that will set you up for success and launch you into a new and fulfilling career.

Do I need to be an artist or a coder to study UX / UI Product Design?

The short answer is, NO! You do not need to be an artist or a coder to study UX, UI, or Product Design. 

What is Product Design? 

At Flatiron School, we focus on digital products, such as websites or applications. Product Design is a holistic concept that spans across both UX (user experience) and UI (user interface) design. Learn more about the differences amongst Product Design, UX design, and UI design.

Do I need to be an artist to study UX / UI Product Design?

No! There is a decent amount of drawing  involved in UX / UI Product Design. However, the purpose is to develop or communicate ideas, and that can be done very simply – meaning, it doesn’t take a great deal of artistic talent.

Instructor Jennifer Houlihan demonstrated this firsthand during an instructional session (Sketching For Design) when she had participants turn a simple scribble into a bird. During the session Jennifer states, “Very little drawing is needed to convey an idea. It takes little to communicate powerfully, and it doesn’t require an art degree.”

Do I need to be a coder to study UX / UI Product Design?

There is a debate amongst industry professionals around how much code designers should know. Some believe it’s best to specialize in design so little to zero coding knowledge is required. Others believe that robust coding knowledge is a must-have, as it enables designers to work on broader projects as well as “speak the language” when communicating with developers.

Here at Flatiron School we believe that coding knowledge is a highly useful skill that will ultimately make our Product Design graduates more competitive in the job market. That’s why we teach students the basics – HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets). 

“It helps you be a better designer. You’re learning about the principles behind the code because it makes you a better designer and a better team collaborator. Resilient, flexible, and being a collaborator is important to standout in a job marketing. Being a better collaborator – having those mental modules about code – will help you.” – Joshua Robinson, Product Design Director

“Our hiring partners gave us feedback that [they would prefer] entry-level Product Designers to have a basic understanding of HTML and CSS. We cover the basics of HTML and CSS early so that students can play with it on a project level.” – Giovanni Difeterici, Senior Director, Education

In addition to basic web development languages, students will also learn how to leverage responsive designs for various screen sizes and how to hand-off designs to developers. 

Want to learn more?

Our Product Design course is crafted so anyone can be successful – regardless of your skill level. Download our syllabus or talk with an Admissions rep today.