Day One was me reacquainting myself with Figma. I started by reviewing the basics of the interface and exploring the various tools and features available. I also took some time to familiarize myself with the keyboard shortcuts and the different ways to navigate the canvas. Juxtopposed video on this was super helpful and is what kicked off this idea!

Who doesn’t like cards on websites. They come in all sorts of… well not shapes but sizes and designs. I’ve seen truly beautiful ones and wanted to get better with playing with multiple layers.

I knew I wanted a simple card consisting of a header, small paragraph, an icon, and a gradient. I often see cards come in threes and when I’m playing with colors in counts of three it’s very difficult for me to not think of Pokémon, so I just went with it!

There are actually several layers to each card:

1. A circle with it’s midpoint roughly anchored to the card’s bottom right corner.
2. A rectangle above it acting as a mask for the circle and bringing in the darker emerald/blue/rose colors.
3. A rectangle of the same size above that with a semi-opaque and lighter emerald/blue/rose color with an inner-shadow of the darker color.
4. The text and icon are the final layers.

Even the button has a semi-transparent background which allows the main color to bleed through, as well as a semi-transparent border.

These are simple but I like them!

There is no goal to do one per day, but I’d like to do at least four three week so I can see progress. I also plan to write a short blog (or micro-blog, if you will) about each design I create or copy. If you’re in a similar boat, I encourage you to jump on board and do the same!

I’ll be sharing my progress on X/Twitter and LinkedIn. If you’re interested in following along, feel free to follow me on those platforms!