Figma学习过程(2)

1,750 阅读3分钟

一、移动工具

1.选中、移动元素

快捷键V,或者在工具栏中点选 image.png

2.复制

  • 选中元素后,按住Alt/Option键,鼠标任意方向拖动,即可复制。
  • 选中元素后,Command + D,直接在原位置复制选中的元素。
  • 选中元素后,Command + C,Command + V,也是一样的。

3.整理(自动对齐、平均分布)

全部框选住后,选择整理方式 image.png 点击“水平间距均分”后,水平方向间距就相同了 image.png 鼠标按住元素中间的小圆点,还可以对换两个元素,不改变其间距 image.png 鼠标按住元素中间的竖线,可以同时改变元素的间距 image.png

4.缩放

  • 任意缩放,选中元素后拖拽即可
  • 等比例缩放,快捷键K

5.调整元素属性

调整宽、高、圆角、填充、描边、阴影 image.png 拖拽小圆点可以任意调整圆角(我的页面刚开始没有出现这四个小圆点,后来放大了页面显示百分比,或者拉大了元素就出现了) image.png

二、元件组(Group)

相当于批量操作,不具备高级属性

1.选中

若想选中多个元素,可按住shift键逐一选中,或者直接拖动鼠标框选 image.png

2.组合

  • 选中后,快捷键Command + G,组合
  • Command + shift + G,取消组合 image.png

3.编辑

组合后,双击单个元素,即可单独编辑该元素 image.png 也可同时对全部元素同时进行编辑 image.png

三、画框(Frame)

1.设置画框

  • 「组」和「画框」可以互相切换,可在页面切换为「画框」
  • 或选中元素后使用快捷键Alt/Option + Command + G,组合为画框 image.png image.png

2.裁剪内容

勾选“裁剪内容”,超出画框的部分隐藏 image.png

3.画框背景色填充

image.png

4.画框嵌套

image.png 嵌套完成后的效果 image.png

四、形状工具

1.矩形

  • 快捷键R
  • 按住shift可绘出正方形
  • 拖拽小圆点,可同时改变四个角的圆角
  • 按住Option,拖拽小圆点,可单个修改圆角 image.png

2.直线

  • 快捷键L
  • 按住shift可水平绘出直线 image.png

3.箭头

-快捷键shift+L

4.圆形

  • 快捷键o
  • 拖拽小圆点,可绘制出饼图 image.png

5.多边形

  • 拖拽上面的小圆点,可改变圆角
  • 拖拽右边的小圆点,可改变图形边数 image.png

6.五角星

image.png

7.插入图片

  • 快捷键Command + Shift + K
  • 选中图片后,将图片放到图形上,图片可自动与图形合并。 image.png 使用蒙版,也可实现相同效果。将图片置于图形上方,点击蒙版,快捷键Ctrl + Command/Alt + M。 image.png image.png

8.合并元素

连接所选集 image.png 连接后的效果,此时仍可对单个元素进行编辑 image.png 可合并所有图层,Command + E image.png 合并为一个图层的效果 image.png

9.编辑元素

选中元素后,点击“编辑对象” image.png 点击小圆点,可任意拖拽图形。双击空白处,或者ESC退出编辑模式。 image.png