前端使用figma如何查看设计稿中元素的间距【解决记录】

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量2.4k 收藏 1
点赞数 10
文章标签： figma 前端 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vac_Fyh/article/details/136840053
版权

省流:选中元素后按住alt键，鼠标移动到其他元素上就可以了

背景

新接触了figma这个设计工具，发现正常情况下看不见元素的间距，边距等尺寸信息

于是在网上搜索，起初找到一些“解决方式”，但都没解决问题（就不在这里列出了）。

解决方式

在网上查找了很多文章后，发现一个说法是按住ctrl选中后，再按alt

按照它的说法操作但无效。自己探索后发现只需要选中元素后按住alt键即可

白墨茗香
关注
  • 10
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Figma Auto Layout（自动布局）内部元素单独自定义间距
Pinton_Tech的博客
06-15 7586
Figma自动布局是个非常好用的功能，但是它只能设定统一的
figma-inspect-element:Figma插件来检查元素
05-03
Figma插件-检查元素 这是一个自定义插件，旨在填补我们目前的移交流程中的特定空白。 未来的更新可能会使更多的受众受益。 安装 待审核
Figma常用快捷键（Mac版）
热门推荐
SongD1114的博客
04-10 2万+
Figma常用快捷键（Mac版）
td中文字间距_设计师必看的字体与排版指南（下）文字排版与开发应用
weixin_39688875的博客
12-04 689
书接前文，《字体与排版》下篇来啦～设计中，好的排版能让用户愉快地阅读，而不好的排版则会给用户带来糟糕的阅读体验。因此排版的潜在重要性不容忽视。无论是在西方国家还是亚洲国家，大部分人们的阅读习惯都是从左到右。这种阅读模式已经延续了几百年，因此如无特殊需求，你应该使你的文本左对齐，这样符合人们一贯的阅读习惯（阿拉伯地区除外）。人缺乏耐性，在阅读过程中更似是一种远近不定的跳跃「扫视」。枯燥的文字如果没有...
figma下载_不用担心Figma中的间距
weixin_26732881的博客
08-03 1787
figma下载 重点 (Top highlight)I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, cont...
html怎么查看两个块的距离,两个东西之间的距离怎么控制
weixin_32858247的博客
06-29 348
该楼层疑似违规已被系统折叠隐藏此楼查看此楼给你简单的写了个例子，你看看吧，具体还要你网上查下相关资料，这里说的比较笼统！代码：新建网页/*这里是margin设置距离*/#div1{width: 200px;height: 300px;background: blue;}#div2{width: 200px;height: 300px;background: red;margin-top: 20p...
安卓的用户实时预览Figma设计稿的方法
rayyu1989的专栏
02-07 3964
用标记狮免费预览Figma设计稿
figma查看原始图片大小
hufang360的专栏
07-15 4942
在sketch中可以一键调回原始尺寸，有时想让图片缩放3倍，调到原始尺寸后，宽高输入框“*3” 或者 ⌘+k缩放至300% 就完成了。 那figma里如何知道原始图片的大小呢，目前发现一个“曲线救国”的方法。 figma中选中图片后，执行 鼠标右键–>Copy/Paste–>Copy as SVG 然后粘贴到文本文档中，image标签的宽高属性就是原始图片大小 例如： <svg width="72" height="78" viewBox="0 0 72 78" fill="none"
产品设计稿UI与WEB前端如何交接(尺寸方面).zip_产品设计稿
01-10
在UI设计稿中，设计师会使用像素（px）作为单位来精确控制元素的大小。然而，在前端开发时，为了实现响应式布局和适应不同屏幕尺寸，前端工程师通常会使用相对单位，如rem（root em）。rem是以HTML根元素的字体大小...
设计稿自动标注工具
03-11
在IT行业中，设计稿自动标注工具是提升设计与前端开发协同效率的重要利器。"设计稿自动标注工具"正如其名，能够帮助设计师快速地为设计稿添加尺寸、间距、字号等详细信息，自动生成适用于前端开发的代码，使得前端...
tailwind-coffee-shop:我使用 TailwindCSS 将设计从 Figma 切片到代码
08-04
- 解析设计：分析设计稿的颜色、字体、间距等属性，对应地在TailwindCSS配置中设置或调整预设值。 - 创建HTML结构：基于Figma的设计，创建相应的HTML元素，使用TailwindCSS的类来添加样式。 4. **HTML基础** - ...
手机端自适应项目-ui设计稿.zip
03-25
UI设计稿通常包括线框图、原型图、高保真设计图等，这些设计稿可能使用Sketch、Adobe XD、Figma等工具创建，它们展示了界面元素的布局、颜色方案、图标设计、状态变化等细节，为开发人员提供了实现界面的清晰指南。...
设计提效-Figma技巧篇
m0_73257876的博客
09-06 3749
触发器用于定义原型从一个框架到另一个框架的交互方式。你可以使用原型选项卡中的 Trigger 下拉列表进行设置。智能动画利用Figma内的智能动画，设计师可以轻松地做出丰富的动画效果，例如开关的切换、tab的平移、选择器的滑 动等。简单来说，设计师只需要制作开始帧和结束帧的设计稿，利用触发器将两者串联后，智能动画会帮助设计师补齐过程中发生的动画，你也可以在这个过程中选择 合适的动画曲线让你的动画更具表现力。弹性动画Config 2022的更新中，Figma为设计师专门提供了在原型转换中的弹性动画。
16-Figma-自动布局
billycoder的专栏
01-22 3015
16-Figma-自动布局 常见操作 创建自动布局,shift+a 解除自动布局,属性面板操作或者alt+shift+a 自动布局加背景圆角,属性面板 自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d 自动布局控制内边距,属性面板 自动布局控制项目间距,属性面板 自动布局设置大小,拖动或者属性面板 自动布局如何适应内容,属性面板操作 自动布局让子元素居中对齐,属性面板操作 自动布局如何设置等距模式,属性面板操作 改变自动布局宽高子组件固定高度调节宽度,属性面板操作 改变
学习figma
qq_66740903的博客
06-27 5280
Figma是目前最流行的一款免费云端设计工具，常用于UI设计，Web设计，移动应用设计和交互设计等领域。下面介绍一些Figma的基本概念和使用方法。
figma button_您可能现在知道的figma提示和技巧
weixin_26715991的博客
08-30 2496
figma button 重点 (Top highlight) 忽略约束 (Ignore constraints) With constraints you can set items to stick to the left, right, or center of their parent frame — or to stretch. Constraints are one of the be...
Figma用了那么久，怎么还在问标注和切图！
设计“1+2”，摹客就够了！
10-14 5395
推荐了那么久的Figma，居然每天都还有很多粉丝在私信里问我：用Figma交付要怎么做切图和标注呢？ 都是假粉吧！ 这事儿说过了，单靠Figma肯定不行，因为它得依托于外网，不用加速器读取效率就会很受限，所以还是得借助三方工具来发力。 而在今年年初捣鼓Figma的时候，我就找了一圈，发现只有它能上传Figma设计稿，实现切图和标注，就一直捆绑推荐到现在。而且不负所望，直到现在他们也是这一块做得最好，最稳定的一家。 “它”就是国内最早推出Figma插件的（也是我依旧推荐的）设计协作平台..
Figma 替代品 Excalidraw 安装和使用教程
云原生实验室
07-22 882
Excalidraw是一个开源的虚拟手绘风格白板工具，使用 React 构建，上线于 2020 年 1 月，非常年轻。它提供了实时协作和端到端加密功能，让你的远程协作更有创意、更安全。Excalidraw 旨在为开发者和最终用户提供一个简单、直观且功能强大的绘图体验。一个优秀的白板工具不仅要满足基本的绘图需求，更要为用户提供愉悦的创作体验。简单直观：上手即用，无需学习复杂操作。手绘风格：独特的视觉效果，激发创意思维。实时协作：多人同时编辑，ideas 即时碰撞。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 844
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
figma怎么设置间距
07-25
在 Figma 中设置间距可以通过以下步骤进行： 1. 选择你想要设置间距的图层或组。 2. 在右侧的属性面板中，点击"布局"（Layout）选项卡。 3. 在"间距"（Spacing）部分，你可以选择水平（Horizontal）或垂直（Vertical）间距，或者同时设置两者。 4. 输入你想要的间距数值。你可以使用像素（px）或百分比（%）作为单位。 5. 如果你想要应用间距到组内的所有图层，勾选"应用到子图层"（Apply to Children）选项。 通过这些步骤，你就可以在 Figma 中设置图层之间的间距。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值