States and Interactions

Favorite Button animation

For example, let’s take the favorite button. The current one has the inactive design. First, make it into a component.

• Add a custom state and rename it: Tapped

While selecting Tapped, we will change some of the properties.

• In Appearance, add a new color Gradient #FA4788 - #E41B63
• Change the color of the heart icon to white

Button Interaction

Now that we have created 2 states for our Favorite Button, let's add a tap gesture to switch between them.

• In Interactions, add a trigger and select toggle tap.

The difference between the tap and toggle tap is that the tap gesture is a single action and toggle has 2 actions. Let's add an Action to our trigger.

• Select Set State, the Target is our Favorite Button, Start state is Default and End State is Tapped
• Set the Duration to 0.5 and easing to Ease In & Out

On the second tap, we will set the start one to Tapped and end to Default.

• Set the Duration to 0.5 and easing to Ease In & Out

Preview Mode

To test this interaction, we need to enter Preview Mode. Tap on the Play icon on the top-right of the screen. This is basically a simulation of your app from your device. Tap on the Favorite button and you see that it is working. To exit Preview mode, hold 2 fingers on the screen.

Booking Card Component

To this point, we will add some meat to the home screen. We will change the Booking Card to a component.

• Add a Stack and rename it Card Container. This Stack will contain our cards

• Set the Gap to 40pt, Width 100%, Height Auto and Paddings to 64, 16, 32, 16
• Duplicate the Booking Card 2 times. To make it nicer, let's change the first image of the 2 other cards

Scroll Indicator

I don’t like to see the scroll indicator on the right side. To remove it, go to the Page’s settings, in the Scrolling property, remove Auto, and disable the indicator.

Dark Mode

Since the design of the app is in Dark mode, we need to change some settings. Let's set the correct Background Color.

• Select Page, add a new color #17182B

You will soon realize that the Status Bar isn't very visible because it does not contrast well with the app's background. We can fix this by going to the Page's settings and changing its Status bar to Light.