https://github.com/robb/redline

Redlines for SwiftUI
https://github.com/robb/redline

design figma swiftui

Last synced: 5 months ago
JSON representation

Redlines for SwiftUI

• Host: GitHub
• URL: https://github.com/robb/redline
• Owner: robb
• License: mit
• Created: 2025-04-29T19:02:05.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-04-29T19:14:12.000Z (5 months ago)
• Last Synced: 2025-05-07T15:16:15.321Z (5 months ago)
• Topics: design, figma, swiftui
• Language: Swift
• Homepage:
• Size: 307 KB
• Stars: 294
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Redline

## Easy Redlines for SwiftUI

With Redline, you can quickly visualize positions, sizes, spacings and alignment guides to verify your implementation against specs or to debug layout problem.

![](/example.png)

```swift

import Redline

GroupBox {

    VStack(spacing: 24) {

        Image(systemName: "globe")

            .resizable()

            .aspectRatio(contentMode: .fit)

            .frame(width: 80, height: 80)

            .foregroundStyle(.tint)

            .measureSpacing()

            .visualizePosition(color: .blue, in: .named("outside"))

            .visualizeSize()

        HStack(alignment: .firstTextBaseline) {

            Image(systemName: "figure.wave")

                .visualizeAlignmentGuide(.firstTextBaseline)

            Text("Hello, world!\nHow are you?")

                .visualizeAlignmentGuide(.firstTextBaseline)

        }

        .measureSpacing()

        Text("Thank you, bye").font(.caption)

            .measureSpacing()

            .visualizePosition(color: .blue, edges: [.bottom, .trailing], in: .named("outside"))

    }

    .visualizeSpacing(axis: .vertical)

    .padding(8)

}

.visualizeSize()

.coordinateSpace(name: "outside")

.visualizePosition(color: .blue)

```