Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/artemnovichkov/figma-preview
Add Figma design to your Xcode Preview
https://github.com/artemnovichkov/figma-preview
figma ios swift swiftui xcode
Last synced: 6 days ago
JSON representation
Add Figma design to your Xcode Preview
- Host: GitHub
- URL: https://github.com/artemnovichkov/figma-preview
- Owner: artemnovichkov
- License: mit
- Created: 2024-02-13T14:25:35.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-15T07:53:57.000Z (9 months ago)
- Last Synced: 2024-09-16T16:20:53.472Z (about 2 months ago)
- Topics: figma, ios, swift, swiftui, xcode
- Language: Swift
- Homepage:
- Size: 706 KB
- Stars: 37
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Figma Preview
[](https://swiftpackageindex.com/artemnovichkov/figma-preview)
[](https://swiftpackageindex.com/artemnovichkov/figma-preview)
Figma Preview is a Swift library designed to streamline the integration of Figma designs into your Xcode Preview. It allows developers to preview UI components directly from Figma files, facilitating a smoother design-to-code transition and ensuring that your app's UI matches the design specifications with precision.
## Features
- **Direct Preview:** Instantly preview Figma designs in your Xcode Preview.
- **Easy Integration:** Seamlessly integrates with Xcode, leveraging Swift Package Manager for straightforward installation.
- **Design Sync:** Keep your application's UI in sync with the latest design changes in Figma.
## Installation
### Swift Package Manager
You can add Figma Preview to an Xcode project by adding it as a package dependency.
1. From the File menu, select Swift Packages > Add Package Dependency...
2. Enter the package repository URL: `https://github.com/artemnovichkov/figma-preview.git`
3. Specify the version rules that make sense for your project.
## Usage
### Importing the Library
First, import FigmaPreview into your Swift file:
```swift
import FigmaPreview
```
### Example Usage
Here's 3 ways to use FigmaPreview to show a design component from Figma
1. Using local images:
```swift
#Preview {
ContentView()
.compare(with: Image(.component))
}
```
You can export final components in PNG format and save them to Preview Assets.xcassets. These assets will only be included in debug builds and removed once you create an archive of your app. You can learn more about development assets in [Build programmatic UI with Xcode Previews](https://developer.apple.com/videos/play/wwdc2023/10252) WWDC23 session.
2. Using URL for Figma component:
```swift
#Preview {
ContentView()
.compare(with: URL(string: "https://www.figma.com/file//Untitled?node-id=")!)
.environment(\.figmaAccessToken, "")
}
```
You can select a required component in Layers menu and copy a link via `Copy/Paste as > Copy link` menu.
3. Using File ID and Component ID for Figma component:
```swift
#Preview {
ContentView()
.compare(with: "", componentID: "")
.environment(\.figmaAccessToken, "")
}
```
You can extract required IDs from Figma link.
If you're using Figma URLs or IDs, don't forget to generate a Figma Access Token via `Figma > Help and account > Account settings` menu:
## Preview Options
Figma Prview add a panel with preview options:
1. Hidden preview. The preview is hidden, you can check and update your view.
2. Layers. Adds the preview as an overlay with opacity configuration.
3. Compare. Adds the preview with a movable slider.
Check `FigmaPreviewExample` project to try it yourself.
## Contributing
I welcome contributions! If you would like to help improve Figma Preview, please submit a pull request or open an issue for discussion.
## Author
Artem Novichkov, https://www.artemnovichkov.com/about
## License
The project is available under the MIT license. See the [LICENSE](./LICENSE) file for more info.