Redesigning my own prototype: Part 1

This is the first step of a design challenge series I set myself to develop my design and prototyping skills using Figma.

For the first step I decided to design the calendar of the date-picker reservation form of the original prototype.

Component: Calendar

I started by duplicating the original prototype file. This helps to keep things organized, and also a great way to visualize progress!

Then I sought out to the Wise People of Youtube for guidance, and found a great 8 min tutorial from Sachin Gawas.

Here's the result:

What I learned:

1. How to use the Auto Layout feature
2. Designing elements from an atomic design system method

Notes for future reference:

1. Sachin’s file was organized as the atomic design system it is, while mine had a layer for each page of the app. Next time I'll tidy things up!
2. The calendar is an static component, and the different states (past days, chosen dates, etc) were added manually. I wonder if creating instances would be more efficient.