ZeplinPreviewSwiftUI
  • August 2, 2025

A Zeplin component preview for your SwiftUI views. You can use Zeplin components instead of real views within your app until you implement them.

The Purpose


To speed up prototype development and test design choices before full-featured implementation. This is basically a clone of figma-preview-swiftui, project is heavily inspired by flutter_figma_preview and jetpack-compose-figma-preview.

Requirements


ZeplinPreviewSwiftUI uses SwiftUI features of macOS 11, iOS 14, tvOS 14, watchOS 7.

Setup


Add ZeplinPreviewSwiftUI to your project via Swift Package Manager.

Create personal access token in account settings.

zeplin-access-token

Then pass this Zeplin access token via Environment.

struct ZeplinPreviewApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.zeplinAccessToken, “<zeplin-access-token>”)
}
}
}

struct ZeplinPreviewApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.zeplinAccessToken, “<zeplin-access-token>”)
}
}
}

Usage


If you’re using single Zeplin project for all designs, you can also pass it via Environment, so you won’t need to specify it for each individual component. Project id could be taken from Zeplin App link (not web link) – typically, it goes after pid=.

struct ZeplinPreviewApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.zeplinAccessToken, “<zeplin-access-token>”)
.environment(\.zeplinProjectId, “<default-project-id>”)
}
}
}

When you need to insert your Zeplin component, you can use two ways. Either you can specify component ID and optionally project ID directly.

struct ContentView: View {
var body: some View {
ZeplinView(projectId: “<project-id>”, componentId: “<component-id>”)
}
}

Alternatively, you can simply pass Zeplin App link for the component.

struct ContentView: View {
var body: some View {
ZeplinView(link: “zpl://components?pid=NNNNNNN&coids=MMMMMMM”)
}
}

ZeplinView will maintain its aspectRatio, but you’ll need to control its frame when needed.

Project and component lists to get component IDs


When you need to get component IDs for the elements, you can use ZeplinProjectsList view (it comes with NavigationView, so you could put somewhere in developer menu of your app on early stages, or use separate app to browse components). Also, there is ZeplinComponentsList which shows components for a specific project (you can use Environment, or pass project ID directly to the view). Please note that only components published in Styleguide will be listed.

struct ContentView: View {
var body: some View {
ZeplinProjectsList()
}
}

GitHub


View Github

YOU MIGHT ALSO LIKE...
StarRating

 

CarBode

Free and Opensource Barcode scanner & Barcode generator for swiftUI

🎭 Gala

Gala is a Swift Package Manager project for macOS, iOS, tvOS, and watchOS to help you create SwiftUI preview variants. ...

FigmaPreviewSwiftUI

A Figma component preview for your SwiftUI views. You can use Figma components instead of real views within your app ...

SafePreviewDevice

Motivation At WWDC 2019, Apple announced SwiftUI a new library for building UI in a simple and fast way. Xcode’s ...