PlasmicStudio⼊门教程
本⽂内容来源于 教程⽂件，结合个⼈理解整理，不完全按照原⽂翻译。如有表述不当，敬请指正。
加粗⽂字为个⼈注解，或与 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. 常⽤快捷键：
1. T 插⼊⽂字
2. V 垂直堆栈
3. H ⽔平堆栈
4. 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 创建可复⽤组件
创建过程同。
可以从左边栏的“Components”选项卡中查看和管理此项⽬中的所有组件，还可以通过单击组件或将其拖动到布局中来插⼊组件。
17 更新组件
双击进⼊组件编辑状态，单击组件外部退出编辑状态。
padding是外边距还是内边距提⽰：除了双击之外，还可以通过选择组件后按Cmd+Enter来编辑该组件。 可以通过双击任何实例来编辑组件内容，所有实例都将更新。这使您可以在实际使⽤过程中随时更新组件。
18 ⾃定义组件实例中的⽂字
操作过程同。
凡是需要更改内容的地⽅，都需要先转换为 slot 再进⾏编辑。
19 进⼀步组件定制

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。