Wireframes are a very simple visual representation of an early-stage design for your product or service. It is quite literally a set of wires and frames used to get started and get a quick overview of initial designs.

Updated on November 7th, 2022


Is wireframing UX or UI?

In essence, wireframing is part of a UX designer's job. If you would look at the entire design process, wireframing is an early-stage task. At the same time, UX is an early-stage role as well. UI designers take over from UX design in the second half of a design project.

With that logic, it only makes sense to have UX designers work on wireframes.

Which tool is best for wireframes?

In today's UX environment, the best tool for wireframes is Figma. With Figjam, prototyping, and design system support, it makes sense to work in one application the entire time. That makes your workflow more efficient.

If you work for a client that doesn't use Figma, you can use Sketch or Adobe XD.

How do you create a wireframe?

To create a wireframe, you must first pick your design tool of choice. We recommend using Figma. After that, create your new document and frames.

Start by creating your global colors. This will make things easier for you in the long run. Use a grey scale. You now have the basics done to get started on actually designing your wireframes.

Useful resources

What is wireframing - Experience UX



Page link

Want to learn more about Wireframes?

Learn together with other UX designers in our community. Join by picking one of the options below.


  • Same as annual, but billed monthly.


Choose plan


Save 18% compared to monthly

  • 1️⃣ Join our Discord community

  • 2️⃣ Monthly UX Master Classes

  • 3️⃣ Office hours in the community


Choose plan


One purchase. Join forever.

  • Support the development and upkeep of UX Dictionary


Choose plan

Once you choose your plan, you'll be redirected to our Stripe page. After that, you'll be redirected to our dashboard. You can cancel, pause, or upgrade at any time.