Plasmic Studio入门教程

本文内容来源于 Plasmic 官网教程文件，结合个人理解整理，不完全按照原文翻译。如有表述不当，敬请指正。

加粗文字为个人注解，或与 Figma 操作不同之处。
黄底背景色文字为官方说明，主要指在前端开发中的注意事项。

阅读本文时，请搭配官方教程文件一边学习一边上手实践。官方教程文件在登录后的项目列表页面上方即可获取。

---

欢迎

1. 按PageUp/PageDown或Fn+↑/Fn+↓可快速切换页面
2. Cmd+Z 撤销
3. 登录状态下，文件会自动保存
4. + / - 可以缩放画板
   

基础

1 编辑文字样式

1. 双击编辑文字，Cmd+Enter 退出文字编辑
2. 在右侧面板可以调整文字大小。
   

2 移动和调整大小

1. 页面上大多数元素都是水平或垂直排列的堆栈，直接拖拽就能调整顺序。
2. 鼠标移到图片边缘时出现一条蓝线，拖拽蓝线就能改变图片大小。也可以通过悬浮在条目上方的蓝色名称标签来拖动。
3. 堆栈可以嵌套，比如垂直堆栈里嵌套一个水平堆栈。
   

3 调整布局

1. 选择最外层的元素，在右边栏的Layout里面可以设置垂直和水平对齐，Rows gap为垂直堆栈时的行间距，Cols gap为水平堆栈时的列间距。
2. 选择文本元素时，拖动顶部或底部的橙色边线可以调整外边距。（margin），拖动绿色边线可以调整内边距（padding），按住shift时可以同时调整所有边。（注：无论调整内边距还是外边距，拖动时都是向元素中心拖动才能增大数值。）
3. 在右侧的Size里面将宽度W设置为stretch时，会完全拉伸元素以填充满父级。
   

4 构建页面

编辑页面时，可以同时查看桌面版和移动端的效果。

1. 点击左上角的蓝色导入按钮，可以选择需要导入的基础元素。
2. 可导入的基础元素包括堆栈、按钮、图片、文字、图标等。
3. 导入图片元素后，可在右侧上传本地图片或链接网络图片
4. 常用快捷键：
   • T 插入文字
   • V 垂直堆栈
   • H 水平堆栈
   • Q 打开插入菜单
     

5 创建响应式页面

默认情况下，更改会应用在所有不同大小的显示端，但我们可以专门“Record” 特定一种屏幕的编辑。比如对移动端设置不同的字号。
单击右下角移动视图中的任意位置，视图上方会有一个浮动工具栏。单击灰色的“仅限移动”变量后，这个框会变成红色，这时就会记录对其的所有更改。


选中堆栈时，勾选 Reverse 可以翻转顺序。

在 Plasmic 里，可以配置任意数量的断点(称为“屏幕变体”)及其方向(桌面优先或移动优先)。

6 创建可复用组件

右键然后在弹框里选择“Create component”，或按快捷键 Cmd+Option+K。
双击任何一个组件或组件变体，进入编辑模式，背景会变暗以突出显示该组件。
调整任何一个组件里面的图标大小，其他组件均会同步更改。

7 使用slot自定义组件实例

插槽（slot） 可以使组件更定制化。
双击组件进入编辑模式，右键单击需要更改的图片或文本内容，在弹框列表上选择“Convert to a slot target”，这时就能更改里面的内容了。
slot 中可以插入任意数量的东西，而且不仅限于覆盖单个文本/图像。
在编辑模式下，双击 slot 的蓝色标签可以更改名称。

8 小结

Plasmic 除了可以在可视化编辑页进行设计，还可以做以下事情：

• 发布到任何网站/Web应用代码库或技术堆栈。
• 将组件从代码库拖放到您的设计系统、数据和交互中。
• 使用Plasmic Figma插件导入Figma设计。
  

进阶

1 绘制一个盒子

