Commit 7b6a8fdf authored by leadream's avatar leadream

README-CN done

parent 704a87ac
# Figma 图标自动化插件
[English](./README.md)
>第一次配置过程比较繁琐,且需要一定的开发知识,可以邀请开发同学一起完成。
Figma 图标自动化插件是一个可以帮助你将设计文件中的图标组件转换为 React 组件代码,并上传至 NPM 以便开发直接使用命令行安装和更新的插件。设计师可以通过此插件快速交付图标文件,它能省去很多不必要的中间环节,从而达到让设计师轻轻一点就更新,开发一条命令就下载的效果,**整个过程中两人都不用离开座位多说一句话**
本项目灵感来源于 [GitHub Octicon](https://github.com/primer/octicons)[Feather Icon](https://github.com/feathericons/react-feather),感谢这两个很棒的图标库。感兴趣的朋友可以了解一下 [GitHub 怎样使用 Figma API 来交付图标的](https://github.blog/2018-04-12-driving-changes-from-designs/)
## 它是怎样工作的?
![他是怎样工作的](./imgs/flow.jpg)
整个流程比较复杂,但大部分都是自动化的,只需要一次配置,后续使用都非常简单。整个过程大致可以分为六步:
- **创建组件**
首先,设计师应该创建一个 Figma 文件,并在里面来设计所有的图标。需要注意的是,最后要将图标转换为组件,因为整个过程只会转换组件。
- **插件生成 Pull Request**:安装好插件之后,填写自己对应的 GitHub 仓库信息,每次更新之后通过插件来发布版本更新,这会在你的仓库中生成一个 Pull Request,也就是一个合并请求。
- **合并 PR,触发 Actions**:前往 GitHub 页面,将这个 PR 合并至主分支,这会触发仓库内定义好的一连串 [GitHub Actions](https://github.com/features/actions)(GitHub 的自动化流程)。
- **处理转换 SVG 代码**:这一连串 GitHub Actions 会做这么几件事:首先它会通过 Figma API 自动获取组件的 SVG 代码,接着将 SVG 代码中的冗余代码移除,再将其转换为 React 组件格式的代码。
- **发布至 NPM**[NPM](https://www.npmjs.com/) 是一个前端的包管理工具,你可以将你的组件库上传至它的云端存储中,这样开发同学就可以使用熟悉的命令行安装使用或者更新了。上述 Actions 的最后一步就是将生成的图标组件库上传至 NPM。
- **开发安装或更新**:一般前端都会使用 NPM 来管理自己项目中的依赖库,上述步骤完成后他们就可以通过执行命令来安装或者更新图标库了,并在代码中直接引入使用了。
## 如何使用
### 先决条件
- 首先,你需要有一个 [GitHub](https://github.com) 账号。
- 其次,你还需要有一个 [NPM](https://www.npmjs.com) 账号。
如果你还没有的话,只需要去对应的官网注册就可以了,注册过程此处按下不表。
### 使用步骤
#### 1. 创建 Figma 文件
首先你需要创建一个 Figma 文件,在里面存放你的图标组件,你可以从我的[示例文件](https://www.figma.com/file/gTaV6nOPiDx0F3c7WHPME3/juuust-icon)复制,也可以自己创建一个文件,不过图标要转为 master 组件。
![figma-file](./imgs/figma-file.png)
#### 2. 安装插件
还没上线,你可以下载这个仓库并解压,在 Figma 客户端中的插件页面右侧点击 Development 后面的加号,创建一个新插件。然后点击 Link exsiting plugin,选择解压出来的文件中的 manifest.json 文件。
![install-plugin](./imgs/install-plugin.png)
#### 3. fork demo 仓库
现在你需要 fork 我的 demo 仓库,也就是 https://github.com/leadream/juuust-icon ,打开后点击右上角的 fork 就可以把这个仓库复制到自己的账号下。
![fork-repository](./imgs/fork-repository.png)
#### 4. 生成三个 token
我们需要 Figma、GitHub 和 NPM 三个平台的 token。
- **Figma**:打开 Figma 的个人设置页面,创建一个新的 token,复制下来备用(只会显示这一次,一刷新就没了)。
![figma-token](./imgs/figma-token.png)
- **GitHub**:打开 [GitHub token](https://github.com/settings/tokens) 页面,生成一个 token,复制下来备用。
![github-token](./imgs/github-token.png)
- **NPM**:前往 NPM 的个人 token 页面,生成一个 token,复制下来备用。
![npm-token](./imgs/npm-token.png)
#### 5. 填写三个 Secrets
进入 GitHub 的仓库下 Settings -> Secrets 页面中,添加三个 Secret。它们分别是:
- **FIGMA_FILE_URL**:第一步创建的 Figma 文件地址。
- **FIGMA_TOKEN**:上一步创建的 Figma token。
- **NPM_AUTH_TOKEN**:上一步创建的 NPM token。
![repo-secrets](./imgs/repo-secrets.png)
#### 6. 在插件中填写仓库地址和 token
打开 Figma,右键依次选择 Plugins -> Development -> icon-automation,打开插件,此时我们需要填写两个东西。第一个是填写第三步 fork 到你的账号下的仓库地址(是你自己的仓库地址,不要填写我的 demo 的地址)。同时填写第四步中生成的 GitHub token,点击 go 之后插件会进入到发布页面。
![plugin-settings](./imgs/plugin-settings.png)
#### 7. 更改仓库信息
在发布之前,你需要更新一下仓库中 package.json 中的一些信息,首先是 name,改成一个你自己喜欢的名字。name 要求只能使用小写字母、中划线或下划线组合,你还可以按照 @your-name/package-name 的形式命名。其次是 version,把它改成 0.0.0 就可以了。
![update-package-json](./imgs/update-package-json.png)
还有一些比如 description、repository、author 等等都可以改成你自己的信息。
#### 8. 在插件中填写版本号,发布更新
此时我们打开 Figma 客户端,填写一个版本号,并填写自己的修改信息,然后点击 push to GitHub,等待完成。
![plugin-publish](./imgs/plugin-publish.png)
发布成功,这一步会在你的仓库中创建一个 PR,点击成功提示中的链接就可以打开这个 PR 页面。
![plugin-published-successfully](./imgs/plugin-published-successfully.png)
#### 9. 合并 PR,等待 Actions 执行完毕
在 PR 页面,我们点击合并按钮,将这个 PR 合并至主仓库。
![merge-pr](./imgs/merge-pr.png)
这个操作会触发 GitHub Actions,进入 Actions 页面可以看到正在逐步执行定义好的流程。
![waiting-workflow](./imgs/waiting-workflow.png)
点击进去可以看到具体每一步执行的情况。
![workflow-steps](./imgs/workflow-steps.png)
#### 10. 执行完毕,开发在命令行安装、更新
等 GitHub Actions 的每一步都完成之后,开发就可以在终端执行 `npm add YOUR_PACKAGE_NAME` 来安装这个组件库了,如果已经安装,只需要执行 `npm update YOUR_PACKAGE_NAME` 来更新就可以了。
如果使用的是 yarn,则需要执行 `yarn add YOUR_PACKAGE_NAME` 来安装或执行 `yarn upgrade YOUR_PACKAGE_NAME` 来更新。
![yarn-add](./imgs/yarn-add.png)
接着,他就可以在 React 项目代码中引入组件库并使用了。
![use-in-code](./imgs/use-in-code.png)
## 注意事项
- 图标一般有描边(stroke)和填充(fill)两种样式,一个图标只能采用一种形式,不可以混合。想要转为 fill 样式,你可以使用 Outline Stroke 将图标转换为填充形状。
- 图标命名请使用英文(不可以含 `/`),因为这些命名最终会变为代码中的命名。同时,你可以通过给命名添加 `-fill``-stroke` 后缀来区别它们的样式,GitHub Actions 会根据这个后缀生成对应的代码。
- 请记得更改 package.json 中的 name 和 version。
- **很多过程需要开发知识,可以邀请开发同学协助完成。**
# Figma Icon Automation Plugin # Figma Icon Automation Plugin
[中文说明](./README-CN.md)
Figma Icon Automation is a plugin that helps you synchronize your icons' SVG code to a Github Repository, Then the Github Action will convert them to React code and update to NPM automatically. Figma Icon Automation is a plugin that helps you synchronize your icons' SVG code to a Github Repository, Then the Github Action will convert them to React code and update to NPM automatically.
## How it works?
## Usage
### Pre-requirements
### Steps
## Attentions
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
"name": "icon-automation", "name": "icon-automation",
"version": "1.0.0", "version": "1.0.0",
"description": "A figma plugin to push icon svg code to Github automatically.", "description": "A figma plugin to push icon svg code to Github automatically.",
"main": "index.js",
"author": "Jun", "author": "Jun",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
......
...@@ -87,7 +87,7 @@ export default class Settings extends React.Component<Props> { ...@@ -87,7 +87,7 @@ export default class Settings extends React.Component<Props> {
<button className='button button--primary button-block' onClick={this.handleSubmit}>Go</button> <button className='button button--primary button-block' onClick={this.handleSubmit}>Go</button>
</div> </div>
<div className="setting-footer form-item type type--pos-medium-normal"> <div className="setting-footer form-item type type--pos-medium-normal">
developed by <a href="https://github.com/leadream" target="_blank">Jun</a> developed by <a href="https://github.com/leadream" target="_blank">Leadream</a>
</div> </div>
</div> </div>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment