Face Parts

A face is just a collection of shapes in the right places. This app builds one — and in doing so shows you how to layer views on top of each other and position them precisely.

What you'll build

A face assembled from SwiftUI shapes and emoji: a head, two eyes, a nose, a mouth. Each piece sits in exactly the right spot using offsets and alignment.

Key concepts

ZStack for layering — ZStack stacks views in depth order, last one on top. That's exactly what you need to build up a face layer by layer.

ZStack {
    Circle()              // the head
        .fill(.yellow)
    Circle()              // left eye
        .fill(.black)
        .frame(width: 20, height: 20)
        .offset(x: -25, y: -20)
    Circle()              // right eye
        .fill(.black)
        .frame(width: 20, height: 20)
        .offset(x: 25, y: -20)
}

.offset(x:y:) — Shift a view from its center position. The x/y values are points — positive x moves right, positive y moves down.

.frame(width:height:) — Control the size of each feature independently.

Emoji as views — A Text view containing a single emoji is a perfectly valid piece of your face.

Text("👃")
    .font(.system(size: 30))
    .offset(y: 5)

Composition

This is your first real taste of SwiftUI composition — building something complex by combining simple pieces. The face is just views inside views inside views. That pattern scales to any UI.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and say hi.