按 R 键可绘制一个矩形。
这个矩形不单单是矩形，可以理解成 Figma 里面的 Frame 。

2 操纵盒子

拖动盒子移动位置。
调整大小时，需要拖动边沿的蓝色边线，不能是绿线或黄线。
注意: 通常盒子只是 div，但也可以将它们设置为 HTML 元素，比如form，ection，a，li 等。

3 给盒子设置样式

可以在右侧面板对盒子进行填充、描边、圆角等样式。
复制样式：右键单击一个元素和复制样式Cmd+Option+C，然后右键单击另一个元素和粘贴样式Cmd+Option+V。(这不会删除已配置的样式，所以它不会删除背景填充颜色).

4 多重盒子组

按 R 键绘制多个盒子时，叠放可嵌套盒子。
移动大盒子时，内部的小盒子也会同步移动。

5 增加文字

按 T 增加文本框。
如需自动换行，则必须设置文本框的宽度。

6 创建一些自动布局的盒子

到目前为止，我们一直在使用绝对定位而不是真正的布局。
按 S 绘制堆栈，在一行图标外拖出一个框，没有对齐的图标会自动对齐并自动判断水平还是垂直排列。
堆栈中的元素都是相对位置的，但也可以设置为绝对位置，后面将会讲到。

7 更改自动布局内容

在堆栈里复制(Cmd+D)某个元素后，位置会重新均匀分布。

8 更改自动布局的排列

通过右侧面板对堆栈内部进行布局的更改。
Flex-Gap是目前应用程序任意实现的某些浏览器所缺少的常用布局功能。Plasmic 堆栈为 flexbox 实现了一个跨浏览器间隙，该间隙是为了与 flex 间隙标准向前兼容而构建的。

9 做一个磁贴布局

通过打开右侧面板Layout中的Wrap来调整自动布局排列。

提示：调整容器大小时，按住Alt键拖动可对称调整大小。
Plasmic 实现了一个可与 Wrapping 一起使用的 flex-gap。

10 做一个按内容自动改变尺寸的盒子

选中一个含有内容的盒子，在右侧面板设置为“hug”，或双击盒子的边缘即可。(这在 CSS 中也称为自动调整大小或内容调整大小。)

11 使用嵌套自动尺寸的盒子

需要将内部盒子的高度调整为“hug”，外部盒子的宽高都调成“hug”，然后后更改里面的文字内容，会发现盒子宽度不变，高度会随内容改变。

12 使拉伸以填充其父容器

还可以将一个条目设置为“stretch”以填满它的父容器，这与“hug” 的功能相反。

13 将多个条目设置为 stretch

将每个按钮的宽度设置为“stretch”，拉伸将均匀填充剩余空间。
注意: 这是设置 flex-grow 和 flex-shrink，但也设置 flex-basis 为100% ，以便所有伸展项目都给予相同的权重。否则，flex-basis 默认为 width，而 width 默认为 auto，因此最终会根据文本的长度得到不同的权重！
这是 Plasmic 将布局提取为更简单、更直观的模型的另一个示例，但您始终可以通过弹窗的高级大小调整选项，以配置想要的精确的flex。

14 对不同的项目设置不同的对齐方式

在右侧面板的Position 中选择对齐方式，也可以使用←/→箭头键调整对齐。

15 向自动布局中添加自由浮动项

UI中的大多数元素都应该自动定位，但有时需要绝对定位。
自动布局框会自动对其条目进行布局，但我们也可以使特定项目脱离该布局，从而使它们处于绝对位置。
选中需要浮动布局的元素，在 Position 中选择 Free，然后设置绝对位置即可。

16 创建可复用组件

创建过程同基础部分的第6小节。
可以从左边栏的“Components”选项卡中查看和管理此项目中的所有组件，还可以通过单击组件或将其拖动到布局中来插入组件。

17 更新组件

