赞
踩
本文内容来源于 Plasmic 官网教程文件,结合个人理解整理,不完全按照原文翻译。如有表述不当,敬请指正。
加粗文字为个人注解,或与 Figma 操作不同之处。
黄底背景色文字为官方说明,主要指在前端开发中的注意事项。
阅读本文时,请搭配官方教程文件一边学习一边上手实践。官方教程文件在登录后的项目列表页面上方即可获取。
PageUp
/PageDown
或Fn+↑
/Fn+↓
可快速切换页面Cmd+Z
撤销+
/ -
可以缩放画板Cmd+Enter
退出文字编辑编辑页面时,可以同时查看桌面版和移动端的效果。
默认情况下,更改会应用在所有不同大小的显示端,但我们可以专门“Record” 特定一种屏幕的编辑。比如对移动端设置不同的字号。
单击右下角移动视图中的任意位置,视图上方会有一个浮动工具栏。单击灰色的“仅限移动”变量后,这个框会变成红色,这时就会记录对其的所有更改。
选中堆栈时,勾选 Reverse 可以翻转顺序。
在 Plasmic 里,可以配置任意数量的断点(称为“屏幕变体”)及其方向(桌面优先或移动优先)。
右键然后在弹框里选择“Create component”,或按快捷键 Cmd+Option+K
。
双击任何一个组件或组件变体,进入编辑模式,背景会变暗以突出显示该组件。
调整任何一个组件里面的图标大小,其他组件均会同步更改。
插槽(slot) 可以使组件更定制化。
双击组件进入编辑模式,右键单击需要更改的图片或文本内容,在弹框列表上选择“Convert to a slot target”,这时就能更改里面的内容了。
slot 中可以插入任意数量的东西,而且不仅限于覆盖单个文本/图像。
在编辑模式下,双击 slot 的蓝色标签可以更改名称。
Plasmic 除了可以在可视化编辑页进行设计,还可以做以下事情:
按 R 键可绘制一个矩形。
这个矩形不单单是矩形,可以理解成 Figma 里面的 Frame 。
拖动盒子移动位置。
调整大小时,需要拖动边沿的蓝色边线,不能是绿线或黄线。
注意: 通常盒子只是 div,但也可以将它们设置为 HTML 元素,比如form,ection,a,li 等。
可以在右侧面板对盒子进行填充、描边、圆角等样式。
复制样式:右键单击一个元素和复制样式Cmd+Option+C
,然后右键单击另一个元素和粘贴样式Cmd+Option+V
。(这不会删除已配置的样式,所以它不会删除背景填充颜色).
按 R 键绘制多个盒子时,叠放可嵌套盒子。
移动大盒子时,内部的小盒子也会同步移动。
按 T 增加文本框。
如需自动换行,则必须设置文本框的宽度。
到目前为止,我们一直在使用绝对定位而不是真正的布局。
按 S 绘制堆栈,在一行图标外拖出一个框,没有对齐的图标会自动对齐并自动判断水平还是垂直排列。
堆栈中的元素都是相对位置的,但也可以设置为绝对位置,后面将会讲到。
在堆栈里复制(Cmd+D
)某个元素后,位置会重新均匀分布。
通过右侧面板对堆栈内部进行布局的更改。
Flex-Gap是目前应用程序任意实现的某些浏览器所缺少的常用布局功能。Plasmic 堆栈为 flexbox 实现了一个跨浏览器间隙,该间隙是为了与 flex 间隙标准向前兼容而构建的。
通过打开右侧面板Layout中的Wrap来调整自动布局排列。
提示:调整容器大小时,按住Alt键拖动可对称调整大小。
Plasmic 实现了一个可与 Wrapping 一起使用的 flex-gap。
选中一个含有内容的盒子,在右侧面板设置为“hug”,或双击盒子的边缘即可。(这在 CSS 中也称为自动调整大小或内容调整大小。)
需要将内部盒子的高度调整为“hug”,外部盒子的宽高都调成“hug”,然后后更改里面的文字内容,会发现盒子宽度不变,高度会随内容改变。
还可以将一个条目设置为“stretch”以填满它的父容器,这与“hug” 的功能相反。
将每个按钮的宽度设置为“stretch”,拉伸将均匀填充剩余空间。
注意: 这是设置 flex-grow 和 flex-shrink,但也设置 flex-basis 为100% ,以便所有伸展项目都给予相同的权重。否则,flex-basis 默认为 width,而 width 默认为 auto,因此最终会根据文本的长度得到不同的权重!
这是 Plasmic 将布局提取为更简单、更直观的模型的另一个示例,但您始终可以通过弹窗的高级大小调整选项,以配置想要的精确的flex。
在右侧面板的Position 中选择对齐方式,也可以使用←
/→
箭头键调整对齐。
UI中的大多数元素都应该自动定位,但有时需要绝对定位。
自动布局框会自动对其条目进行布局,但我们也可以使特定项目脱离该布局,从而使它们处于绝对位置。
选中需要浮动布局的元素,在 Position 中选择 Free,然后设置绝对位置即可。
创建过程同基础部分的第6小节。
可以从左边栏的“Components”选项卡中查看和管理此项目中的所有组件,还可以通过单击组件或将其拖动到布局中来插入组件。
双击进入组件编辑状态,单击组件外部退出编辑状态。
提示:除了双击之外,还可以通过选择组件后按Cmd+Enter
来编辑该组件。 可以通过双击任何实例来编辑组件内容,所有实例都将更新。 这使您可以在实际使用过程中随时更新组件。
操作过程同基础部分的第7小节。
凡是需要更改内容的地方,都需要先转换为 slot 再进行编辑。
先将需要修改的图片和文字转换为 slot ,可用快捷键 Cmd+Option+S
,然后更改内部的内容。如需添加内容,直接复制粘贴进去即可。
slot 不仅仅是文本覆盖,它可以放入你想要的任何东西。将任何东西放入slot 的能力是将组件组合在一起的一种强大但简单的方法。例如,您可以将整个页面布局转换为一个带 slot 的组件,以确保跨页面的布局一致性和可维护性,同时更新每个页面的内容。
提示:编辑组件时,可以重命名slot,以便它们对组件用户更具说明性。例如,我们将目标中显示的组件中的插槽命名为“配置图片”、“名称”和“用户名”。
一些组件(如按钮)一般具有多个变体形式,如已经定义了几种变体,可以在右侧边栏顶部的 Variants 中,将 Type 设置为 Primary 。
这些按钮组件有三组变体:类型、边框和大小。
使用变体,您只需定义几个就可以表达多种可能性 (所以无需像 Figma 里那样穷尽所有可能性)。
变体之所以可以组合,是因为它们被定义为在组件基本样式之上的覆盖。例如,圆角变体只是覆盖边界半径。这就是为什么可以把它和 Danger 和 Large 结合起来,前者只是覆盖颜色,后者只是覆盖内边距。
总的来说,变体也属于组件本身,因此只需要一个 Button 组件,就可以在有 Button 实例的任何地方访问它的变体。
在“预览”框中,右键单击组件实例,然后选择“Edit component in new Artboard(编辑新画板中的组件)”。
现在,可以将画板看作是任何组件的孤立视图,可以根据需要拥有任意多个基础组件视图。
如果要将 Danger 中的红色改成橙色,首先选中基础组件面板,单击画板上方的浮动工具栏,然后选择“Danger”变体。这时我们现在正在“记录”对此变体的覆盖,任何更改都将被“记录”。最后设置文字和边框为橙色即可。
当记录到一个变体时,这将在位于画布顶部中心的记录栏中显示。
到目前为止,在使用 Plasmic 时,您可能已经注意到各种样式控件旁边的彩色点。蓝点表示样式在当前编辑的变体中被覆盖。可以在样式上单击鼠标右键,将其取消设置为当前变体。
通过选择“base”变量或使用记录栏停止记录变量。
假如我们要新增一个“Success” 变体。
默认情况下(每当双击组件时),“总是”在编辑基本变体。这就是文本更改会影响所有按钮变体的原因。
修改变体中的文字样式时,无需选中文字层,仅选中该组件层即可。
变体可以指定 slot 内容的样式。
编辑组件时,始终可以从右侧面板设置 slot 本身的样式。这些是内容将继承的默认排版样式。
任何实例都可以覆盖此默认样式。
到目前为止,我们的按钮组件只是由一个元素组成。以下将会设置包含更多元素的组件。
变量与整个组件相关联。因此,组件的变体可以覆盖该组件内部任何元素的样式。
变体并不局限于样式。
例如,根据您是否已经在关注某个用户,此配置文件卡看起来应该会有所不同。
您可以按条件渲染元素、设置文本、在嵌套实例上设置变量、设置插槽内容、设置任何属性/道具。所有设置都可以由变体控制。
注意: 按条件呈现不仅与可见性或 display: none
有关,还与节点的实际存在有关。
在 Plasmic 中,常见的交互状态,如悬停、按下、禁用和聚焦,都会以一流的效果呈现。
注意:如果交互变体只覆盖样式,这将导致代码中出现伪选择器。但是(和普通变体一样),您可以覆盖其他任何内容,这些内容将在代码中起作用。
为了允许禁用样式和聚焦状态,必须将元素 HTML 标记类型从默认的“ div”更改为元素 HTML 标记类型ー您可以从右侧边栏的右上角执行此操作。这里我们将元素类型设置为“ button”。
当交互变量和任何其他变量的组合处于活动状态时,您还可以自定义外观。例如,您可能希望主按钮、描边按钮等具有不同的悬停/按下/禁用效果。
至此,你已经学会了 Plasmic 中最难的变体概念。
现在进入了最后的冲刺阶段。
可以将颜色保存为可重复使用的颜色tokens。
在组件中选中某个颜色,然后在调色板中点击右下角添加颜色 tokens。
我们可以根据其他tokens递归地定义tokens。一个常见用法是: 可能首先需要定义一个从 blue-100到 blue-900的调色板,然后在此基础上,将 Accent 颜色定义为 Blue-700。
可以应用于填充、边距、大小、间隙、位置等等。
与颜色tokens一样,可以根据其他tokens递归定义tokens。
除了间隔tokens,还可以定义其他数字类型的tokens,包括字体大小、行高和不透明度。
样式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 设置的样式。
将图像插入到 Plasmic (例如通过粘贴)中时,SVG 图像将作为真正的 SVG 元素插入,并且 SVG 图标特别被识别为真正的 SVG 元素并允许重新着色。
提示:在Figma中,可以右键单击任何选择并复制为SVG。
到目前为止,我们主要处理的是盒子、文本、按钮、图像和图标。表单输入是唯一剩下的基本元素类型。
这将在预览模式和编解码器中产生真实(交互式)文本输入。
使用表单输入,您可以完全设置它们的样式,包括它们的占位符文本。
选择这个 input 组件,在“Element States”里,选择“占位符(Placeholder)”,就进入了编辑占位符样式的状态。
元素状态不仅仅用于输入占位符。它们也是一种快速设置元素特殊交互状态样式的便捷方法,而不需要定义带有变体的组件。
选择需要设置状态的图标或组件,在“Element States”里增加一个“Hover”,然后重新设置颜色等样式。
提高效率的一个最大技巧就是学会快捷键,少用鼠标!
通过键入Shift + ?
查看快捷键的完整列表。
以下是常用的一些快捷键操作:
Enter
:进入子集,或编辑文本Cmd+Enter
:完成输入,或进入组件编辑模式↑
/ ↓
/ ←
/ →
:对齐,或调整堆栈中的顺序Tab
:选择下一个同级元素Shift+Enter
:返回父级在左侧边栏的树选项卡顶部,可以显示当前项目中所有页面、组件和主视觉区的列表。
Plasmic 的核心特殊功能之一是让您将设计集成到任何代码库中。
点击“Code”工具栏按钮即可开始,这里显示了各种框架的快速入门。
查看开发人员快速入门项目,将会得到一个更加精简的示例(可从主项目列表页面看到)。点击左下角的“?”可查看完整的开发人员文档和教程。
我们可以从 Figma 导入设计稿。
点击左侧工具栏下部的 Figma 图标,获取 Figma 插件链接。
导入过程会将 Figma 图形媒体的所有低级样式转换为 Plasmic 的基于代码的表达形式。
请务必阅读有关如何更好地使用导入插件的文件,并了解预期结果!
使用插件导入 Figma 设计稿的一个示例视频。
样式化、布局、组件、slot、变体、tokens、mixins……这些都是 Plasmic 最核心的概念。
感谢你看到这里!很高兴我们一起进步。
Plasmic 的官方论坛是Slack、Twitter。
接下来的学习内容,可以单击“ Help”进入学习中心——在那里可以看到视频教程、阅读开发文档、查看示例项目等等。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。