FigmaExport

命令行工具，用于将颜色、图标和图像从 Figma 导出至 Xcode / Android Studio 项目。

• 颜色 - Figma 的颜色样式
• 图标 - Figma 的带有小黑向量图像的组件
• 图像 - 带有色图像的 Figma 组件（亮/暗）

为什么我们开发了此工具

• Figma 不支持将颜色和图像导出至 Xcode / Android Studio。手动导出需要很长时间。
• 为了方便同步组件库与代码

特性

• 直接将浅色和深色调色板导出至 Xcode / Android Studio 项目
• 将图标导出至 Xcode / Android Studio 项目
• 将图像导出至 Xcode / Android Studio 项目

结果

iOS

颜色

当您执行 figma-export colors 命令时，figma-export 会将颜色从 Figma 直接导出到您的 Xcode 项目的 Assets.xcassets 文件夹。

Figma 浅色主题	Figma 深色主题	Xcode

此外，还将创建一个 Color.swift 文件，以便从代码中使用颜色。

 import UIKit
 
 extension UIColor {
    static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
    static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
    static var backgroundVideo: UIColor { return UIColor(named: #function)! }
    ...
 }

图标

图标将以 模板图像 渲染模式导出为 PDF 文件。

图像

图像将以相同的方式导出为 PNG 文件。

Android

颜色将被导出到 values/colors.xml 和 values-night/colors.xml 文件。

图标将被导出到 drawable 目录作为矢量 xml 文件。

图像将被导出到 drawable 和 drawable-night 目录作为矢量 xml 文件。

安装

手动

下载最新版本并阅读 用法

CocoaPods + Fastlane

将以下行添加到您的 Podfile 中

pod 'FigmaExport'

这将会在您的下一个 pod install 执行期间将 FigmaExport 二进制文件和依赖项下载到 Pods/ 目录中，并在您的 Fastfile 中允许您通过 Pods/FigmaExport/Release/figma-export 调用它。

将以下行添加到您的 Fastfile 中

lane :sync_colors do
  Dir.chdir("../") do
    sh "Pods/FigmaExport/Release/figma-export colors ."
  end
end

不要忘记将 figma-export.yaml 文件放置在项目目录的根目录下。

运行 fastlane sync_colors 以运行 FigmaExport。

使用说明

1. 打开 Terminal.app

2. 转到包含 figma-export 文件的文件夹

3. 运行 figma-export

   要导出颜色，请使用 colors 参数

   ./figma-export colors -i figma-export.yaml

   要导出图标，请使用 icons 参数

   ./figma-export icons -i figma-export.yaml

   要导出图像，请使用 images 参数

   ./figma-export images -i figma-export.yaml

参数

参数 -i 或 -input 指定 figma-export.yaml 文件的路径，其中存储了所有属性：figma，ios，android。

如果 figma-export.yaml 文件位于 figma-export 可执行文件旁边，则可以省略 -i 选项。

./figma-export colors

以下是 figma-export.yaml 文件的示例

---
figma:
  teamId: '717334107655123456'
  projectId: '3143123'
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345

# [optional] Common export parameters
common:
  colors:
    # RegExp pattern for color name validation before exporting 
    nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
  icons:
    # RegExp pattern for icon name validation before exporting 
    nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
  images:
    # RegExp pattern for image name validation before exporting
    nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name

# [optional] iOS export parameters
ios:
  # Path to the Assets.xcassets directory
  xcassetsPath: "./Resources/Assets.xcassets"
  
  # Parameters for exporting colors
  colors:
    # Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
    assetsFolder: Colors
    # Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
    colorSwift: "./Sources/Presentation/Common/Color.swift"
    # Color name style: camelCase or snake_case
    nameStyle: camelCase

  # Parameters for exporting icons
  icons:
    # Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
    assetsFolder: Icons
    # Icon name style: camelCase or snake_case
    nameStyle: camelCase
    # [optional] Enable Preserve Vector Data for specified icons
    preservesVectorRepresentation:
    - ic24TabMain
    - ic24TabHistory
    - ic24TabProfile

  # Parameters for exporting images
  images:
      # Name of the folder inside Assets.xcassets where to place images (.imageset directories)
      assetsFolder: Illustrations
      # Image name style: camelCase or snake_case
      nameStyle: camelCase

# [optional] Android export parameters
android:
  mainRes: "./main/res"

Figma 属性

您必须通过环境变量提供 Figma 个人访问令牌。 export FIGMA_PERSONAL_TOKEN=value 此令牌可让您访问 Figma API。通过您的用户资料页面或Figma API 文档网站生成个人访问令牌。如果使用 Fastlane，只需将以下行添加到 fastlane/.env 文件即可 FIGMA_PERSONAL_TOKEN=value

• figma.teamId — 团队 Id。要获取团队 Id，请浏览您所属团队的团队页面。团队 Id 将位于单词 team 之后和您的团队名称之前。
• figma.projectId —— 项目ID。要获取项目ID，请导航到项目页面。项目ID将位于URL中“project”一词之后和项目名称之前。
• figma.lightFileId —— 包含浅色调色板和深色图片的文件的ID。要获取文件ID，请打开文件。文件ID将位于URL中“file”一词之后和文件名之前。
• figma.darkFileId —— (可选) 包含深色调色板和深色图片的文件的ID。

iOS属性

• ios.xcassetsPath —— 要导出颜色、图标和图像的目录 Assets.xcassets 的相对或绝对路径。
• ios.colors.assetsFolder —— 在 Assets.xcassets 内部颜色导出的文件夹名称。
• ios.colors.colorSwift —— 到 Color.swift 文件的相对或绝对路径。
• ios.colors.nameStyle —— 颜色名称样式：camelCase或snake_case
• ios.icons.assetsFolder —— 在 Assets.xcassets 内部图标导出的文件夹名称。
• ios.icons.nameStyle —— 图标名称样式：camelCase或snake_case
• ios.icons.preservesVectorRepresentation —— 支持保存矢量数据的图标名称数组。
• ios.images.assetsFolder —— 在 Assets.xcassets 内部图像导出的文件夹名称。
• ios.images.nameStyle —— 图像名称样式：camelCase或snake_case  

Android属性

• android.path —— ъп relativ 或绝对路径到包括其在内的 main/res 文件夹。颜色将被导出到 ./values/colors.xml 和 ./values-night/colors.xml。

设计要求

通用

如果一个颜色、图标或图像仅适用于iOS或Android平台，则其属性中的描述字段应包含“ios”或“android”一词。如果一个颜色、图标或图像仅由设计师使用并且不应导出，则描述字段中应指定“none”一词。

对于 figma导出颜色

如果您的Figma项目支持暗黑模式，那么您的项目中必须包含两个文件。其中一个应包含暗黑色彩板，另一个是亮色色彩板。色彩名称和数量必须匹配。

示例

文件	样式

对于 figma导出图标

您的Figma项目中必须包含一个含有“图标”框架的文件。如果支持暗黑模式，您必须有两个Figma文件。每个文件都必须含有“图标”框架。

对于 figma导出图片

您的Figma项目中必须包含一个含有“插图”框架的文件。如果支持暗黑模式，您必须有两个Figma文件。每个文件都必须含有“插图”框架。

贡献

我们非常愿意接受对这个项目的pull请求。

授权

figma-export是在MIT协议下发布的。有关详细信息，请参阅LICENSE。

反馈

如果您在使用 FigmaExport 时遇到问题或希望添加新功能，请随意创建问题或联系我。

作者

Daniil Subbotin - [email protected]