FigmaPreviewSwiftUI

SwiftUI

FigmaPreviewSwiftUI

August 1, 2025

A Figma component preview for your SwiftUI views. You can use Figma 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.

Project is heavily inspired by flutter_figma_preview and jetpack-compose-figma-preview.

Requirements

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

Setup

Add FigmaPreviewSwiftUI to your project via Swift Package Manager.

Create personal access token in account settings.

Then pass this Figma access token via Environment.

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

Usage

If you’re using single Figma file for all designs, you can also pass it via Environment, so you won’t need to specify it for each individual component (file id could be taken from Figma share link – typically, it goes after /file/).


                                              
                                                struct FigmaPreviewApp: App {

var body: some Scene {

WindowGroup {

ContentView()

.environment(\.figmaAccessToken, “<figma-access-token>”)

.environment(\.figmaFileId, “<default-file-id>”)

}

}

}

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


                                              
                                                struct ContentView: View {

var body: some View {

FigmaView(fileId: “<file-id>”, componentId: “<component-id>”)

}

}

Alternatively, you can simply pass share link for the component.


                                              
                                                struct ContentView: View {

var body: some View {

FigmaView(link: “https://www.figma.com/file/<12123123>/Name?node-id=<123123%3A3232131>”)

}

}

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

Component list to get component IDs

When you need to get component IDs for the elements, you can use FigmaComponentsList 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). Please note that only published components will be listed (this requires paid Figma subscription to publish these). Alternatively, you could still use share links of components from Figma. You can use share link, or file id to set up FigmaComponentsList view. Or, FigmaComponentsList could use file id passed via Environment.


                                              
                                                struct ContentView: View {

var body: some View {

FigmaComponentsList()

}

}

GitHub

View Github

YOU MIGHT ALSO LIKE...

August 1, 2025
SwiftUI

SafePreviewDevice

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

August 1, 2025
SwiftUI

PreviewView

Make use of SwiftUI previews for rapidly prototyping your UIViewControllers and UIViews! The SwiftUI preview canvas is tied to a specific version of ...

August 1, 2025
SwiftUI

PreviewDevice

Requirements Dev environment: Xcode 13+, macOS 12+ iOS 13.0+, macOS 10.15+, Mac Catalyst 13.0+, tvOS 13.0+, watchOS 6.0+ Usage

August 1, 2025
SwiftUI

SwiftUIWheelPicker

Horizontal wheel picker for SwiftUI Requirements iOS 13.0+ Installation CocoaPods

July 31, 2025
SwiftUI

PermissionsSwiftUI: A SwiftUI package to handle permissions

PermissionsSwiftUI displays and handles permissions in SwiftUI. It is largely inspired by SPPermissions. The UI is highly customizable and resembles an Apple style. ...