Figma Simple Design System (SDS) 安装与配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00328/article/details/147035866

Figma Simple Design System (SDS) 安装与配置指南

sds Simple Design System (SDS) is a base design system that shows how Figma’s Variables, Styles, Components, and Code Connect can be used alongside a React codebase to form a complete picture of a responsive web design system. 项目地址: https://gitcode.com/gh_mirrors/sds1/sds

1. 项目基础介绍

Simple Design System (SDS) 是一个基于 React 的基础设计系统。它展示了如何将 Figma 的变量、样式、组件和代码连接（Code Connect）与 React 代码库结合，形成一个响应式网页设计系统的完整视图。SDS 旨在缩小设计和开发之间的差距，提供了一些将设计最佳实践应用到代码中的方法。

该项目主要使用 JavaScript 和 TypeScript 作为编程语言。

2. 项目使用的关键技术和框架

React: 用于构建用户界面的 JavaScript 库。
TypeScript: JavaScript 的一个超集，添加了静态类型选项。
Figma Code Connect: 将 Figma 设计文件与代码库连接的技术。
Storybook: 用于 UI 组件的开发、测试和展示的工具。

3. 项目安装和配置准备工作

在开始安装之前，请确保您已经安装以下软件：

Node.js：JavaScript 运行时环境，用于执行安装脚本。
Git：版本控制系统，用于克隆项目。

详细安装步骤

克隆项目

打开命令行工具，执行以下命令以克隆项目：

git clone https://github.com/figma/sds.git
cd sds

安装依赖

在项目目录中，运行以下命令以安装项目依赖：
```
npm install
```
这将安装项目所需的所有 npm 包。
运行开发服务器

安装完依赖后，运行以下命令以启动开发服务器：
```
npm run app:dev
```
运行此命令后，您可以在浏览器中访问 http://localhost:8000 来查看应用。
启动 Storybook

要查看组件的 Storybook，运行以下命令：
```
npm run storybook
```
运行此命令后，您可以在浏览器中访问 http://localhost:6006 来查看 Storybook。
Figma Code Connect 配置

要使 SDS 与 Figma 文件连接，您需要：
- 创建一个 Figma API 令牌并添加代码连接范围。
- 在 .env 文件中设置您的 Figma 访问令牌和文件密钥（从文件 URL 中获取）。
首先，复制 .env-rename 文件并将其重命名为 .env。然后在 .env 文件中添加以下内容：
```
FIGMA_ACCESS_TOKEN=your_figma_access_token
FIGMA_FILE_KEY=your_figma_file_key
```
替换 your_figma_access_token 和 your_figma_file_key 为您的实际 Figma API 令牌和文件密钥。