Beginner resources for your first Figma app project

The idea of starting a career in UI/UX was planted in my brain two years ago and I aggressively dismissed the idea on the premise “I’ll never switch my traditional fine art career to a digital one.” COVID killed my small fine art business events (the largest source of my income) and galleries are a bit difficult right now, so one pandemic later my curiosity has blossomed and here I am researching and experimenting everything UI. The idea took awhile to grow on me, but eventually I made peace with it and even got excited about digitizing my visual design skills. A future with a decent paycheck is also enticing.

Disclaimer that I am not associated with or promoting any of the links and resources provided. This is from one beginner to another with the hope I can make things a little easier for getting through the sea of information out there.

From fine art to figma

So here it is. It’s not The Worst and it’s not The Greatest.

theme inspired from when I was a baker/cake decorator for a few years

So here’s everything I learned:

Building Amazing Things on Youtube made a great follow along tutorial for a food ordering app. By this point I felt comfortable stylizing to my tastes and making unique adjustments.

Here’s what I learned:

1. Alt+C to duplicate is amazing
2. Plugins! They’re easily downloaded from the Figma Community page and with a right click they’re effortlessly added to my project.

Unsplash — add free stock images and search for them right in your project

Material Design Icons — insert vectors like the home or cart symbols

Lorem ipsum — avoided making up my own dumb fill text and let this auto filler do it for me

Helpful tools:

1. Coolors — a website that provides trending color pallets and their hex codes. It completely saves me time trying to pick out my own
2. Figma’s Mobile UI Kit — It provides all the common components to easily copy/paste into my project

1. Remove.bg — a website to easily remove backgrounds from pictures for free

Notes —

1. Playing with opacity on texts and fills creates a more smooth and sophisticated look
2. My computer is very old, keeps crashing, and I need to get a new one.

Critique:

I can’t ever get better if I don’t reflect what could improve:

1. I’ve heard drop shadows are outdated. In this project I feel as though I used them as a crutch to make components stand out because I didn’t quite nail how I used my color pallet to make things pop or be easy to digest. Same goes for my inner shadows.
2. As mentioned above, I don’t believe my use of color 100% served me. Also the colors of my home page don’t feel balanced.
3. The color of my checkout button would flow better if I had just kept it the same as the other cart total buttons
4. Are gradients still cool?

I’m excited to keep learning and improving. If you have any critique or suggestions of your own please comment!

Next I’m going to try copying an app, advice I’ve heard from a lot of designers because it will make me really think about how to do things without the crutch of a follow along tutorial. After that I think I’ll be ready to make one of my own app ideas!