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

Nicole Saidy, Designer, Coach, Speaker

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (36m)
    • 1. Intro

    • 2. The design process

    • 3. Why Figma

    • 4. Intro to Figma

    • 5. Step 1: Building your wireframes

    • 6. Step 2: Making your wireframes interactive

    • 7. Step 3: Styling your design system

    • 8. Step 4: Finalizing your prototype

    • 9. Final thoughts

98 students are watching this class

Project Description

For the class project, you will design a 5-page prototype in Figma. If you don’t have an idea to design, you can use Medium or Twitter as an example, or follow along and design Airbnb’s main journey with me. Try to choose a simple and consistent website or app that have repetitive components.

After watching the class, follow these steps to design your own interactive prototype:

  1. Sketch your wireframes on paper (5 screens)
  2. Build your wireframes in Figma using components 
  3. Make the wireframes interactive
  4. Style the UI library and add brand and color
  5. Finalize the prototype
  6. Make the screens responsive and create a mobile version
  7. Optional: repeat the process for the all the other screens

Feel free to share your progress by sending screenshots of each step. Don't forget to post your questions and concerns and I’ll help you out.

Here's the Airbnb design I created: Final Airbnb Prototype

Student Projects