◀️ Last Page

Next Page ▶️

<aside> 💡

In this section, I’ll cover PART 3 of creating your UI/UX design:

• How to start designing your UI/UX screens on Figma

For PART 1: 2. Wireframing for UI/UX - How to start your UI/UX project

For PART 2: 3a.Prototyping - Mood board and UI Brand Kit

</aside>

How to design screens on Figma

How to design screens on Figma

Designing UI/UX Screens on Figma

How to get started:

• Start by creating a frame that matches your app size - whether it’s desktop or mobile

  • Using the frame tool on the bottom tool bar or shortcut - F

• Reference your wireframe sketches for content and layout of your design

• Reference your brand kit and mood board to guide color, text, and visual design

• Begin creating your screen designs using the bottom toolbar to add text, shapes, and more

  

• Play around with sizing and effects using the right-hand toolbar

• Use the play button on the top right corner by the share button to view your design as you go

• Duplicate your frames to build onto one another, these keeps things that repeat in the same space so that they look consistent and seamless when you prototype your design
  • Duplicate Shortcut: Hold option and drag

Screens I prototyped for my onboarding flow: