使用 Semi Variants

使用 Semi Variants,让设计稿具有转代码能力

发布 Semi Variants

社区用户

使用 Semi Figma 设计资源:https://www.figma.com/@semi
如您是第一次使用,仅需要使用组件文件 Semi Design - Components (Figma Community) 即可。
我们在组件文件里同时定义了 style。其他文件如 icon、light style、dark style、text style,可在您需要时使用。

Step1. 复制 Semi Design - Components (Figma Community)

Step2: 发布为共享资源库

将 Variants 发布到您所在的组织下。
如您没有发布权限(不是 Figma 专业版用户),也可以通过复制粘贴的方式使用这套组件。

字节跳动内部用户

字节跳动内部用户无需发布 Variants,Semi 团队已将 Variants 发布到组织下,设计师只需要确认使用的是最新版 Semi Variants 即可。
Semi icon 是在单独文件维护的,同时也支持转代码。如您需要使用,可按照相同方式使用下面这两个文件。

导入到设计稿

在您的设计稿左侧面板的 Assets 中打开 Semi Variants 开关。
此步骤依赖于上一步,导入到设计稿需要您的 Variants 已发布

绘制设计稿

使用 Semi Variants 完成你的设计稿。

使用新版本 Semi Variants 的好处

  • ✅ 更加丰富的变体类型,与代码组件一一对应的变体属性
  • ✅ 更合理的图层结构、支持嵌套组件和 auto layout
  • ✅ 让设计稿具有转代码能力
  • ✅ 无需改变使用习惯,直接用

有自定义需求?

如果你的团队有不同于 Semi Variants 默认的主题,可以 自定义 Variants,轻松创建一套自定义主题的 Variants。
  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
      更新
  • 研发使用手册
    • 代码转译
    • 标记组件库
    • 标记图标库
    • 标记图层
    • 设计稿检查
      更新
    • 转码插件
      更新
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
      更新
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题