DEV Community

Cover image for Getting started with Figma and Setting Up as a UI/UX Designer
Godwin Effiòng
Godwin Effiòng

Posted on

Getting started with Figma and Setting Up as a UI/UX Designer

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.

Top comments (0)