简易设计系统(α)
用法格玛的 代码连接。 。 。 .
简易设计系统(SDS)是一个基础设计系统,显示如何在React Codebase同时使用Figma的可变,样式,组件和代码连接,以形成一个响应性网络设计系统的完整图片.
SDS不仅仅是Figma的另一个设计系统. 设计和开发之间仍然存在许多差距,战略部署储存为如何弥补这些差距提供了一些最佳做法。 SDS试图对其在代码中的影响保持诚实,同时也在设计上提供自定义性,超越许多代码第一组件库所典型的简单主题层.
无论您想要使用 SDS 来启动一个新项目, 还是寻找一些共同设计系统最佳做法的例子, 您都会在这个代码库和设计文件内找到工具来引导您正确方向.
资源
设置
npm i以安装依赖关系npm run app:dev将运行服务器于 本地主机: 8000 产生内容的 应用程序xnpm run storybook开始故事书 本地主机: 6006
图像 Auth
- 创建图像 API 令牌
- 复制 .env 重命名
- 重命名为
.env,它将被忽略 从git.- 设定
FIGMA_ACCESS_TOKEN=作为你的象征.env - 设定
FIGMA_FILE_KEY=作为您文件的密钥( 从文件 URL 中获取).env
- 设定
代码连接
SDS完全由Figma的"代码连接"支持. 这包括如何连接的实例 原始人,以及 组成 这些原始的 为你的设计系统.
这回波利用 documentUrlSubstitutions 内 figma.config.json (英语)。这可以让我们的文档 Figma 文件不可知化,并汇总所有 Figma 文件特定信息,以便于url 互换 。 文件 URL 替换的命名方式也帮助您找到关联组件而不点击链接. 键 <FIGMA_INPUTS_CHECKBOX_GROUP> 细分为 <FIGMA_[PAGE_NAME]_[COMPONENT_NAME]>。 。 。 .
{
"documentUrlSubstitutions": {
"<FIGMA_INPUTS_CHECKBOX_GROUP>": "https://figma.com/design/whatever?node-id=123-456"
}
}
允许我们在代码连接文件中有更多的表达式 URL:
figma.connect(CheckboxGroup, "<FIGMA_INPUTS_CHECKBOX_GROUP>");
连接此 repo 到重复的 Figma 文件
考虑到上述情况,一个"简易设计系统"(Simple Design System Figma)文件的新克隆人应该保持所有的节点标识. 这些步骤如下:
- 复制 Figma 社区文件
- 克隆这个还原
- 更新 urls 中 figma.config.json (英语) 指向您的 Figma 文件
- 注:文件密钥(例如:.
J0KLPKXiONDRssXD1AX9Oi)应该是urls中唯一的变化,除非你正在创建新的组件,去除和再创建.
- 注:文件密钥(例如:.
- 创建和设置您的 图像 Auth Token
- 那时,
npx figma connect publish您的新文件应该有代码连接.
结构
所有组件和样式都在 锡克/锡克。在该目录中,代码分为几类.
src/ui/组件
APIPASS 添加,不是上游SDS的一部分. 由原始人组装而成,可重复使用的块来解析特定反复出现的UI图案(Card, DataTable, CivirDialog, Form Modal, Pageheader, Sidebar, Widget/WidgetGrid). 与 compositions,这些包含真实的app-faceing行为,并意在被直接导入,而不仅仅是被复制为布局示例.
rc/ui/组合
原始组件的示例安排,以显示您如何使用 SDS 构建一个响应网站 .
斜弧/斜角/斜角
自定义反应钩定义
锡克/锡克/锡克/锡克
所有图标组件 。 自动生成 脚本/缩写
弧度/度/图像
占位符图像 .
src/ui/放电
布局组件 。 与 SDS 的布局至关重要,但在 Figma 中没有类似的组件 .
锡克/基干/基干
主要组件库. SDS原始体无法再被进一步缩小为子组件.
src/ui/供应商
自定义反应提供者定义
斜弧/斜角/斜角
定制公用事业和公用事业组件
代码连接和故事本
所有代码连接 Docs 和故事书故事都遵循同样的分类定义 斜弧/图形 财务报告和审定财务报表 曲线/故事。 。 。 .
脚本
一些实例集成在 scripts 目录。 您可能需要额外的 API 范围 。 在可能的情况下,有一些插件实例可以帮助填补空白.
脚本/ 组件- 元数据
- 在菲格马JS控制台运行的脚本
- Bulk 管理文件中所有组件的描述 。 与其制作一个复杂的插件,不如更简单地通过直接从JavaScript控制台运行脚本来做到这一点.
- 复制内容 脚本/组件-元数据/导出组件JSON.js 并打开文件在控制台中运行.
- 将结果粘贴到 脚本/组件-元数据/组件. json。 。 。 .
- 在那里,你可以更容易地修改描述.
- 一旦您修改了描述, 请复制 JSON 并粘贴在顶端 脚本/组件-元数据/进口组件JSON.js 作为
json变量. - 复制导入文件的全部内容,并在控制台中运行,以批量更新整个文件的描述.
- 这只会更新描述. 要更新 Dev 资源, 您可以使用 脚本/非资源。 。 。 .
脚本/非资源
npm run script:dev-resources(仅限REST API)- 设置其中描述的所有组件的 dev 资源 脚本/资源/资源 来匹配.
- 在批量交换urls时有用. 要求数
Dev Resources: Write显示您的 REST API 指示符.
脚本/缩写
npm run script:icons:rest- 从文件中获取所有图标,并在 锡克/锡克/锡克/锡克 目录.
- 还生成 src/figma/icons/Icons.figma.tsx 互联网档案馆的存檔,存档日期2013-12-02 代码连接.
脚本/脚本
npm run script:tokens:rest- 从 Figma 获取所有变量和样式,并将其转换为 src/主题.css。 。 。 .
- 创建 脚本/托克/托克 这是您可以在Figma JS控制台运行的脚本,以更新所有变量的 代码语法 与CSS匹配的重播.
- 包括一些没有变量 REST API 的插件来获取相同数据 .
- 安装插件 联合国
- 运行插件,并将插件输出复制到 脚本/脚本/样式. json 财务报告和审定财务报表 脚本/指针/指针.json
- 运行
npm run script:tokens(无):rest),它会直接引用JSON文件,而无需请求REST API更新它们