Salsa 0.7.0

Salsa 0.7.0

×

由 Max Rabiciuc 和 Yelp 维护。

Salsa 0.7.0

  • 由
  • Yelp iOS 团队

Carthage compatible CocoaPods Compatible

什么是 Salsa?

Salsa 是一个开源库，用于渲染 iOS 视图并将它们导出为 Sketch 文件。我们创建了 Salsa，旨在弥合设计和工程之间的差距，从而创建 UI 视觉样式的单一真相来源。

如何工作

在 iOS 模拟器中运行 Salsa 将在指定目录中输出两个文件：一个 .salsa 文件和一个名为 images 的文件夹。然后，您可以传递这两个输入到 salsa 命令行工具，以将它们编译成一个 .sketch 文件。

为什么需要两步？

某些仅限 macOS 的 API 需要被用来对 .sketch 文件中的文本进行编码。通过两个步骤，我们可以定义出一个更容易操作的中间文件格式，而不是完整的 sketch 文件格式。这意味着我们可以在未来将其用于其他平台。

安装 Salsa

Cocoapods

pod 'Salsa'

Carthage

github 'Yelp/salsa'

Homebrew

brew tap yelp/salsa
brew install salsa

使用 Salsa

import Salsa
将视图转换为 Sketch 组
// Configure the export directory
SalsaConfig.exportDirectory = "/some_directory"

// Convert a view into a group
let myGroup = myView.makeSketchGroup()
将组放入 sketch 文档并导出为 salsa 文件
// Create a page containing the generated group, and insert it into a Document
let document = Document(pages: [Page(layers: [myGroup])])

// Export the document to disk
try? document.export(fileName: "my_file")
将 salsa 文件转换为 sketch 文件

在您选择的终端中运行以下命令

$ salsa -f /some_directory/my_file.salsa -e /some_directory/my_file.sketch

创建Sketch文件以记录您的标准UI元素

我们提供一些辅助工具，帮助您直接记录元素。您可以通过将视图类适配到画板来组织视图的示例。

extension View1: ArtboardRepresentable {
  static func artboardElements() -> [[ArtboardElement]] {
    ...
  }
}

如果您还想创建与生成画板相对应的符号，可以将视图适配到SymbolRepresentable。

extension View2: SymbolRepresentable {
  static func artboardElements() -> [[ArtboardElement]] {
    ...
  }
}

从以下ArtboardRepresentable和SymbolRepresentable视图

// Configure the export directory
SalsaConfig.exportDirectory = "/some_directory"

// Generate the artboards and symbols
let artboardsAndSymbols = makeArtboardsAndSymbols(from: [[View1.self], [View2.self]])

// Put the artboards and symbols onto their own dedicated pages
let artboardPage = Page(name: "Artboards", layers: artboardsAndSymbols.artboards)
let symbolPage = Page(name: "Symbols", layers: artboardsAndSymbols.symbols)

// Create a document with the generated pages and export it
let document = Document(pages: [artboardPage, symbolPage])
try? document.export(fileName: "my_file")

示例项目

查看示例项目以了解Sasla在生产环境中的应用。Example应用使用测试目标来生成Sketch文件，无需手动启动Xcode。

在克隆存储库之后运行以下命令以生成示例项目的Sketch文件：

cd Example
pod install
./generate_sketch

这将创建一个位于项目目录内的新文件名为ExampleSketch.sketch。

使用文本编辑器打开generate_sketch以查看如何完成此操作。

文档

有关Salsa API的全面说明，请参阅文档