我们用示例 Sketch 文件创建了一个 5 分钟 Abstract 使用流程，在工作中正式使用 Abstract 之前，你可以先尝试一下。
在此下载 .zip 文件。
我们假设你收到了这个设计需求。
image.png
下面是你如何在第一次使用 Abstract 的情况下完成这个任务。

💡提示：你可以在 YouTube 查看完整流程。

第1步：创建一个私密的测试项目

  1. 当你创建自己的 Abstract 组织后，打开 Abstract 桌面端应用。
  2. 切换至你的企业组织。
  3. 选择右上角的 New project **。**
  4. 将你的项目命名为“Test Drive: Website”
  5. ⚠️重要：勾选旁边的 Make project private 。这可以让组织内其他人看不到你的试用。
  6. 点击 Create project 。

Test drive- #1 Create a private test project.mp4 (428.91KB) 了解更多创建项目内容。

第2步：下载这个 .zip 文件并导入

我们已经创建了一些可以使用的 Sketch 文件（3 个 Sketch 文件和 6 个组件组件库文件）

  1. 在此下载 .zip 文件。
  2. 在你的下载中打开 .zip 文件。
  3. 在 Abstract 中的“Test Drive: Website”项目，点击 Import Sketch file 。
  4. 找到你刚下载并打开的 .zip 文件。
  5. 在 Import to Website project 文件夹中选择所有文件。
  6. 点击 Import 。
  7. 点击 I understand 。

Test drive- #2 Download the .zip file and import.mp4 (1.12MB) 了解更多导入项目内容。

第3步：为你的设计系统创建第二个私密项目

我们建议为你的设计系统创建独立项目，这样可以将所有组件库居中到一个位置中。

  1. 在 Abstract 中，点击顶部导航的主页按钮。
  2. 选择右上角的 New project **。**
  3. 将你的项目命名为“Test Drive: Design System”。
  4. ⚠️重要：勾选旁边的 Make project private 。这可以让组织内其他人看不到你的试用。
  5. 点击 Create project 。

Test drive- #3 Create a second private project for your Design System.mp4 (395.35KB)

第4步：导入组件库文件

与之前的步骤基本一致，但稍有不同。

  1. 在 Abstract 中的“设计系统”项目，点击 Import Sketch file 。
  2. 找到你刚下载并打开的 .zip 文件。
  3. 在 Import to Design System project 文件夹中选择“Buttons.sketch”文件。
  4. 点击 Import 。
  5. 点击 I understand 。
  6. 右键点击你刚导入的文件
  7. 选择 Use as Library… 。
  8. 点击 **Use as Library** 。文件图标会变为粉色。
  9. 现在，点击 Add file 。
  10. 选择 **Import Sketch File as Library** 。
  11. 选择剩下的组件库文件，包括刚刚你已经导入的。他们的图标将自动变为粉色。
  12. 点击 ** I understand **。

Test drive- #4 Import the library files.mp4 (907.36KB)

第5步：链接你的组件库文件

现在组件库文件已经导入到你的组织中，你需要将组件库连接到“网站”项目。

  1. 在 Abstract 中，点击顶部导航的主页按钮。
  2. 选择“网站”项目。
  3. 点击左边栏的 Master 。
  4. 前往 Files 选项卡。
  5. 点击 Add file 。
  6. 选择 Link Sketch Library… 。
  7. 选择“Test Drive: Design System”。
  8. 选择“Button.sketch”文件，点击 Shift ，选择“Typography.sketch”文件。这样就以此性选择了所有组件库文件。
  9. 点击 Link Libraries 。你的组件库将会在 Linked Libraries 部分排列显示。

Test drive- #5 Link your library files.mp4 (403.77KB) 了解更多链接组件库相关内容。

第6步：创建分支

现在文件和组件库已经就位，让我们处理你被分配的任务，并进行一些编辑。

  1. 在 Files 选项卡下面，选择 Homepage.sketch 文件。
  2. 点击右上方的 Edit in Sketch 。
  3. 选择 Create a Branch 。
  4. 将你的分支命名为“Homepage CTA”。
  5. 选择 Create Branch 。Homepage.sketch 文件将会在 Sketch 中打开。

Test drive- #6 Create a Branch.mp4 (399.83KB) 了解更多分支相关内容。

第7步：在 Homepage 中添加 CTA 按钮

Homepage 文件将在 Sketch 中打开。

  1. 在 Sketch 中点击。
  2. 悬停 **Buttons > Button > Primary > 然后选择 Long **。
  3. 将按钮放置在你喜欢的位置。
  4. 将文本重写为“Only $39/month”。

Test drive- #7 Add a CTA button to the Homepage.mp4 (303.38KB)

第8步：提交你的更改

