figma软件教程-figma怎么镜像翻转

点击你在figma上创建的网格线,然后在右边调颜色,然后调透明度就好了。

Figma称得上是一款新晋的设计神器,它以浏览器为基础环境,是一个用于进行各种设计的多人实时协作工具,正因为它基于浏览器,所以支持 Windows、macOS 以及 Linux 平台,并且有 iOS 端的预览工具。

代替收费的sketch的软件figma,好用插件丰富,可以在web端和客户端使用,兼容性好功能能覆盖大部分sketch操作。

右键 或 Flip horizontal 或 Flip vertical。

1、Shift + H是垂直镜像;

2、Shift + V是水平镜像。figma是一款支持多人实时协作,支持导入导出多种格式的设计文件,原生代码标注,永久历史版本,打点讨论,一站式完成所有设计流程的设计软件。

一直使用PS做UI。无意间接触了Figma,在查找资料对其有了初步了解之后,决定入坑。

首先,PS的知名度不用多说,它是很多人学习的第一个图像软件,功能强大,一专多能,不可否认,现在用PS做UI的仍不在少数。虽然有关图像图形的几乎任何功能都可以用PS实现,但在很多方面,它并没有达到极致。矢量图形是PS的弱项,它并不是一个for UI设计师的专门软件,在很多设计上,可以处处体会到它的笨拙。

Sketch的出现让设计师们可以优雅地工作,但它只能在mac os运行,阻断了大批windows用户。

而Figma在界面设计上和Sketch极为相似,运行在浏览器上,是一个web应用,不存在跨平台问题。其次,Figma颠覆了PS的方式,在UI设计上,大大提高了效率。

UI的工作流程:绘制线框图 ⇒ 交流修改 ⇒ 绘制高保真界面 ⇒ 添加交互

以往完成上述工作需要跨越多个软件,而Figma则可以独自完成。

纸上草图,理清产品逻辑,打开软件。

在绘制之前,先创建一个 frame,我们给它起名为 UI library。我们将把所有的可复用组件和设计规范放在这里。

我们在里面先绘制一些基本的文字样式(H1, H2, H3, H4, P, Small 等)。此时我们可以直接使用默认样式,而不需要考虑设计。接下来绘制其它的组件,比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。推荐顺序:先绘制具体页面,再提取出一些元素将其转换为组件,在移动到 UI library 中。

如此,你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间,还可以保持产品一致性,这对于 UI/UX 设计来说是很重要的。

当你绘制完线框图并创建一套组件库之后,我们可以给它添加一些交互动作,Figma 内置很多交互效果可以帮我们做到。

你所需要做的就是在原型模式下,来连接需要交互的不同元素并设定他们之间的动作。需要注意的是,如果你连接了一个 master 组件,那么这将对其所有 instance 都起作用。

下一步就是分享你的原型链接给其他人,让他们直接在原型上给予反馈。接下来,根据反馈,修改你的线框图,直到最后确定下来。

细化你的线框图样式,将其转换为高保真设计图。在这一步,你可以直接在每个 master 组件上来应用品牌的色调和细节,得益于其组件唯一来源的特性,我们可以很快将线框图转换为高保真设计图。

打磨原型细节。你可以检查一下还有哪些元素可以作为组件,哪些组件可以优化一下,每个需要交互的元素是否都添加了链接,以及交互效果是否正确。

一切就绪,你就可以分享出一个链接给开发,并告诉他们如何查看标注,如何导出素材,他们遇到问题也可以直接在原型上评论。

References:

如何使用 Figma 来完成你的设计工作流