figma有哪些快速入门的好用技巧

2023-11-06

使用Figma在创建设计系统或处理大型设计项目时,总会涉及批量修改.快速定位.自动布局问题,MarcAndrew这篇文章分享了技巧,可以大大提高设计效率,希望对大家有所帮助:

在这篇文章中,我列出了一些快速简单的方法来帮助你更快地使用它Figma制作设计系统。这里分享的大部分技能都非常适合处理设计系统,或者庞大的设计文件和设计项目,当然也适合Figma处理日常设计项目。

​你可能熟悉一些内容,但也可能有一些内容是你从未发现过的宝藏。接下来,让我们开始:

1.批量修改颜色的使用「颜色选择面板」

当你想快速修改多个组件的颜色时,不要一个接一个地选择,所以工作量太大了。此时,最快的方法是选择侧面「颜色选择面板(SelectionColors)」这种方法是直接调用色彩系统中的色彩,可以达到批量修改的目的。

2.这个快捷键可以使图层清晰整洁

图层面板中的文件夹结构可以帮助您更快地找出包含哪些元素,但由于屏幕尺寸的限制,在复杂的设计系统中,由于元素太多,你很难清楚地了解整个系统。

使用最简单的快捷键Alt+L,所有的层都可以折叠起来,这样你就可以更清楚地看到整个系统的全貌,并专注于当前的项目。

3.搜索可以更快地定位文本样式

当你想改变文本风格时,你不需要无休止地滚动图层和选项来找到你需要的文本。此时,使用搜索功能可以帮助您更快地定位到相应的层。

例如,您可以直接搜索H2或者Headline2找到相应的文本层,而不是逐个浏览层面板。特别值得一提的是,当你在搜索时,如果你想搜索,比如Headline37、可直接搜索H37可以找到相应的图层。

使用简短的关键词搜索也能更快地提高编辑内容的效率。

4.使用列表选项更快选择颜色样式

正如我之前所说,尽快调整配色风格和文本风格,以便更快地设计。所以,当你使用它的时候。「色彩指示器(Inspcetor)」在调整颜色选项时,将网格布局改为列表布局,可以更容易地浏览和使用配色风格,更直观。

5.使用键盘快捷键更快地浏览图层

绝大多数用户习惯于通过鼠标滚动和点击图层面板,逐个控制,逐个文件夹,一个接一个地找到,这个效率超低,我也这样做了很长一段时间。然而,鼠标点击的效率远不如键盘快捷键方便快捷。

最快的方法就是使用Tab在图层中快速向下切换选择图层,然后使用车键确认。这种选择比鼠标快很多,但是Tab只能向下滚动选择,如果要向上切换选择,使用,Shift+Tab快捷键就可以了。

6.使用快捷键更换和更新组件

设计系统总是不可避免地涉及到不同时间、不同版本的设计系统分支之间的处理,比如版本V2.更换图标2V2.5.这时,按住。Alt+Cmd按钮,选择需要调整的组件,组件周围会有一层紫色的外界。此时,您可以在不同的版本之间切换和调整,非常快。

7.使用自动布局快速改变组件尺寸

当您设计当前项目的主要组件时,记得隐藏与主要组件无关的部分,并在层管理中保持此,您可以点击图层面板中的小眼睛图标来隐藏它们。同时,这个小图标也可以帮助您根据需要适应组件的大小。(这部分作者没有说清楚,知道学生记得在评论区留言纠正)

8.使用自动布局及时避免文本对齐混乱

在处理设计系统时,排版工作量会很大,会注意到这些文本元素不能像其他现有文本那样整齐一致地排列。此时,不要担心,记住在使用自动布局功能时,首先到文本排版,确定排版对齐规则,然后自动布局功能将遵循这个逻辑自动布局。

9.自动布局缩放异常时,应调整间距设置

在许多使用自动布局的组件中,当你试图调整某些元素的大小时,缩放的大小可能会发生变化。例如,在一个组件中UI在控制中添加标签组件(ChipsComponent),插入似乎很好,但当你想调整标签尺寸时,你会发现它很难控制。此时,在自动布局的设置面板中,尝试切换间距设置中的面板「Packed」和「SpaceBetween」选项,之后应该正常。更多figma内容:https://js.design/special/figma/

