Getting started with Figma and Setting Up as a UI/UX Designer
Published: 2023-06-28 00:08:02

Today, I’ve started documenting my Journey starting as a **UI/UX Designer.** I’ll be doing this continuously as I keep learning. With my little idea as a graphic designer using Corel-draw, I’d say using the **Figma Application** to design, is like being on steroids and I’d be so glad to make the best out of it.

Firstly, who is a **UI/UX Designer** and what does it entail? **UX** stands for **“User Experience”**, and **UI** stands for **“User Interface”**. The **UX** is on designing user personas and flows, wireframes, conducting user research, test products on real users, while the **UI designer’s** job is to bring the **UX designer’s** ideas to life. They are in charge of designing how the product is laid out visually. So, it’s okay to say that they both work in tandem.

A **UI/UX designer’s** job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you’re passionate about the latest technology trends and devices, you’ll find great fulfillment in being involved in the design process for the next hot gadget. The **UI/UX Designer** helps create products with a good user experience. They are responsible for understanding what users want from their devices and then designing it so they can find all of its features easily without any hassle.

Before I kick start into how to set up the **Figma account** and then **create a new file**, **renaming your file from “Untitled”,** **choosing the templates you want with different sets of presets**, **adding frames,** **working with pages,** **adding contents,** **creating and editing shapes,** **adding and formatting text,** **placing images and creating a mask,** and **setting up local fonts on the browser** by installing the plugins and downloading the installer as pkg-file.

Then move on to working smartly with **Layers,** **Components and Constraints,** **Versioning,** and finally **Prototype** — making it interactive, device preview, sharing and exporting what you’ve designed. I’ll be writing on all of these topics as I make progress with previews from **Figma**, but before we continue with that in our next article, let’s take a look at **“The Generic UX Design Workflow”** and see how **Figma** fits in.

> **The Generic UX Design Workflow**
- Concepts, brainstorming and gathering Info
- User Flows — How they navigate through the app, and website to 
  get from point A to Point B.
- Wireframe/Design — To help designers think and communicate about 
  the structure of the software or website you’re building.
- Prototype — To make it so that people could get to test it out 
  on devices — Like making a “tap” on the button, they can go on 
  another screen for instance and get a “feel” of how it’s going 
  to work.
- Share/Test/Feedback, and iterate changes based on that feedback 
  and work with others collaboratively.
- Then finally build. — This is a real generic process depending on the project, there could be more depending on the design.

Join me in my next article as we delve in properly into designing our next big Project as we focus on the user and their journey with the product.