本文内容来源于 Plasmic 官网教程文件,结合个人理解整理,不完全按照原文翻译。如有表述不当,敬请指正。
加粗文字为个人注解,或与 Figma 操作不同之处。
黄底背景色文字为官方说明,主要指在前端开发中的注意事项。
阅读本文时,请搭配官方教程文件一边学习一边上手实践。官方教程文件在登录后的项目列表页面上方即可获取。
欢迎
- 按
PageUp
/PageDown
或Fn+↑
/Fn+↓
可快速切换页面 Cmd+Z
撤销- 登录状态下,文件会自动保存
+
/-
可以缩放画板
基础
1 编辑文字样式
- 双击编辑文字,
Cmd+Enter
退出文字编辑 - 在右侧面板可以调整文字大小。
2 移动和调整大小
- 页面上大多数元素都是水平或垂直排列的堆栈,直接拖拽就能调整顺序。
- 鼠标移到图片边缘时出现一条蓝线,拖拽蓝线就能改变图片大小。也可以通过悬浮在条目上方的蓝色名称标签来拖动。
- 堆栈可以嵌套,比如垂直堆栈里嵌套一个水平堆栈。
3 调整布局
- 选择最外层的元素,在右边栏的Layout里面可以设置垂直和水平对齐,Rows gap为垂直堆栈时的行间距,Cols gap为水平堆栈时的列间距。
- 选择文本元素时,拖动顶部或底部的橙色边线可以调整外边距。(margin),拖动绿色边线可以调整内边距(padding),按住shift时可以同时调整所有边。(注:无论调整内边距还是外边距,拖动时都是向元素中心拖动才能增大数值。)
- 在右侧的Size里面将宽度W设置为stretch时,会完全拉伸元素以填充满父级。
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” 变体。
- 选中基础组件面板
- 在右边栏的顶部,如果需要的话,按下组件名称下方扁长形的“reveal more(显示更多)”按钮,以显示所有变体属性。
- 在“Type”组下添加一个新变量,并将其命名为“Success”。
- 在选择“Success”时更新填充、描边、文字颜色等样式。
- 在实例中更新状态为“Success”,完成。
25 编辑基础变体
- 双击任何实例以编辑基础组件(或在其自己的画板中编辑)。
- 可以设置字体粗细。
- 点击“More…”在文字样式区域中,启用大写文字转换。
默认情况下(每当双击组件时),“总是”在编辑基本变体。这就是文本更改会影响所有按钮变体的原因。
修改变体中的文字样式时,无需选中文字层,仅选中该组件层即可。
26 制作带有变体样式的 slot
变体可以指定 slot 内容的样式。
- 双击以编辑 Button 组件。
- 切换到针对 Primary 变体。
- 选择 slot ,并将文本颜色更改为白色。
- 单击退出编辑组件,并将按钮实例设置为使用 Primary 变体。注意,Button 文本的颜色是白色的。
编辑组件时,始终可以从右侧面板设置 slot 本身的样式。这些是内容将继承的默认排版样式。
任何实例都可以覆盖此默认样式。
27 通过变体设置多种元素样式
到目前为止,我们的按钮组件只是由一个元素组成。以下将会设置包含更多元素的组件。
变量与整个组件相关联。因此,组件的变体可以覆盖该组件内部任何元素的样式。
28 通过变体控制任何设置
变体并不局限于样式。
例如,根据您是否已经在关注某个用户,此配置文件卡看起来应该会有所不同。
- 在最右边的画板中,选择“Follow”按钮。这是一个操作按钮组件。
- 将其“Type”设置为“Primary”。(请注意,这是操作按钮组件的变体,而不是Profile Card组件的变体!)
- 将其文本窗口更改为“Unfollow”。
- 选择“Block”按钮并点击退格键或删除键,可将它在变体中隐藏。
您可以按条件渲染元素、设置文本、在嵌套实例上设置变量、设置插槽内容、设置任何属性/道具。所有设置都可以由变体控制。
注意: 按条件呈现不仅与可见性或 display: none
有关,还与节点的实际存在有关。
29 增加交互变体
在 Plasmic 中,常见的交互状态,如悬停、按下、禁用和聚焦,都会以一流的效果呈现。
- 选择右边的基础组件。
- 在右上角的 Variants 面板中,添加一个新的交互变量。从下拉列表中选择 Hover 。
- 录制到这个新的悬停变体时,更改背景色。
- 为按下状态添加另一个交互变量。
- 将背景改为另一个颜色。
- 点击顶部工具栏的播放按钮,检查交互是否生效。
注意:如果交互变体只覆盖样式,这将导致代码中出现伪选择器。但是(和普通变体一样),您可以覆盖其他任何内容,这些内容将在代码中起作用。
为了允许禁用样式和聚焦状态,必须将元素 HTML 标记类型从默认的“ div”更改为元素 HTML 标记类型ー您可以从右侧边栏的右上角执行此操作。这里我们将元素类型设置为“ button”。
当交互变量和任何其他变量的组合处于活动状态时,您还可以自定义外观。例如,您可能希望主按钮、描边按钮等具有不同的悬停/按下/禁用效果。
30 休息一下
至此,你已经学会了 Plasmic 中最难的变体概念。
现在进入了最后的冲刺阶段。
31 使用颜色tokens
可以将颜色保存为可重复使用的颜色tokens。
在组件中选中某个颜色,然后在调色板中点击右下角添加颜色 tokens。
我们可以根据其他tokens递归地定义tokens。一个常见用法是: 可能首先需要定义一个从 blue-100到 blue-900的调色板,然后在此基础上,将 Accent 颜色定义为 Blue-700。
32 使用间隔tokens
可以应用于填充、边距、大小、间隙、位置等等。
- 在右侧边栏的“Layout”下,单击“Gap”输入,然后从下拉菜单中选择“create new Token”。
- 给 token起个名字,并调整数值。
- 在右侧边栏的“Spacing”下,单击“Padding”,然后从下拉菜单中选择刚才设置好的 token 名。
与颜色tokens一样,可以根据其他tokens递归定义tokens。
除了间隔tokens,还可以定义其他数字类型的tokens,包括字体大小、行高和不透明度。
33 使用样式Mixins
样式tokens是简单的可复用值,“mixin”是可复用的样式包。
-
比如选择画板中的一个文字元素
-
在右侧面板中,在任意属性标题上右键(或单击最右侧的三个点),然后选择“ **Extract all styles to mixin **”> “ **New mixin **”。
-
创建名为Header的Mixin。
-
选择第二个未设置样式的文本框。
-
在右侧边栏的mixin部分中,选择Header以应用刚才定义的mixin。
-
将字体大小设置为20px。这将覆盖 mixin 中较大的字体大小。
如果只对一个属性进行以上操作,则仅将该属性放入 Mixins;如果要将多个属性放进去,可右键要新增的属性标题,选择“ Extract all styles to mixin ”后,选择新创建的这个 Mixins 名。
Mixins 很灵活,我们可以将任何样式子集定义为 mixin 。
我们也可以将它们组合起来,可以在一个元素上应用多个mixin。与普通CSS类不同,我们可以可以指定 mixin 顺序,因此后来出现的 mixin 可以覆盖早期 mixin 设置的样式。
34 使用SVG图标
- 单击左侧边栏中的“Image Assets”选项卡。
- 在这里,Plasmic 列出了当前项目中存在的所有图标和图像。
- 图标可从左侧面板中拖进画板。
将图像插入到 Plasmic (例如通过粘贴)中时,SVG 图像将作为真正的 SVG 元素插入,并且 SVG 图标特别被识别为真正的 SVG 元素并允许重新着色。
提示:在Figma中,可以右键单击任何选择并复制为SVG。
35 插入表单
到目前为止,我们主要处理的是盒子、文本、按钮、图像和图标。表单输入是唯一剩下的基本元素类型。
- 从 左上角的蓝色添加按钮中,插入一个“ text input”。
- 在右边栏的 Attributes 部分,将其值设置为空,并将其占位符文本设置为“ Enter email”
这将在预览模式和编解码器中产生真实(交互式)文本输入。
36 设置元素样式
使用表单输入,您可以完全设置它们的样式,包括它们的占位符文本。
选择这个 input 组件,在“Element States”里,选择“占位符(Placeholder)”,就进入了编辑占位符样式的状态。
37 设置元素样式状态
元素状态不仅仅用于输入占位符。它们也是一种快速设置元素特殊交互状态样式的便捷方法,而不需要定义带有变体的组件。
选择需要设置状态的图标或组件,在“Element States”里增加一个“Hover”,然后重新设置颜色等样式。
38 使用快捷键提高效率
提高效率的一个最大技巧就是学会快捷键,少用鼠标!
通过键入Shift + ?
查看快捷键的完整列表。
以下是常用的一些快捷键操作:
Enter
:进入子集,或编辑文本Cmd+Enter
:完成输入,或进入组件编辑模式↑
/↓
/←
/→
:对齐,或调整堆栈中的顺序Tab
:选择下一个同级元素Shift+Enter
:返回父级
39 在页面、组件和主视觉区之间切换
在左侧边栏的树选项卡顶部,可以显示当前项目中所有页面、组件和主视觉区的列表。
40 在代码库中生成代码
Plasmic 的核心特殊功能之一是让您将设计集成到任何代码库中。
点击“Code”工具栏按钮即可开始,这里显示了各种框架的快速入门。
查看开发人员快速入门项目,将会得到一个更加精简的示例(可从主项目列表页面看到)。点击左下角的“?”可查看完整的开发人员文档和教程。
41 从Figma中导入
我们可以从 Figma 导入设计稿。
点击左侧工具栏下部的 Figma 图标,获取 Figma 插件链接。
导入过程会将 Figma 图形媒体的所有低级样式转换为 Plasmic 的基于代码的表达形式。
请务必阅读有关如何更好地使用导入插件的文件,并了解预期结果!
使用插件导入 Figma 设计稿的一个示例视频。
尾声
样式化、布局、组件、slot、变体、tokens、mixins……这些都是 Plasmic 最核心的概念。
感谢你看到这里!很高兴我们一起进步。
Plasmic 的官方论坛是Slack、Twitter。
接下来的学习内容,可以单击“ Help”进入学习中心——在那里可以看到视频教程、阅读开发文档、查看示例项目等等。