双击进入组件编辑状态，单击组件外部退出编辑状态。
提示：除了双击之外，还可以通过选择组件后按Cmd+Enter来编辑该组件。 可以通过双击任何实例来编辑组件内容，所有实例都将更新。 这使您可以在实际使用过程中随时更新组件。

18 自定义组件实例中的文字

操作过程同基础部分的第7小节。
凡是需要更改内容的地方，都需要先转换为 slot 再进行编辑。

19 进一步组件定制

先将需要修改的图片和文字转换为 slot ，可用快捷键 Cmd+Option+S，然后更改内部的内容。如需添加内容，直接复制粘贴进去即可。


slot 不仅仅是文本覆盖，它可以放入你想要的任何东西。将任何东西放入slot 的能力是将组件组合在一起的一种强大但简单的方法。例如，您可以将整个页面布局转换为一个带 slot 的组件，以确保跨页面的布局一致性和可维护性，同时更新每个页面的内容。
提示：编辑组件时，可以重命名slot，以便它们对组件用户更具说明性。例如，我们将目标中显示的组件中的插槽命名为“配置图片”、“名称”和“用户名”。

20 使用组件变体

一些组件（如按钮）一般具有多个变体形式，如已经定义了几种变体，可以在右侧边栏顶部的 Variants 中，将 Type 设置为 Primary 。

21 使用变体组合

这些按钮组件有三组变体：类型、边框和大小。
使用变体，您只需定义几个就可以表达多种可能性 (所以无需像 Figma 里那样穷尽所有可能性)。
变体之所以可以组合，是因为它们被定义为在组件基本样式之上的覆盖。例如，圆角变体只是覆盖边界半径。这就是为什么可以把它和 Danger 和 Large 结合起来，前者只是覆盖颜色，后者只是覆盖内边距。


总的来说，变体也属于组件本身，因此只需要一个 Button 组件，就可以在有 Button 实例的任何地方访问它的变体。

22 在组件面板中编辑组件

在“预览”框中，右键单击组件实例，然后选择“Edit component in new Artboard（编辑新画板中的组件）”。
现在，可以将画板看作是任何组件的孤立视图，可以根据需要拥有任意多个基础组件视图。

23 编辑变体

如果要将 Danger 中的红色改成橙色，首先选中基础组件面板，单击画板上方的浮动工具栏，然后选择“Danger”变体。这时我们现在正在“记录”对此变体的覆盖，任何更改都将被“记录”。最后设置文字和边框为橙色即可。


当记录到一个变体时，这将在位于画布顶部中心的记录栏中显示。
到目前为止，在使用 Plasmic 时，您可能已经注意到各种样式控件旁边的彩色点。蓝点表示样式在当前编辑的变体中被覆盖。可以在样式上单击鼠标右键，将其取消设置为当前变体。
通过选择“base”变量或使用记录栏停止记录变量。

24 新增变体

假如我们要新增一个“Success” 变体。

1. 选中基础组件面板
2. 在右边栏的顶部，如果需要的话，按下组件名称下方扁长形的“reveal more（显示更多）”按钮，以显示所有变体属性。
   
3. 在“Type”组下添加一个新变量，并将其命名为“Success”。
4. 在选择“Success”时更新填充、描边、文字颜色等样式。
5. 在实例中更新状态为“Success”，完成。
   

25 编辑基础变体

1. 双击任何实例以编辑基础组件(或在其自己的画板中编辑)。
2. 可以设置字体粗细。
3. 点击“More…”在文字样式区域中，启用大写文字转换。

默认情况下(每当双击组件时)，“总是”在编辑基本变体。这就是文本更改会影响所有按钮变体的原因。
修改变体中的文字样式时，无需选中文字层，仅选中该组件层即可。

26 制作带有变体样式的 slot

变体可以指定 slot 内容的样式。

1. 双击以编辑 Button 组件。
2. 切换到针对 Primary 变体。
3. 选择 slot ，并将文本颜色更改为白色。
4. 单击退出编辑组件，并将按钮实例设置为使用 Primary 变体。注意，Button 文本的颜色是白色的。

