The first approach consists of showing the filled-bookmark icons on top of the original ones when an item is bookmarked. In order to do so, we'll add a filled version of the bookmark icon on top of the empty one and control the opacity with an animation when the user clicks on the corresponding area.
First, we start by creating a new Hype prototype using a 360x640 px scene and adding the activities view mock-up as a layer in the background. Next, we add the filled-bookmark icon as a new layer, placing it on top of the bookmark icon of the first element in the list.