SwiftUI - position at top leading this view at `x` and `y`

Mane Manero 0
Viewed 33

Goal: Match SwiftUI position coordinates with Figma.

Context: On Figma, the anchor is at the top leading of the layer. On SwiftUI, the anchor is at the center of the layer, as the documentation mentions:

/// - Returns: A view that fixes the center of this view at `x` and `y`.
@inlinable public func position(x: CGFloat = 0, y: CGFloat = 0) -> some View

So when both SwiftUI and Figma are set to x:0 and y:0 positions, they don't match.

Question: how can I set the anchor in SwiftUI to be at the top leading corner?

enter image description here

enter image description here

import SwiftUI

struct ContentView: View {
    
 
    var body: some View {
        
        ZStack {
            Circle()
            .frame(width: 132.0, height: 132.0)
            .position(x: 0, y: 0)
            
        }
        .frame(width: 731, height: 418)
        .background(.blue)

    
    }

    

}
figma swiftui macos xcode ios
1 Answers

Centering the circle at (0, 0) will make go out of bounds because of the radius. You must do one of the following:

  1. Using HStack & VStack:
ZStack {
    VStack {
        HStack {
            Circle()
                .frame(width: 132.0, height: 132.0)
            Spacer()
        }
        Spacer()
    }
}.frame(width: 731, height: 418)
.background(.blue)
  1. Center the circle at (x + radius, y + radius):
ZStack {
    HStack {
    Circle()
        .frame(width: 132.0, height: 132.0)
    }
        .position(x: 66, y: 66)
    
}
.frame(width: 731, height: 418)
.background(.blue)
userMtIT0
Related