编辑组件时，始终可以从右侧面板设置 slot 本身的样式。这些是内容将继承的默认排版样式。
任何实例都可以覆盖此默认样式。

27 通过变体设置多种元素样式

到目前为止，我们的按钮组件只是由一个元素组成。以下将会设置包含更多元素的组件。
变量与整个组件相关联。因此，组件的变体可以覆盖该组件内部任何元素的样式。

28 通过变体控制任何设置

变体并不局限于样式。
例如，根据您是否已经在关注某个用户，此配置文件卡看起来应该会有所不同。

1. 在最右边的画板中，选择“Follow”按钮。这是一个操作按钮组件。
2. 将其“Type”设置为“Primary”。(请注意，这是操作按钮组件的变体，而不是Profile Card组件的变体！)
3. 将其文本窗口更改为“Unfollow”。
4. 选择“Block”按钮并点击退格键或删除键，可将它在变体中隐藏。

您可以按条件渲染元素、设置文本、在嵌套实例上设置变量、设置插槽内容、设置任何属性/道具。所有设置都可以由变体控制。
注意: 按条件呈现不仅与可见性或 display: none 有关，还与节点的实际存在有关。

29 增加交互变体

在 Plasmic 中，常见的交互状态，如悬停、按下、禁用和聚焦，都会以一流的效果呈现。

1. 选择右边的基础组件。
2. 在右上角的 Variants 面板中，添加一个新的交互变量。从下拉列表中选择 Hover 。
3. 录制到这个新的悬停变体时，更改背景色。
4. 为按下状态添加另一个交互变量。
5. 将背景改为另一个颜色。
6. 点击顶部工具栏的播放按钮，检查交互是否生效。

注意：如果交互变体只覆盖样式，这将导致代码中出现伪选择器。但是（和普通变体一样），您可以覆盖其他任何内容，这些内容将在代码中起作用。
为了允许禁用样式和聚焦状态，必须将元素 HTML 标记类型从默认的“ div”更改为元素 HTML 标记类型ー您可以从右侧边栏的右上角执行此操作。这里我们将元素类型设置为“ button”。

当交互变量和任何其他变量的组合处于活动状态时，您还可以自定义外观。例如，您可能希望主按钮、描边按钮等具有不同的悬停/按下/禁用效果。
​

30 休息一下

至此，你已经学会了 Plasmic 中最难的变体概念。
现在进入了最后的冲刺阶段。
​

31 使用颜色tokens

可以将颜色保存为可重复使用的颜色tokens。
在组件中选中某个颜色，然后在调色板中点击右下角添加颜色 tokens。

​

我们可以根据其他tokens递归地定义tokens。一个常见用法是: 可能首先需要定义一个从 blue-100到 blue-900的调色板，然后在此基础上，将 Accent 颜色定义为 Blue-700。

32 使用间隔tokens

可以应用于填充、边距、大小、间隙、位置等等。

1. 在右侧边栏的“Layout”下，单击“Gap”输入，然后从下拉菜单中选择“create new Token”。
2. 给 token起个名字，并调整数值。
3. 在右侧边栏的“Spacing”下，单击“Padding”，然后从下拉菜单中选择刚才设置好的 token 名。

与颜色tokens一样，可以根据其他tokens递归定义tokens。
除了间隔tokens，还可以定义其他数字类型的tokens，包括字体大小、行高和不透明度。

33 使用样式Mixins

样式tokens是简单的可复用值，“mixin”是可复用的样式包。

1. 比如选择画板中的一个文字元素

2. 在右侧面板中，在任意属性标题上右键（或单击最右侧的三个点），然后选择“ **Extract all styles to mixin **”> “ **New mixin **”。

3. 创建名为Header的Mixin。

4. 选择第二个未设置样式的文本框。

5. 在右侧边栏的mixin部分中，选择Header以应用刚才定义的mixin。

6. 将字体大小设置为20px。这将覆盖 mixin 中较大的字体大小。

如果只对一个属性进行以上操作，则仅将该属性放入 Mixins；如果要将多个属性放进去，可右键要新增的属性标题，选择“ Extract all styles to mixin ”后，选择新创建的这个 Mixins 名。
Mixins 很灵活，我们可以将任何样式子集定义为 mixin 。
我们也可以将它们组合起来，可以在一个元素上应用多个mixin。与普通CSS类不同，我们可以可以指定 mixin 顺序，因此后来出现的 mixin 可以覆盖早期 mixin 设置的样式。

34 使用SVG图标

1. 单击左侧边栏中的“Image Assets”选项卡。
2. 在这里，Plasmic 列出了当前项目中存在的所有图标和图像。
3. 图标可从左侧面板中拖进画板。

将图像插入到 Plasmic (例如通过粘贴)中时，SVG 图像将作为真正的 SVG 元素插入，并且 SVG 图标特别被识别为真正的 SVG 元素并允许重新着色。
提示：在Figma中，可以右键单击任何选择并复制为SVG。

35 插入表单

到目前为止，我们主要处理的是盒子、文本、按钮、图像和图标。表单输入是唯一剩下的基本元素类型。

1. 从 左上角的蓝色添加按钮中，插入一个“ text input”。
2. 在右边栏的 Attributes 部分，将其值设置为空，并将其占位符文本设置为“ Enter email”

这将在预览模式和编解码器中产生真实(交互式)文本输入。

36 设置元素样式

使用表单输入，您可以完全设置它们的样式，包括它们的占位符文本。
选择这个 input 组件，在“Element States”里，选择“占位符（Placeholder）”，就进入了编辑占位符样式的状态。

37 设置元素样式状态

元素状态不仅仅用于输入占位符。它们也是一种快速设置元素特殊交互状态样式的便捷方法，而不需要定义带有变体的组件。
选择需要设置状态的图标或组件，在“Element States”里增加一个“Hover”，然后重新设置颜色等样式。

38 使用快捷键提高效率

提高效率的一个最大技巧就是学会快捷键，少用鼠标！
通过键入Shift + ?查看快捷键的完整列表。
以下是常用的一些快捷键操作：

1. Enter：进入子集，或编辑文本
2. Cmd+Enter：完成输入，或进入组件编辑模式
3. ↑ / ↓ / ← / →：对齐，或调整堆栈中的顺序
4. Tab：选择下一个同级元素
5. Shift+Enter：返回父级
   

39 在页面、组件和主视觉区之间切换

在左侧边栏的树选项卡顶部，可以显示当前项目中所有页面、组件和主视觉区的列表。

40 在代码库中生成代码

Plasmic 的核心特殊功能之一是让您将设计集成到任何代码库中。
点击“Code”工具栏按钮即可开始，这里显示了各种框架的快速入门。
查看开发人员快速入门项目，将会得到一个更加精简的示例（可从主项目列表页面看到）。点击左下角的“?”可查看完整的开发人员文档和教程。

41 从Figma中导入

我们可以从 Figma 导入设计稿。
点击左侧工具栏下部的 Figma 图标，获取 Figma 插件链接。
导入过程会将 Figma 图形媒体的所有低级样式转换为 Plasmic 的基于代码的表达形式。
请务必阅读有关如何更好地使用导入插件的文件，并了解预期结果！
使用插件导入 Figma 设计稿的一个示例视频。

尾声

样式化、布局、组件、slot、变体、tokens、mixins……这些都是 Plasmic 最核心的概念。
感谢你看到这里！很高兴我们一起进步。
Plasmic 的官方论坛是Slack、Twitter。
接下来的学习内容，可以单击“ Help”进入学习中心——在那里可以看到视频教程、阅读开发文档、查看示例项目等等。
​