结语

我希望这些技能能帮助你,尤其是在处理复杂的设计系统时。这些技巧可以帮助你提高效率,在一定程度上缓解问题。Figma这是一个很好的工具,它有很多有效和省时的技巧,但它们需要你花时间去探索。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

figma有哪些快速入门的好用技巧 的相关文章

  • unity制作血条

    unity制作血条 在hierarchy中create gt UI gt image 重命名为border 将血条框拖入Source Image Set Native Size 防止变形 在Canvas下create empty 命名为He
  • app上架流程的整理

    app的上架流程 一 准备工作 首先需要有开发者账号 企业级的账号是299 个人开发者账号是99 没有的话可以登录http developer apple com 自行申请 假如你已经有账号了 进入苹果官网点击Accout登录 二 申请证书
  • element-ui中日期区间组件

    elementui中日期组件使用 最长只能选择3个月 不限制禁用日期 描述 时间组件代码 描述 点击 确定 按钮进行验证 点击 清空 按钮 清空输入框中的数据 时间范围不能超过3个月 并添加快捷选择今天 最近一周 最近一月 最近3个月 以下
  • Qt5学习之路(vs2012下创建一个QT应用程序)2013-10-14

    刚开始学习QT在网上找的资料基本都是使用QT Create进行开发的 VS下开发的学习资料感觉很少很难找的到 视频教程也基本没看到过貌似 因为我们研发中心是使用MFC进行开发开发工具是VS2010 使用QT开发的话基本我们不会再使用QT C
  • QT-----ChartView控件的使用

    chartview可用于制作折线图 饼状图 条行 柱状 直方图系等来体现数据数据变化起浮 以下案例以折线图举例 1 使用ChartView控件 注意点 1 要在pro文件中加入 QT widgets 2 主界面应当使用QApplicatio
  • MapReduce作业状态一直为ACCEPTED解决过程

    toc 今天在测试Hadoop文件压缩功能时 在之前本地搭建的Hadoop集群上提交了一个MapReduce作业 但是提交后发现一直卡在那不动 18 07 20 17 21 50 WARN util NativeCodeLoader Una
  • 试题库管理系统--数据库设计

    链接 https pan baidu com s 1ilMGCA n1GPDk3O8k7w7Gg 提取码 m0ke 复制这段内容后打开百度网盘手机App 操作更方便哦 一 概要设计 1 1 背景和意义 目前 许多高校绝大多数课程还采用考教统
  • 蓝牙App设计2:使用Android Studio制作一个蓝牙软件(包含:代码实现等)

    前言 蓝牙聊天App设计全部有三篇文章 一 UI界面设计 二 蓝牙搜索配对连接实现 三 蓝牙连接聊天 这篇文章是 二 蓝牙搜索配对连接实现 课程1 Android Studio小白安装教程 以及第一个Android项目案例 Hello Wo
  • string (std::string)转换为QString的用法(含中文)

    string s 123 QString str QString fromStdString s 含中文时的转换 std string str 你好世界 QString Name QString fromLocal8Bit str c st
  • Qt 不规则窗口,不规则按钮,不规划控件 不规则界面

    有一些特殊情况 需要使用不规则窗口或按钮 看起来非常炫酷 类似 Qt 实现 不规则样式设置 不是视觉欺骗 是真正的不规则 点击外面不会触发按钮的点击信号 Part1 不规则窗口 效果 显示成一张图片中的图形 使用带有透明区域的png图片 i
  • (ps2019)Photoshop 2019 最新破解版下载

    Photoshop CC 2019新增功能 下载地址点我 新功能介绍 https helpx adobe com cn photoshop using whats new html 经过改良设计的内容识别填充 借助 Adobe Sensei
  • Photoshop、Illustrator、Sketch哪个更好

    以前在交流组经常能看到大家争论哪个设计软件好 到底是你的吗 Illustrator好还是我的CorelDRAW或者他的Photoshop强大 但是跟着UI流行的设计 Sketch软件也加入了争论 让我们和你分享一下这篇文章 让我们来看看平面
  • 「盘点」界面控件DevExtreme UI v23.1中的API增强

    DevExtreme gt https www evget com product 3150 拥有高性能的HTML5 JavaScript小部件集合 使您可以利用现代Web开发堆栈 包括React Angular ASP NET Core
  • 296_C++_一个dialog对话框在执行exec向系统发送一个延后销毁事件时,另一个对话框立刻接管了上一个对话框的销毁事件,导致死UI

    1 根因分析 根因分析 当有新版本并且grade等级是2的时候 点击ptz的时候使用的是RSDialog WA DeleteOnClose属性默认是为true的 并且是栈上的变量 当关闭ptz的时候 diolog的exec结束会向系统发送延
  • vue element-ui el-tooltip组件失效问题

    引用自 https blog csdn net ygrhlh article details 121660806 vue element ui el tooltip组件失效问题 因为公司项目年代久远以及谷歌chrome 80 后的sames
  • Swift 响应式编程:简化 KVO 观察与 UI 事件处理 | 开源日报 No.110

    ReactiveX RxSwift Stars 23 8k License MIT RxSwift 是 Reactive Extensions 标准的 Swift 特定实现 它提供了 Observable 接口来表达计算的通用抽象 该项目旨
  • Mac版 Photoshop 2021---PS2021

    Adobe Photoshop 2021是一款强大的图像处理软件 它可以帮助用户进行各种图像编辑 修饰和合成工作 这款软件拥有先进的图像处理技术 支持多种图像格式 可以轻松实现各种复杂的图像处理任务 它还提供了丰富的滤镜和工具 使用户可以自
  • HarmonyOS鸿蒙开发指南:容器组建 stepper开发指导

    目录 创建Stepper组件 设置index属性 设置样式 添加事件 场景示例 创建Stepper组件 在pages index目录下的hml文件中创建一个Stepper组件 div class container div
  • 电脑快速打开计算器的方法

    大家好 我是爱你三千遍斯塔克 我们平常在运算时 经常要要使用计算器 那么计算器有什么快速打开方法吗 这里有一些参考方法 可供大家进行参考 希望对大家有帮助 希望你喜欢我的内容 记得关注我哦 我会继续为大家带来更好的作 1 win R 打开运
  • 一文从0到1手把手教学UI自动化测试之数据驱动!

    在UI的自动化测试中 我们需要把测试使用到的数据分离到文件中 如果单纯的写在我们的测试模块里面 不是一个好的设计 所以不管是什么类型的自动化测试 都是需要把数据分离出来的 当然分离到具体的文件里面 文件的形式其实有很多的 这里主要说明JSO

