Transcripts
1. Introduction: Imagine you could build
an app prototype in just a few hours instead of
weeks. Pretty cool, right? Okay. Since you're
in this course, a good assumption is
that you're either a UX designer already or you're in the process
of becoming one. In which case, this course
is designed for you. That also means that
you understand creating wireframes for usability testing can sometimes become
an intimidating task. I am here to tell
you that I have the perfect solution for
you. Wireframing kits. These kits are tools that you can implement
into your workflow, making your wire framing process as easy and exciting
as it can be. My name is Y, I am AUX
UI design instructor. I have studied and
practiced design for years. I currently teach classes of 70 plus design students guiding them on how to start
their careers in tech. I am so excited to teach
this class because I think wireframing kits are
such underrated tools in any designers toolset. The ability for you to create a completed and
functional prototype in a matter of hours is very
remarkable and empowering. I can't wait to take you
from beginner to master in using and implementing these wire framing
kits in your process. Discourse, we're going to cover a very pre foundation of
what wire framing is, and I will introduce you to the idea of wire framing kits. These are pre made UI components that
include standard buttons, sliders, icons,
forms, you name it. Picture a set of building
blocks that you can mix and match to create the layout of your
digital product. I will cover everything you
need to know from finding, downloading, customizing, and utilizing these kits
into your projects. We're going to learn
everything using Figma, a powerful prototyping
software that enables you to leverage wire
framing kits to the maximum. If you're not familiar
with Figma, don't worry. I will guide you
through using Figma effectively with step
by step instructions. The beauty of using wire
framing kits is efficiency. You're not wasting
your time creating every single element
from scratch. Instead, you drag,
drop, and vola. You've got a functional layout, ready for testing and feedback. Joining, and let's bring
your design visions to life.
2. What Is Wireframing: You may already know
all about wire framing as a part of your
design process. But just in case, let's go
over that in this quick video. Imagine you're building a house. You wouldn't just start laying
bricks randomly, right? You would need a rough blueprints
first in your x design. Wireframes are like
these blueprints. They are symbol
visual guides that represent the skeleton
of your digital product, whether it's a
website or an app. Wireframing helps you
organize the structure and layout of your design before you start adding all
the bells and whistles. It's all about focusing
on the functionality and user experience without
being distracted by colors, fonts, and other
design elements. Wi frames are different from the final mockups that you
design for your product. Wi frames are the
transitional phase between your ideas and
the final product. They have an experimental
nature to them, since you create them, test them, and then
you iterate on them. Now that you know
what wireframes are, you should also know that not
all wireframes are equal. There are different levels
of faatlity in wireframes, ranging from low
to high fidelity. Fidelity is just
basically a fancy word, referring to the level of detail and realism
in the design. Let's have a look. First, we have low fidelity wireframes. These are basic
hand drawn sketches often done with pen and paper. They can also be digital, but they include very
limited amount of details. They are quick to
create and super useful for communicating
initial ideas. Think of them as doodling your first thoughts on a napkin. Next, we get to mid
fidelity wireframes. These are usually digital and created using tools
like sketch or Figma. They are still basic
and approximate, but they include more details than low fidelity wire frames. This level is great
for defining ideas and getting your prototype ready for testing and receiving feedback. Finally, there are high
fidelity wireframes. These almost function like the final product with more completed layouts
and well crafted design. High fidelity wire
frames are often used for usability
testing as they give a much clearer picture of what the end product will look like
and how it will function. In a nutshell, y framing is a very fundamental step
in the design process. Y frames give you a blueprint, focusing on the structure
and layout of your product. This course is all about
making this process of Y framing as easy and
enjoyable as it can be.
3. What Are Wireframing Kits: In the previous video, we
talked about wire framing. Now it's time to introduce our main topic, Wi framing kits. A wire framing kit is a collection of
remade UI components. Think of it as a
set of lego pieces. These pieces include elements like buttons, input
fields, icons, or even entire wage
layouts that you can use to quickly draft the skeleton
of your website or app. The idea is simple. When you're building
your wire frames, you can utilize these kits
as a component library. Easily dragging and dropping the elements into
your wireframes. But why should you
use these kits? Well, there are many reasons. The main ones are speed, efficiency, consistency,
and a bit of fun. One other reason to use
wireframing kits is that they help keeping
you laser focused on the functionality of your
product without you wasting time or being distracted
by visual design aspects. Let's say you're working
on a food app design. You want to create
a checkout flow. You spend 5 minutes drafting the skitch for the
layout of these screens. But then you spent 2 hours just perfecting these screens and
making them look consistent. Only to find out
that after testing, you need to almost change
the whole design again. That's not great,
is it? Instead of starting from scratch
every single time, you can begin with a set of
ready to use components. Time saved, means that
you can iterate quicker, test your ideas sooner and improve the usability of
your design in this time. It's also fun. Creativity often thrive under some constraints. And having ability to use set of elements can actually
spark new ideas. Simply because
you're not worried about creating these
elements from the ground up. You can play around with them, re arrange them, and
see how they fit. It's like a digital
sandbox for you. Efficiency comes into play
when you're working in a team. If everyone is
using the same kit, you all speak the
same design language. This minimizes
misunderstandings and reduces the time
spent on revisions. Plus, it ensures that a final product has a
unified look and feel. Now you might be
asking yourself, Is it ethical for me to use
these wireframing kits? Some designers
might feel uneasy, thinking that using pre
made components can somehow count as stealing
or being less original. But that's not the
case. It's absolutely ethical to use wireframing kits. Design teams around the
world, use them all the time. It's a standard practice, and giving the benefits. It's a no prainer to use
them in your projects. One thing to keep
in mind is that you need a prototyping tool
to use these kids. Popular ones include sketch, Figma, and a WXT. Each one of these tools
offer all the capabilities that you need to import and
use these wireframing kits. These tools allow your kids to integrate seamlessly
into your projects, making it even easier to drag, drop and customize
to your needs.
4. Using Figma in This Course: To actually start designing your wireframes and to be
able to use wireframing kit, you need a design software. For this course, we have chosen one very powerful design
tool, which is Figma. FGMa is a design tool
that allows you to design your wireframes and
create your prototypes. In addition to that, it helps you facilitate your
usability testing. What makes FGMA stands out in the UX world is a
collaborative nature. You and your team can work
on a design simultaneously, making real time updates, no more e mailing
files back and forth, or dealing with version
control nightmares. It's also a cloud based tool. All you need to do is to sign into your account
from any device, and you will get access to
all your files from anywhere, your home, your office, your favorite coffee
shop, you name it. As a UX designer, eventually, you need to be
proficient in using Figma. There are a lot of tutorials
and resources online. You can learn it as you go. However, the beauty of using wire framing kits is that you don't need to be an
expert in Figma. Any beginner user
can very easily use a wire framing kit to start
putting a design together. We will go through specific
actions in figma you can take when using and
customizing wire framing kits. But there are two main features that you need to know
before diving in. These features are
components and styles. A component is something
that you can create and then reuse in your
design over and over again. With all uses, still link
to the main component. A style is similar to
component in theory. You create a style for
typography or color. Apply it for different
elements on your design, and all these elements
will remain linked. If you change the
original style, all the connected
elements will follow. For example, a button design. You can design your button once and then use it everywhere
in your design. For example, if you want to change this color of
the spot and later, you only need to change
the main component and all the instances
will follow. The main difference
between components and styles is that styles
are usually simpler, targeting specific
properties of elements. While a component is
a more complex unit. A component carries shape, color, typography, and
many more attributes. It's important that
you understand components and styles
before we start. Because a wire framing kit at its core is a set
of components and styles prepared and put together for you to invert and start
using in your design.
5. Finding the Right Wireframing Kit: All right. To get started
with your wire framing, you need to find the
right wire framing kit. Before doing so, ask yourself, what is the scope of my project? Are you crafting a
symbol landing page or a complex mobile app, or maybe a full fledged website. Knowing this will guide
you towards the kit that aligns with your project
specific requirements. For example, if you're
designing a mobile app, you might need a
kit that includes components like navigation bars, tab bars, and various
screen templates. On the other hand, if you're
designing a web project, look for kits that are rich
in digtop focused element. Such as header variation, footle designs, and
content sections. With that being said,
most wireframing kits include elements for both
desktop and mobile apps. The second thing you
want to determine is the level of fidelity
for your wireframes. Early on in the project,
low fidelity kits are excellent for brainstorming and getting quick feedback. Later on, as a design
becomes more refined, you want to shift to
high fidelity kits. After you decide on the kind of wire framing
kit that you need, you are ready to start looking for your right wireframing kit. Since we're using
Figma and discourse, the Figma community is a perfect place for you to
look for the appropriate kit. To start, click on the Explored community
tab from the main page. The Figma community is filled with various assets and
t place for your design. Start by typing some keywords, use terms like wi framing kits, UI components, or low
fidelity wi framing kit, depending on what
you're looking for. One quick pro tep pay attention to the rating and
number of downloads. Kits with higher ratings
and more downloads are often more reliable and have a stronger
community back in. Once you find some kits
that catch your eye, open the breviw to
see what's inside. Does this kit include all the
components that you need? Is it the right
level of fidelity? Does it look appropriate
for your project? If it does, all
you need to do is to click on the
button Open Figma. This will create a duplicate of the wireframing kits
file in your drafts, and it will automatically
open the file for you. That's your first step in adopting this wireframing
kit for your project.
6. Designing With Wireframing Kits: Now that you have found the best wireframing kit
for your project. Let's start using it to start open the file
you duplicated, and then select the right
frame for your project, whether it's a deck stop frame, a mobile frame or
whatever it is, depending on the kind of
product you're designing. After that, you can access the wireframing kit elements
from the left side. Select the tab assets,
and from there, you would see all the
components in the file, categorized and organized
each with their own name. You can look at the list and
check for whatever you need, or you can use the search bar on top and type the name of
what you're looking for. It will show up if it exists. The idea is symbol. All you need to do is to drag whatever you need and
drop it in your design. Need a button, drag it over, need a text input field, drag it over. It's that simple. You can quickly draft
the basic structure of your app and website by
arranging these elements. You don't have to worry
about the exact detail at the stage, and that's it. In just a few seconds, you have a symbol
functional layout that you can easily
adjust and iterate on. Let's say you're designing
a symbol login screen. First, drag in a placeholder
to serve as a title. Then add two input fields, one for the user name and the
other one for the password. Finally, dragging and button
for the login action. Most components also have some settings that you can tweak from the right side panel. For this input
field, for example, since it's for the password, we can add an icon
on the right side. All we need to do is to use this option from
the right side panel, and the icon that we
want will show up. It's important to
keep in mind that wire framing is all
about being approximate. These kits help you
create wire frames with rough representation
of your final product. They are not necessarily
Exel perfect or style to match your
final design vision. Think of them as a skeleton
of your user interface. So while you're dragging
and dropping elements, they might not look
exactly how you'd like them to look at the
end, but that's okay. The goal here is to focus on the structure and layout,
not the final look. The beauty of fire framing
kits. It's in the efficiency. By using pre made components, we can save countless
hours that you would otherwise spend creating
elements from scratch. This speed allows you to quickly iterate on your
designs, get feedback, and make improvements without getting slowed down
by styling details.
7. Customizing Wireframing Kits: So far, we have covered
the basic of wireframing, explore different
wireframing kits and started using Figma. However, since the idea is for us to rely on a pre
made wireframing kit, it's expected that
the kit that we chose might not match 100%
of our requirements. That's why it's very important
for you to know how to customize and design additional
components for your kit. Let's say that we have
a button in our kit. It's a pretty standard
rectangular button with a slight corner roundness. For the kind of product that
we're designing though, it's crucial to use
fully rounded corners. We can make this change to the entire wireframing
kit very easily. To do that, I need to find the component that I
need to change first. Since we need to change
the button component, I will look for a page called buttons on the left side panel. I will then select all
the buttons at once, and from the right side panel, I will see an option
for corner radius. Let's change that
10-36. There we go. Now, our button
have those smooth, fully rounded corners that match the purpose
of our product. Once you change the main
component like this, all the instances of this component will
automatically be updated. You can do this
with any component, changing any property,
color, font, size. You need also to remember to be careful with these changes to maintain the consistency of the overall style of
this wire framing kit. Besides changing some properties in the existing components. Sometimes the pre made kit just doesn't have
something we need. Maybe we need a unique
component like a page slider, for example, but we can't
find anywhere in this kit. Luckily though, you can
create this from scratch. To start, I will look for the appropriate page for
this additional component. This tape is only for the
organizational purposes. After that, you create
your new component. Here's a base slider that I was missing. I already designed it. Now, we have designed a custom based slider that
fits our needs perfectly, but we're not done yet. We need to convert
this new design into a reusable component, so we don't have to recreate
it every single time. All you need to do
is to right click on it and select the option
create component. We can also add different
variants for this component. For example, I can create different variants for different
pages that are active. I will create these
different variants here, and I will change the color of the different page apps that indicates which
page is active. Now, this new slider component will be available in
your assets panel, ready to be dragged and
dropped whenever you need it. Plus, any future
changes you make on the original component
will automatically update all the instances
across your project. Super efficient,
there you have it. Customizing and
creating new components is something that
you will almost always do in your workflow. The more you experiment
with customization. The better you will get at
maker your wiraing kits, truly reflect your
project vision.
8. Importing Kits As Library in Figma: By now, you should have
a pretty good handle on wireframing and customizing
kits for your project. But so far, the only way we use them is by working inside
the kits file directly. However, for efficiency and use wireframing kits to
their full potential, we can use them as libraries of components to our projects. By centralizing your
components and styles, you ensure that everyone
is on the same page, making your design process
faster and more organized. Plus, it's easier to update and maintain consistency
across your project. Believe me, your future self and your team
members, we thank you. Let's go step by step
in the process of publishing a wire framing
kit as a library in Figma. First, you need to have a
team folder for your project. I have already created one here. You created from the button on the bottom and
following the process. Inside the team folder, you need to have
a project folder. This is where all the
project related files, such as your wire
framing kit will live. You can create as many
projects as you need. Now the next step is to move
the wire framing kits file that you duplicated
from the Figma community to your
project folder. You can do that easily by
right clicking on the file, selecting the option move file, and then choosing the
appropriate destination. Or you can choose my favorite
way which is dragging and dropping the file to the
destination project folder. Your next step is to publish
your file as a library. Open your file and from the top of the left side
bar, go to assets. Then, click on the
library in here. You will see an option to publish your
components and styles. Click publish and
Figma will bring up a list showing all
the components and styles that you can publish. Review everything
to make sure it's all set and then
hit publish again. You can access the
same option from the small arrow next
to the file name. You can publish your
library from there as well. Just like that, your library
now is published for the entire team to
be able to use it and to ensure that all your team members can use it as well, you need to enable it to
a specific design file. I will create a new design file in the same project folder. Let's say this is the main
file that we're designing in. All I need to do is to go
to the library option from the asset menu and add the library that I just
published to this file. So you have published
your first library. But what happens when you make changes to your
wife framing kit? Don't worry, it's pretty
straightforward too. Whenever you make changes
to your wife framing kit, FDMA will prompt you
to publish updates. Just follow the same steps. Go to assets, click
on the library icon, and then click to publish
the update for your library. Your team will receive
a notification to update their version
of the library as well. It's that simple. Finally, just like as we added
this kit to our project, know that you can add multiple kits within the same project. When doing so, be careful and organized and add a
distinct name for each kit. This makes it super easy to identify a switch between
different sets of components. However, it's very
advisable to use one kit at a time as things
might mix very easily, and you risk losing the
consistency in your designs.
9. Wrapping Up: That was my class on
wire framing kits. This knowledge has
helped me speed up my design process and was essential for me
when I started out. I hope it's helpful
for you as well. In this course, you have
learned how to choose, use and customize wire
framing kits in Figma. You have also learned
how to implement them as libraries
in your projects. But of course, this is
just the beginning. I would love for you to keep practicing and share the
wire frame that you create. Anything inspired by this class in the class project section. Start by working
on small projects. Maybe redesign a friend's blog or your own portfolio website. Small projects, give
you the space to experiment and make mistakes
without much pressure. One thing I love about being a U XUI designer is an
endless learning curve. There are always new techniques, tools and methods emerging, keeping things very exciting. I encourage you to
embrace a mindset of continuous learning,
take additional courses, read UX blogs, attend
webinars, and follow me here, and also on social media to stay updated with
my new courses. If you enjoy this course
and find it useful, a review on skill share
would mean a lot to me. It helps students
discover this course and enables me to keep creating
valuable content for you. Thank you so much for taking
this journey with me.
Yousef Shehabi, UXUI Designer | Educator
