Figma 预览

Figma 预览是一个 Swift 库，旨在简化 Figma 设计集成到 Xcode 预览中的过程。它允许开发者直接从 Figma 文件预览 UI 组件，从而促进更流畅的设计到代码的转换，并确保你的应用程序 UI 与设计规范精确匹配。

功能特性

直接预览： 在 Xcode 预览中即时预览 Figma 设计。
易于集成： 与 Xcode 无缝集成，利用 Swift Package Manager 进行简单的安装。
设计同步： 保持应用程序 UI 与 Figma 中最新的设计更改同步。

安装

Swift Package Manager

你可以将 Figma 预览添加为 Xcode 项目的包依赖项。

从 “File”（文件）菜单中，选择 “Swift Packages” > “Add Package Dependency…”（添加包依赖项...）。
输入包仓库 URL：https://github.com/artemnovichkov/figma-preview.git
指定适合你项目的版本规则。

用法

导入库

首先，将 FigmaPreview 导入你的 Swift 文件

import FigmaPreview

用法示例

以下是使用 FigmaPreview 显示 Figma 中设计组件的 3 种方法

使用本地图片

#Preview {
    ContentView()
        .compare(with: Image(.component))
}

你可以导出 PNG 格式的最终组件，并将它们保存到 Preview Assets.xcassets。这些资源仅包含在 debug 构建中，并在你创建应用程序的归档文件后删除。你可以在 Build programmatic UI with Xcode Previews WWDC23 会议中了解更多关于开发资产的信息。

使用 Figma 组件的 URL

#Preview {
    ContentView()
        .compare(with: URL(string: "https://www.figma.com/file/<file-id>/Untitled?node-id=<component-id>")!)
        .environment(\.figmaAccessToken, "<figma-access-token>")
}

你可以在 Layers (图层) 菜单中选择所需的组件，并通过 Copy/Paste as > Copy link (复制/粘贴为 > 复制链接) 菜单复制链接。

使用 Figma 组件的文件 ID 和组件 ID

#Preview {
    ContentView()
        .compare(with: "<file-id>", componentID: "<component-id>")
        .environment(\.figmaAccessToken, "<figma-access-token>")
}

你可以从 Figma 链接中提取所需的 ID。

如果你使用 Figma URL 或 ID，请不要忘记通过 Figma > Help and account > Account settings (Figma > 帮助和帐户 > 帐户设置) 菜单生成 Figma 访问令牌。

预览选项

Figma 预览添加了一个带有预览选项的面板

隐藏预览。预览是隐藏的，你可以检查和更新你的视图。
图层。将预览作为带有不透明度配置的叠加层添加。
比较。添加带有可移动滑块的预览。

查看 FigmaPreviewExample 项目来亲自尝试。

贡献

欢迎大家贡献代码！如果你想帮助改进 Figma 预览，请提交 Pull Request 或打开 Issue 进行讨论。

作者

Artem Novichkov, https://www.artemnovichkov.com/

许可证

该项目采用 MIT 许可证。有关更多信息，请参见 LICENSE 文件。