DEV Community

Muhammad Ahmad
Muhammad Ahmad

Posted on

Land your dream UI/UX Designer job

Hi everyone!
A UX/UI DESIGNER here. I am starting a tutorial where I'll be teaching you how to design beautiful UI elements and incorporate them into your web app and mobile apps. This tutorial will be text-based, and beginner-friendly. You don't need to have any experience with any software tools and designer terms in general. I'll be covering everything you need to know to become a UI/UI Designer and land your dream job. So what are we waiting for?
Let's get started.

go to browser and go to figma.com
click on sign up button
a pop up appears here type your email address and your password and click on create account button
here you also have an option of continuing with google
a pop up appears type your name and select what kind of work you do
and then select for personal use from "How will you primarily use figma?"
and then click create account
a pop up appears which asks you to verify your email
go to your email and verify your email.
when you verify your emial, you'll be taken to figma main page.

figma canvas, toolbar section, how to design shapes

square R shape or circle O shape or triangle shape or arrow Shift + L shape or line shape or star shape
create all these shapes with the help of shape tools

select shapes with move option from move tools menu

two types of vector selection 1. normal selection 2. vector selection
how to go into vector selection mode and come back into normal selection
how to increase/decrease sizes of shapes(2 ways to increase/decrease) in move mode
how to increase/decrease sizes of shapes in scale mode OR differ between move and scale
delete shapes with delete buttoon
change angels of shapes and make corners smooth
use of independent corners
top left top right bottom right bottom left
these circles are calles vector points(when you enter vector mode)
click CTRL and move your mouse wheel to zoom in or out
in vector mode, many vecotor points are created when you hover
click shift to apply effects to more than one vector points

use arc property to edit a circle
start,rationa and sweep will only appear in right window when you use arc property

change thickness, start point, end point, color of arrow in stroke option on right side
use of advanced stroke settings OPTIONS stroke style dash gap dash cap miter bevel round of join miter angle

creating new point(i mean vector point on arrow) in vector mode. It's possible with all shapes. use escape key to get rid of new vector point. to use new point, first go to move mode from pen mode
line shape is similar to arrow shape in normal selection mode
use of bend tools with line in vector mode

corner radius, count and ration on stars
change polygon sides, and radius

That's all for shapes.

Oldest comments (0)