Figma入门-填充、描边、效果、导出

embedded/2024/11/27 5:55:47/

Figma入门-填充、描边、效果、导出

前言

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

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

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

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

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

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

本篇文章我们来讨论填充、描边、效果、导出。

以之前的登录按钮为例,进行尝试。

填充

选中登录按钮,在右侧的最底部,点击填充右侧的加号

即可选择填充的颜色、比例、是否显示、删除

我们可以进行多个颜色的填充

这个几乎就等于前端开发中的 background-color 属性了

比较特殊的是文字的填充是字色

描边

跟上面的操作相同,描边相当于是前端开发中的 border 属性

描边也有颜色、百分比、可见性、删除按钮

比填充还多了一个位置,可以选择外部、内部、居中和字重

字重相当于是这个描边的厚度

我们点击右边的设置按钮,还可以设置描边的样式等等属性

效果

同上操作,我们新增效果

可以看到有投影、内阴影、图层模糊、背景模糊等可选项

配合不透明度等属性,就可以做出一个类似磨砂玻璃的蒙层效果

导出

导出在这种大型的无边画布里面是很有用的,毕竟不可能用截图去截取整个页面

我们将登录按钮和文字做成一个组,然后连点三次导出的加号,可以看到如下:

导出后可以看到如下结果:

总结

填充:相当于背景色或者字色

描边:相当于边框

效果:投影、内阴影、图层模糊、背景模糊等

导出:可以对多个元素打组,然后统一导出为图片

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。


http://www.ppmy.cn/embedded/140827.html

相关文章

深入了解决策树---机器学习中的经典算法

引言 决策树(Decision Tree)是一种重要的机器学习模型,以直观的分层决策方式和简单高效的特点成为分类和回归任务中广泛应用的工具。作为解释性和透明性强的算法,决策树不仅适用于小规模数据,也可作为复杂模型的基石&…

【数据结构实战篇】用C语言实现你的私有队列

🏝️专栏:【数据结构实战篇】 🌅主页:f狐o狸x 在前面的文章中我们用C语言实现了栈的数据结构,本期内容我们将实现队列的数据结构 一、队列的概念 队列:只允许在一端进行插入数据操作,在另一端…

【算法】连通块问题(C/C++)

目录 连通块问题 解决思路 步骤: 初始化: DFS函数: 复杂度分析 代码实现(C) 题目链接:2060. 奶牛选美 - AcWing题库 解题思路: AC代码: 题目链接:687. 扫雷 -…

充满智慧的埃塞俄比亚狼

非洲的青山 随着地球温度上升,贝尔山顶峰的冰川消失殆尽,许多野生动物移居到海拔3000米以上的高原上生活,其中就包括埃塞俄比亚狼。埃塞俄比亚狼是埃塞俄比亚特有的动物,总数不到500只,为“濒危”物种。 埃塞俄比亚狼…

LLM PPT Translator

LLM PPT Translator 引言Github 地址UI PreviewTranslated Result Samples 引言 周末开发了1个PowerPoint文档翻译工具,上传PowerPoint文档,指定想翻译的目标语言,通过LLM的能力将文档翻译成目标语言的文档。 Github 地址 https://github.…

芯源CW32L010F8P6开发环境搭建

芯源CW32L010F8P6开发环境搭建 一. 下载CW32L010固件库 CW32L010固件库下载地址 二 安装keil pack 三.打开工程,配置DAP仿真下载工具

ensp静态路由实验

一、实验目的 1、熟练掌握交换机的基本配置命令 2、熟练掌握静态路由的使用方法 3. 熟练掌握交换机端口模式 二、实验内容 需求: 根据要求利用现有实验设备组建小型局域网 实验设备: 交换机S37002台;PC机2台;路由器2台。 …

C语言实例之9斐波那契数列实现

1. 斐波那契数列简介 斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家莱昂纳多・斐波那契(Leonardo Fibonacci)以兔子繁殖为例子而引入,故又称为 “兔子数列”。 它的特点是从第三…