Chapter 2: Cards & Lists

By the end of this chapter, you'll build a dashboard screen with account cards stacked in a vertical list. We cover auto layout in depth: nesting, alignment, spacing, filling, and scrolling.

Work through the lessons in order, or jump to the specific thing you need.

Auto Layout Foundations

  1. Align items left and right using Space Between — how to push things to opposite sides of a row
  2. Nest auto layouts inside each other — frames within frames, the key to complex layouts
  3. Understand Hug vs Fixed vs Fill — the 3 width/height behaviors explained

Building a Card

  1. Make a card component from scratch — build a reusable account card step by step
  2. Add changeable text properties to a component — one card, infinite text variations

Building a List

  1. Stack multiple cards in a vertical list — from one card to many, perfectly spaced
  2. Add scroll to a long list — make your list independently scrollable