当前位置: 首页 > article >正文

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

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

前言

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

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

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

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

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

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

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

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

填充

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

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

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

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

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

描边

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

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

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

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

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

效果

同上操作,我们新增效果

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

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

导出

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

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

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

总结

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

描边:相当于边框

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

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

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


http://www.kler.cn/a/410978.html

相关文章:

  • C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术
  • Apache Maven Assembly 插件简介
  • element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】
  • 速盾:CDN缓存的工作原理是什么?
  • 数据结构(Java版)第二期:包装类和泛型
  • Scala—Collections集合概述
  • Ubuntu 22 安装 NVM 详细步骤及常见问题解决方案
  • 从零开始:Linux 环境下的 C/C++ 编译教程
  • 智慧公厕解决方案-城市公厕更智能、更干净
  • Lua--1.基础知识
  • 学习threejs,使用设置lightMap光照贴图创建阴影效果
  • QT QRadioButton控件 全面详解
  • 【西瓜书】剪枝与样本值处理——预剪枝、后剪枝、连续值、缺失值
  • python深度学习机器学习编程序接单服务代码指导编写脚本调试爬虫
  • docker 通过Dockerfile自定义的镜像部署Springboot项目
  • 一个专为云原生环境设计的高性能分布式文件系统
  • C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术
  • 华为鸿蒙内核成为HarmonyOS NEXT流畅安全新基座
  • QML学习 —— 34、视频媒体播放器(附源码)
  • 8K超高清相机+双光谱融合技术
  • 二代三代社保卡读卡器串口命令协议,适用于单片机等嵌入式系统使用
  • WordCloud参数的用法:
  • 【VRChat 全身动捕】VIVE 手柄改 tracker 定位器教程,低成本光学动捕解决方案(持续更新中2024.11.26)
  • docker如何安装mysql8
  • 香橙派--安装RKMPP、x264、libdrm、FFmpeg(支持rkmpp)以及opencv(支持带rkmpp的ffmpeg)(适用于RK3588平台)
  • C语言数据结构学习:循环队列