…release year layer and change the text to 1h 42 min denoting the movie’s duration. Select both these text layers and create an Auto Layout (Shift-A). In the Auto Layout Properties, select Horizontal direction with a spacing of 12. Add another text layer (T) in the layout with…

…wouldn’t it be nicer to have buttons that resize automatically? This is where one of Figma’s most powerful features comes into play: Auto Layout. Auto Layout Auto Layout lets you create frames that adapt to the size of their contents. This makes it easy to create responsive…

…genres component. Select the added instance, right-click and choose the Detach Instance option or press Option-Command-B/Alt-Control-B. Expand the genres’ Auto Layout frame and hold Shift while selecting the three genre groups to select them all at once. Apply a corner radius of 10, remove the fill…

…text Action. Use the newly created Filter Text text style for this layer. With the layer selected, press Shift-A to create an Auto Layout frame from the text layer. Name it criteria. From the Stroke section of the Properties panel, give the criteria frame a stroke of width…

Trace over provided screenshots for two popular apps to study their layout and identify patterns and structures used to build them.

…component. Then, change the fill style for the genres text in the genres component. You also need to change the fill for the enclosing Auto Layout frames. Styling the Icons Before tackling the navigation component, take a moment to work with the icons. Select the individual icon paths…

…navigation to bring you from the movie List screen to the movie Details screen. From the movies-list-trending frame, expand the movies Auto Layout frame and select the frame for Birds of Prey. From the Properties panel on the right, click the Prototype option. A + button will appear…