Published on | Prototyping: From UX to Front End — Medium Nicole Saidy

How you can save 90% of your time on your next project

For the last year, I’ve been using Figma for my UI/UX design process and it has been saving me hours of work. It truly transformed my design workflow.

Other than it being intuitive to use, I like Figma because it’s the complete package, it enables me to work on the full design process: Wireframing, Design, Design Systems, Prototyping and Collaborating.

I don’t wanna talk about why you should use Figma. Instead, I’m going to show you how you can save hours on your next project with a simple hack.

It all comes down to one important feature in Figma:✨ Components ✨

Components in Figma by Rasmus Andersson

Components in Figma are very similar to Symbols in Sketch. But I think Figma’s Components are much more flexible and easy to use. If you don’t know much about Components, first make sure to read this article or watch this tutorial.

How is Figma saving me time? Let’s see how a traditional design process looks like versus a design process in Figma.

The process

The classic process

The simplest classic process would be to build wireframes in one app like Balsamiq, then build the design in another app like Sketch, then prototype it in another app like inVision. This is not an interative process as it causes frictions and wastes a lot of time, not to mention it creates a huge gap between wireframing and prototyping.

The Figma process

With Figma, you skip 2 steps and you build your interactive wireframes in Figma, create a UI library (at the same time), then update the UI components that you already spent your precious time on to create a final designed prototype.

Let me rephrase. You build your wireframes using components from the beginning. When you do that, after your wireframes have been approved, all you need to do is update the components. This will convert them from grayscale basic shapes to detailed designed components which completely converts your wireframes to a high fidelity prototype.

How does it work?

Here are the exacts steps to follow.

P.S: If you prefer watching tutorial videos instead of reading, scroll down to get my awesome Skillshare class about this topic.

Step 1. Build your wireframes

Before this step, you should have already sketched your screens on paper. After that, it’s time to move them to digital wireframes.

Before you start drawing your screens, the first thing you need to do is create a UI library frame. This is where all your reusable UI components and guidelines will take place.

The first components you should create are your Text Styles. Create one component for each style (H1, H2, H3, H4, P, Small, etc.). Keep the font as is and don’t think about the design just yet.

Every text style is a component

Now, whenever you want to add a text to a screen, you take an instance from the text component in the UI library. Why? When you get to the design phase and you want to change the font style for all your screens, you change it once from here, and it gets updated everywhere. You’ll see that in a bit.

This same concept applies to all your other components.

My Airbnb UI library

Create all your other objects as components like Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers, everything. I usually like to create the object in the screen first, to build it in its context, then drag it to my UI library and convert it to a component then copy it back to my screen.

My Airbnb wireframes

By the end of the project, (almost) every object you create in your designs should be a component. Not only this will save you hours of work, but it also maintains consistency throughout your product which is a crucial key point in UI/UX design.

Step 2. Make your wireframes interactive

After you’re done wireframing and creating your UI library, it’s time to make the wireframes interactive. Fortunately, Figma makes it very easy to do that.

All you need is to drag each object to its linked page in Prototype mode. Keep in mind that linking an original component applies the same link to all its instances, as demonstrated below.

Making the wireframes interactive

The next step is to share your interactive wireframes with the stakeholders and get feedback by adding comments directly on the prototype.

After a few iteration cycles, your wireframes should be approved.

Step 3. Style your design system

Once your interactive wireframes approved, you can now style your design system. In this step, you add brand design guidelines, color and design details to the already-built components in your UI library. This step completely converts your wireframes to a high fidelity design prototype.

A style change on a component applies on all its instances

I like to show the stakeholder the style guide first, to get feedback on the mood and design style, before showing them all the screens. I like to add a few UI components in there to let them see how each component is designed.

A basic UI library for Airbnb

Step 4. Finalize your prototype

Once the style guide is approved, all what’s left is to polish the prototype. Here’s where you can make sure everything is in place. There might be some objects that are not components that need to be designed, or components that need to be populated. Make sure to play the prototype and try the links to make sure all links are working properly.

My Airbnb prototype

The prototype is done! Now you can share a link with the stakeholder to get a final approval. Then, you hand it off to the developers and show them how they can Inspect and Export images from Figma, while they can also ask any question they have directly on the prototype.

Adding a comment on the prototype

You can also share a public link to test your prototype with users and gather feedback.

That’s it! I hope my process will help you save time on your next project.

✨ Watch my video class ✨

If you liked this article, then you will definitely like my class on Skillshare that covers this topic. In my concise 30-minute class, I cover a project from start to finish to give you a new modern approach to your workflow.

Streamline your workflow: The efficient UI/UX design process in Figma

Here’s what some of my students said:

“This is one of the best overviews that I have ever seen for a piece of software”

“You won’t only learn the hidden tricks of Figma, but Nicole also will show you a coherent process to get great designs fast”

So it must be good, right? Click on this link to get my class and Skillshare Premium for free for 2 months!

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How to streamline your UI/UX workflow with Figma was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to streamline your UI/UX workflow with Figma

Cool stuff, every week

More Articles