Play all

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

Description:

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.

How to Use Figma: UI Design Tutorial for Beginners

Teacher's Tech

Add to list

#Art & Design #Design & Creativity #Figma #Programming #Web Development #Web Design #Graphic Design #Prototyping #Visual Design #Digital Design #User Experience Design #User Interface Design #User Interfaces