Figma入门-设计过程基本操作

Figma入门-设计过程基本操作

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作及其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

本篇我们来讨论页面设计过程中的一些基本操作。

汉化插件

figma 默认是英文版的,有些英文不是很熟悉,所以还是汉化一下使用。

我用的浏览器是 edge,进入插件管理中心,搜索 figma , 找到 FigmaCN 安装即可。

效果还行,虽然有些地方还是英文,但是也能凑合使用。

先继续学习,后面再来研究这个事情。

多选整理

多个图层的时候,一个个去拖动位置整理到一起显然不合适,工作量大不说,还有可能拖不到想要的位置,尤其是居中

我们可以直接画框,框柱想整理的图层,在右边的位置选项中进行统一整理

Alt + 拖动复制

复制的第一反应当然是 Ctrl + C Ctrl + V

但是复制后它是在跟原图层一样的位置

所以这时也可以使用 Alt + 拖动进行复制

然后 Ctrl + D 可以进行重复复制操作

位置跟上次拖动的位置进行重复相同

组件属性

这里不是组件的 css 属性,而是组件本身的配置,当我们选中 Alert 组件后,可以看到它能够配置的属性

例如按钮个数、标题、展示描述、确认框等等。

当我们选中 appicon 这个组件的时候可以看到,还能切换类型和是否显示名称等

模式切换

拖动除了按住 Space + 鼠标左键拖动外,还可以按下 H,此时整个画布的鼠标拖动都会变成拖动,而不是拖动组件

按下 v 可以退回移动模式。

总结

多选整理,框选多个图层后,在右边属性栏的位置里面统一调整

Alt + 拖动复制,复制后直接拖动位置进行复制,Ctrl + D 重复复制

除了基础的 css 属性外,组件还有自己特殊的属性可以使用,不必去修改里面的内容。

H 也可以拖动整个画布,方便进行位置调整,按 V 退回移动模式。

相关推荐
AI绘画哇哒哒20 小时前
【干货收藏】深度解析AI Agent框架:设计原理+主流选型+项目实操,一站式学习指南
人工智能·学习·ai·程序员·大模型·产品经理·转行
新缸中之脑1 天前
Figma Make 提示工程
人工智能·figma
产品经理邹继强2 天前
VTC产品与创新篇④:产品战略全景图——从“造物者”到“生态设计师”
人工智能·产品经理
程序员辣条3 天前
AI产品经理:2024年职场发展的新机遇
人工智能·学习·职场和发展·产品经理·大模型学习·大模型入门·大模型教程
PM老周4 天前
2026年常用瀑布管理工具有哪些?
阿里云·云计算·团队开发·产品经理·个人开发
MYPM_AndyLiu5 天前
对比 Codes、Jira、禅道、PingCode 等工具的需求管理方式
项目管理·产品经理·jira·项目经理·codes·需求管理对比
雁于飞5 天前
【无标题】
笔记·面试·职场和发展·跳槽·产品经理·创业创新·学习方法
SickeyLee7 天前
产品经理案例分析(二):电商产品立项:从 0 到 1 启动前,这 5 件事必须想透
产品经理
才聚PMP8 天前
怎么查PMP培训机构是否有官方资质?
产品经理
rolt9 天前
贷款卖房、西门和金莲《软件方法》第2章
产品经理·需求分析·需求工程