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.

Sentry workshop image

Flaky tests got you down?

Learn how to merge your code without having to hit “rerun” every 5 minutes 😮‍💨

Save your spot now.

Top comments (0)

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay