- August 28, 2025
- Mins Read
A Figma component preview for your SwiftUI views. You can use Figma components instead of real views within your app until you implement them.
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.
FigmaPreviewSwiftUI uses SwiftUI features of macOS 11, iOS 14, tvOS 14, watchOS 7.
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>”)
}
}
}
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.
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()
}
}
This package provides you with an easy way to show tooltips over any SwiftUI view, since Apple does not provide ...
SimpleToast is a simple, lightweight, flexible and easy to use library to show toasts / popup notifications inside iOS or ...
Create Toast Views with Minimal Effort in SwiftUI Using SSToastMessage. SSToastMessage enables you to effortlessly add toast notifications, alerts, and ...