How to Use Figma: UI Design Tutorial for Beginners

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Dive into a comprehensive 47-minute tutorial on using Figma for UI design. Learn the basics of user interface design, set up a free Figma account, and explore the platform's features. Follow along to create a mobile app interface from scratch, utilizing templates, custom shapes, text elements, and images. Master essential skills like rearranging layouts, grouping objects, and modifying designs. Discover how to leverage the Figma Community for resources like iPhone status bars and icons. Practice creating frames, adding interactive elements, and prototyping your design. Perfect for beginners and those looking to enhance their UI design skills using this powerful cloud-based tool.

Syllabus

Introduction
What is UI Design
Signup for your FREE Figma account
Quick tour of Figma
Explore the Figma Community for templates
Finding and opening a template in Figma
Tools for modification and design
Rearranging the template
Deleting and naming
Adding frames to start your design
Setting your background color
Adding a shape
Adding a button with text
Naming the button layer
Grouping objects
Adding more text
Adding an image in Figma
Modifying images
Adding a logo
Cropping images
Figma Community - Find iPhone status bar
Adding second frame
Adding and modifying shapes
Curving corners of shapes
Explore Figma Community - Phone icons
Inserting shapes as image placeholders
Adding a circle shape with a stroke around
Adding more phone icons to the design
Adding shapes for image placeholders for multiple images at once
Pause the video here to create a frame on your own
Prototyping your design