admin 管理员组

文章数量: 1086019

figma

学习教程
/?spm_id_from=333.999.0.0&vd_source=ef114f70c3fd4d5394f12dbd3d022bbe

一.两个层级

1.如果是给一个形状，shift+a，autolayout 则形状是子元素，还有一个frame父元素
2.如果给一个文字下面再加一个形状，一起autolayout 则形状自动变成frame,且有填充，只有文字是子元素
3.能相互影响的只有相邻的父元素和子元素
4.下面这些设置是针对父元素的
5.一层一层调，从最里面的拉满，再调外面的也拉满



二.hug和fill

hug:跟着内容走，内容大就大，被撑起来，默认就是这种状态，对应前端里的box默认状态
默认HUG情况下，子元素形状怎么变化，外部frame也就怎么变化
fill就是填满，就是让元素跟着父元素走，比如原来子元素是超出外框的，给子元素一个fill,它就收进来了
autolayout变化层级的权限比普通frame的高

HUG:指向子元素，跟着里面内容走，内容变大，frame就变大，没有子元素就没有HUG
FILL：指向父元素，父元素变大，frame就变大，没有外框就没有FILL

就是前端里Box-sizing属性

在父级调文字

下列子元素全部fill填充的效果
第二个改成固定，则第二个单独计算宽度，其他仍然响应式

下面是中间宽度fill, 左右两侧固定

重叠：就是中间间距设为auto

红圈部分是原型，演示的时候上面固定，位置固定的时候用

固定这里是有个小分类，可以把想固定的地方都放一起

红圈部分按shift 可以多选

下图红框就是用等比例缩放

布局约束只被最近一级的frame约束，隔级别，跨级别就不行
组没有布局约束的权限，尽量都用frame
组也没有网格和栅格，frame是一个框架的概念

栅格的横向和竖向都可以加

上下左右都约束以后，可以跟着栅格走
用栅格自动处理除不尽的问题，自动计算间距，只要375把两边边距留好，中间间距留好，位置约束好即可
一般用栅格等分东西

三.技巧

绝对定位

autolayout前提下，才有绝对定位，点击右上角方框小图标，即可将图形和frame绝对定位
图层前后次序（与普通图层相反）：
绝对定位的图层在图层列表中在底部显示，则在画布中该图形显示在顶层

四.快捷操作

快捷变hug:双击边界
快捷变fll:双击边界+alt
快捷变fixed:直接拉伸


快捷居中：
vh
wh

frame位置
option+a/w/d/s
option+v/h

点击一下，再点击awsd,x控制是不是均分


上右下左
间距调节：按空格，间距自动变auto

边距调节：
按cmd可同时调节4个
上、右、下、左，输入四个不同数值


tab键切换选框位置

按住alt拖拽，对称调节边距，按住alt+shift同时调节4个边

智能设置间距，使间距按4的倍数调节
按住shift再去拖动间距，可以按4的倍数调节参数
所有数值选项也可以按shift调节，按4的倍数增长


点间距区域可以直接输入数值，可以支持运算

本文标签： figma

版权声明：本文标题：figma 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699110130a329414.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。