Sketch SF UI Font Fixer 项目教程

Sketch SF UI Font Fixer 项目教程

Sketch-SF-UI-Font-FixerA Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app.项目地址:https://gitcode.com/gh_mirrors/sk/Sketch-SF-UI-Font-Fixer

1. 项目的目录结构及介绍

Sketch-SF-UI-Font-Fixer/
├── sketch-sf-font-fixer.sketchplugin/
│   └── Contents/
│       ├── Sketch/
│       │   ├── manifest.json
│       │   └── script.js
│       ├── Resources/
│       │   └── ...
│       └── ...
├── .gitignore
├── LICENSE
├── README.md
└── appcast.xml

• sketch-sf-font-fixer.sketchplugin/: 插件的主目录，包含插件的所有内容。
  • Contents/: 插件的核心内容目录。
    • Sketch/: 包含插件的脚本和配置文件。
      • manifest.json: 插件的配置文件，定义了插件的基本信息和行为。
      • script.js: 插件的主要脚本文件，负责调整字符间距。
    • Resources/: 包含插件所需的资源文件。
• .gitignore: Git 忽略文件列表。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• appcast.xml: 插件的更新信息文件。

2. 项目的启动文件介绍

项目的启动文件是 sketch-sf-font-fixer.sketchplugin/Contents/Sketch/script.js。这个文件包含了插件的主要逻辑，负责调整使用 SF UI 字体的文本层的字符间距。

// script.js 文件内容示例
export default function() {
  const sketch = require('sketch')
  const document = sketch.getSelectedDocument()
  const selectedLayers = document.selectedLayers

  selectedLayers.forEach(layer => {
    if (layer.type === 'Text') {
      // 调整字符间距的逻辑
    }
  })
}

3. 项目的配置文件介绍

项目的配置文件是 sketch-sf-font-fixer.sketchplugin/Contents/Sketch/manifest.json。这个文件定义了插件的基本信息和行为。

{
  "name": "Sketch SF UI Font Fixer",
  "identifier": "com.kylehickinson.sketch-sf-ui-font-fixer",
  "version": "1.0",
  "description": "A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app.",
  "author": "Kyle Hickinson",
  "authorEmail": "kyle@hick.in",
  "commands": [
    {
      "name": "Fix SF UI Font Character Spacing",
      "identifier": "fix-sf-ui-font-character-spacing",
      "script": "script.js",
      "handler": "default",
      "shortcut": "ctrl cmd t"
    }
  ],
  "menu": {
    "title": "Sketch SF UI Font Fixer",
    "items": [
      "fix-sf-ui-font-character-spacing"
    ]
  }
}

• name: 插件的名称。
• identifier: 插件的唯一标识符。
• version: 插件的版本号。
• description: 插件的描述信息。
• author: 插件的作者。
• authorEmail: 作者的联系邮箱。
• commands: 定义插件的命令和行为。
  • name: 命令的名称。
  • identifier: 命令的唯一标识符。
  • script: 命令对应的脚本文件。
  • handler: 脚本中的处理函数。
  • shortcut: 命令的快捷键。
• menu: 定义插件在 Sketch 菜单中的显示方式。
  • title: 菜单项的标题。
  • items: 菜单项包含的命令。

Sketch-SF-UI-Font-FixerA Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app.项目地址:https://gitcode.com/gh_mirrors/sk/Sketch-SF-UI-Font-Fixer