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

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: