转码插件

通过转码插件实现自定义转码产物(beta)

插件类型

插件名插件描述运行时机输入输出状态
inspectPlugin检查设计稿上的问题以及提示转代码之前JSONSchemaD2CInspect[]🚧
schemaPlugin干预 JSX 生成之前的 schema产出 JSON Schema 之前JSONSchemaJSONSchema🚧
generatePlugin自定义转码输出的内容输出代码产物之前GeneratePluginInputGeneratePluginOutput

InspectPlugin

查看 设计稿检查 自定义插件部分。

GeneratePlugin

插件打包配置

target

browser,插件包运行在浏览器环境,打包后不应包含 node 相关 API。

format

UMD 格式,最好是 standalone,可通过全局变量方式引入通用第三方包以减小包体积。

externals

externals 表示全局提供的包,第三方插件不需要打包到插件里。
包在源码的引用路径打包后转换为引用全局变量的 name
lodash_
prettierprettier
prettier/parser-babelprettierBabelParser
prettier/parser-postcssprettierPostCSSParser
Bufferbuffer

注意

  • 打包后的产物不要包含 node API
  • 打包后的产物不要 require 第三方包,模块应该 built-in 或者使用 externals 中包含的包
  • 支持的 externals 包会挂载到全局变量上,每个包都有具体的名字,打包时应该配置好这个名字,否则可能找不到对应的包

插件使用

设置页面通过配置 URL 的方式添加自定义插件。

错误处理

使用 Figma 插件时,如果自定义插件有报错,则执行下列动作。
  • 跳过插件,不影响接下来的转换逻辑
  • 将原有输入给插件的内容进行下面的转换
  • 展示错误提示

© 2021 - 2023 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题