随机推荐

  • ChatHub

    1写在前面 最近忙的不行 根本没有时间打开电脑 随着GPT 4和new bing的发布 真的可以说是AI的iphone时刻到来了 现在也是越来越多的网站接入了AI 以后人人都可以是程序员了 New Bing在GPT 4的加持下 功力大增 搜
  • 重学二、函数指针&指针运算

    目录 1 多级指针 2 数组与数组指针 3 采用指针遍历数组 4 循环时给数组赋值 5 指针类型有何用 7 函数指针 1 多级指针 int main int num 66 int pointer num 一级指针 int sec point
  • 总结:修改Anaconda中的Jupyter Notebook默认工作路径的三种方式

    总结 修改Anaconda中的Jupyter Notebook默认工作路径的三种方式 方式1 打开Windows的cmd 在cmd中输入jupyter notebook generate config如下图 可以看到路径为D Users 找
  • Qt之QTableView 获取当前选中行

    QModelIndexList list ui gt tableView gt selectedIndexes if list count lt 0 return QModelIndex index ui gt tableView gt s
  • ElasticSearch讲解——基础概念

    一 什么是ElasticSearch ElasticSearch以下简称为ES ES是一款基于Lucene的搜索服务器 它提供了一个分布式多用户能力的全文搜索引擎 并且基于RESTful web接口对外提供检索服务能力 Elasticsea
  • 展望2020

    区块链行业在2019年末迎来高光时刻 国家明确指出把区块链作为核心技术自主创新重要突破口 加快推动区块链技术和产业创新发展 新年伊始 陀螺财经邀请到数位学术圈 产业圈的相关人士 运用他们的专业知识 行业实践 剖析2020年行业的发展动向 谈
  • 【算法】链表

    算法 链表 反转链表 移除链表 交换链表 链表相交 删除链表中的倒数第N个节点 环形链表 反转链表 反转链表是指将单向链表的顺序逆转 即原本的链表方向由头节点指向尾节点 变为尾节点指向头节点 在 JavaScript 中 可以通过修改节点的
  • KEIL的下载图标是灰色的怎么办

    今天用cubemx配置好之后 generate发现下载图表是灰色的 解决方法 魔术棒下面的debug选项 有个右下角有个空手动输入 MPU
  • mock测试工具

    什么是mock测试 mock常见场景 mock常用工具 实战 1 什么是mock测试 mock测试就是对于某些不容易构造或者不容易获取的对象 用一个虚拟的对象来创建以便测试的测试方法 2 mock常见场景 1 无法控制第三方系统某接口的返回
  • PTA 7-100 敲笨钟 (20 分)(C语言版)

    微博上有个自称 大笨钟V 的家伙 每天敲钟催促码农们爱惜身体早点睡觉 为了增加敲钟的趣味性 还会糟改几句古诗词 其糟改的方法为 去网上搜寻压 ong 韵的古诗词 把句尾的三个字换成 敲笨钟 例如唐代诗人李贺有名句曰 寻章摘句老雕虫 晓月当帘
  • 测试开源C#人脸识别模块ViewFaceCore(2:人脸关键点定位器和活体检测)

    ViewFaceCore模块中的FaceLandmarker类支持识别人脸关键点 也即人脸上的关键位置的坐标 其中主要调用Mark函数返回图片中指定人脸的关键点位置集合 该类需配合FaceDetector类共同使用 FaceLandmark
  • UnityWebRequest下载图片和视频进行使用

    利用空余时间写一下网络下载资源使用 进行熟悉一些UnityWebRequest unity已经抛弃了WWW 这里很简单只需要把脚本挂载就行 所有的界面操作都通过代码实现 资源的下载 删除都做了相应的操作 using System Colle
  • 未定义标识符 HMAC_CTX_init

    这是因为 这是旧版本的代码 HMAC CTX hctx HMAC CTX init hctx HMAC Init ex hctx mac key sizeof mac key EVP sha1 NULL HMAC Update hctx p
  • 什么是数据中台?

    写在前面的话 不要被技术吓到哦 本文尽量写的白话 致力为从事大数据的运营 咨询规划 需求以及想学习大数据的入门者提供知识分享 导读 本文将阐述 为什么要建设数据中台 什么是数据中台 数据中台具备什么样的能力 采用什么技术来实现 一 为什么要
  • QEventLoop源码

    Copyright C 2015 The Qt Company Ltd Contact http www qt io licensing This file is part of the QtCore module of the Qt To
  • JDBC的原理与开发步骤(详解)

    简介 JDBC Java DataBase Connectivity 就是Java数据库连接 说白了就是用Java语言来操作数据库 原来我们操作数据库是在控制台使用SQL语句来操作数据库 JDBC是用Java语言向数据库发送SQL语句 原理
  • 想成为网络安全工程师需要学习掌握哪些技术

    想成为网络安全工程师 GPT建议需要掌握以下技术 1 网络基础知识 了解网络协议 网络拓扑 子网划分等基础概念 2 操作系统知识 熟悉常见操作系统 如Windows Linux 的安全配置和漏洞 3 数据库知识 了解数据库的安全配置和防御技
  • Java开发过程中的避坑点(一)

    1 典型空指针问题 包装类型的空指针问题 级联调用的空指针问题 Equals方法左边的空指针问题 ConcurrentHashMap 这样的容器不支持 Key 和 Value 为 null 集合 数组直接获取元素 对象直接获取属性 1 1包
  • RDA 升级

    烧录BOOT升级方式 1 连接 2 烧录BOOT 1 升级 bootrom raw bin 99K 这种升级方式需要Tera Term 工具 按 F5 U盘升级 编译的升级文件 RR8503 bin RR8501 bin RR52C bin
  • figma有哪些快速入门的好用技巧

    使用Figma在创建设计系统或处理大型设计项目时 总会涉及批量修改 快速定位 自动布局问题 MarcAndrew这篇文章分享了技巧 可以大大提高设计效率 希望对大家有所帮助 在这篇文章中 我列出了一些快速简单的方法来帮助你更快地使用它Fig