Simple App Design: Matching Colors, Figma Tips 2/3

CREATING CONTENT

Alright, jcup, bars are nice but I’d like to add some crazy colors here. I want to show you how to create a list of items that look good and is really easy to implement. Both in Figma and in Android Studio. It’s also very popular and ready to use in most of the apps.

We are going to add new colors, FAB, swag and some successes. I will show you my idea of replacing text with icons too!

Main Activity Colors

HOW IT WORKS

My Wins allow you to store your achievements so you can read them whenever you want to. I’ve got to tell you how this app should work and show…

Duplicate and Order

Create new groups. Group all item components to Item1 and duplicate it to fill the whole window. Leave 8px space between items (hold alt and drag n drop to duplicate)

Keep Bars at the beginning, then FAB, and your background at the end of frame in files

You can group all items and call it “Items”

Date Importance Colors

New Colors and Icons

I want to set colors for category and importance that will depend on value. For example categories:

video- red

business- green

adventure- orange

Importance would be like:

huge- red

big- orange

medium- green

small- gray

All icons that I used you can find on material palette icons. Edit all item variables that you want to change before setting colors.

Main Activity Colors

Let’s find them!

So you’ve got the idea but now we have to pick best colors. Here come coolors. It’s simple and easy to use. Just paste your primary color, lock it and click space to load other colors that match. If you spot great color just lock it and look for next one. When all rectangles are locked, copy hash values of picked colors to your XML file. Just add some new rows that we could use later in the android studio. Edit variables and icons of duplicated items. Now fill your category name, icon, and importance. What about a numbered list?