提交会把你的编辑保存在 Abstract 上。

  1. 在 Sketch 中点击 File > Save 。
  2. 在 Sketch 窗口的最下方，点击 Commit changes 。
  3. 在提交评论中留言“在 Homepage 中添加 CTA 按钮”。
  4. 点击 Commit changes 。
  5. 退出 Sketch 。
  6. 在 Commit 选项卡中查看你的提交。

Test drive- #8 Commit your changes.mp4 (374.75KB) 了解更多提交相关内容。

第9步：创建集合

现在你已经准备好分享你对 Homepage 文件的编辑，你将使用集合来收集反馈。

  1. 在 Abstract 中的“Test Drive: Website”项目中，点击“Homepage CTA”分支下的 **Branches **。
  2. 点击 New Collection 。
  3. 点击 Homepage 画板旁边的复选项。
  4. 点击 Continue 。
  5. 将你的集合命名为“Homepage CTA”。
  6. 点击 Create & Add 1 Item 。

此时我们不会分享你的集合，但你可以点击分享按钮来复制链接。

Test drive- #9 Create a Collection.mp4 (451.67KB) 了解更多集合相关内容。

第10步：标注需要反馈的位置

当你将设计分享出去请求评审时，直观的标注出需要反馈的地方会更有帮助。

  1. 在展示模式下打开 Homepage 画板。
  2. 点击 Show Comments 按钮。
  3. 点击右侧边栏上的 Annotate 工具。
  4. 在你更新的按钮上方点击并拖拽。
  5. 在留言框中写下“@Milan你觉得这个按钮用黑色怎么样？”。
  6. 点击 Comment 。
  7. 你可以点击回复工具、选择一个emoji来回复自己的留言。

Test drive- #10 Annotate where you need feedback.mp4 (497.6KB) 了解更多标注与留言相关内容。

第11步：查看检查器面板

检查器面板中展示了你要交付给开发人员的所有内容。

  1. 退出展示模式。
  2. 点击画板打开图层详情。
  3. 点击 Inspect 面板。

悬浮在画板的不同位置来查看设计的代码标注。此外，开发人员可以在面板右侧下载资源，但需要事先在 Sketch 中导出资源。

Test drive Abstract - 004 - Test drive- #11 Check out the Inspect tab.mp4 (545.54KB)

第12步：合并你的分支

假设在发出集合之后，你的新按钮设计已经获得了合伙人的许可，你可以合并到主线了！合并操作将会把你的编辑变成主线文件的一部分。

  1. 在 Abstract 中，点击顶部导航的主页按钮。
  2. 打开你的“Test Drive: Website”项目。
  3. 在左侧边栏选择你的“Homepage CTA”分支。
  4. 点击右上角的 Merge Branch 。
  5. 在备注区域写“在主页中添加黑色的 CTA 按钮”。
  6. 点击 Merge and Archive 。

现在你可以关闭你的需求了。

Test drive Abstract - 003 - Test drive- #12 Merge your Branch.mp4 (741.51KB)

第13步：Oops！恢复到主线之前的提交

在几分钟之前，你收到了反馈：Stem Society 不再提供订阅模式，你需要尽快将主页回滚到你合并修改之前。

  1. 在“Website”项目中，点击左侧边栏的主线。
  2. 点击 Commits 面板。
  3. 选择名为“Started using 6 files as libraries”的提交。
  4. 在留言区域写：“收到反馈，我们不再提供订阅模式。先回滚，直到我们探索其他设计。”
  5. 点击 Restore Commit 。

主线已经恢复到你合并主页 CTA 设计之前。

Test drive Abstract - 002 - Test drive- #13 Oops! Restore Master to previous Commit.mp4 (713.35KB)

💡提示：每次在 Abstract 上提交时，你都在创建一个可以回滚的书签，因此经常尽早进行提交。

了解更多将主线恢复到之前的提交相关内容。

第14步：删除你的试用项目

就是这样！任意创建分支、编辑 Sketch 文件、提交修改、创建集合，直到感觉熟练为止。
试用完之后，删除所有的试用橡木。

  1. 在 Abstract 中，点击顶部导航的主页按钮。
  2. 点击“Test Drive: Website”项目卡中的三个点…。
  3. 选择 Delete project… 。
  4. 输入“CONFIRM DELETE”。
  5. 点击 I’m sure, delete the project 。
  6. 对“Test Drive: Design System”重复此操作。

Test drive Abstract - 001 - Test drive- #14 Delete your test drive projects.mp4 (332.36KB)

接下来：创建你的第一个真实项目

如果你是团队中的管理员，试用上述同样的步骤创建你的第一个真实项目。
不确定该如何创建你的项目？先填写我们如何试用 Abstract 工作表。