Figma 学习笔记 – Frame
2023-09-27 14:23:55 时间
Frame = <div>
Frame 就类似 HTML 中的 div, 它和形状 rectangle 特性上蛮相识的, 但是使用场景其实差很多, 所以不要搞错哦. (除了图片很少会用到 rectangle 的)
Keyboard F 或者右上角选 Frame 就可以画出一个 frame 了.
Frame 基本配置
上面是 frame 的全部基本配置. 我们一个一个看.
第 1 个是可以选常用的 frame 尺寸, 比如 iPhone, Android 手机尺寸
第 2, 3 是 width height 对调
第 4 是把 frame 变成一个 wrapper, 修改 frame dimension 依据 wrap 它的内容.
x, y 坐标, 它这个对的点是中心点哦. 0, 0 的时候是在正中间. 一般上很少会手动调这个.
配置 width, height
它有一个小技巧哦, 可以直接写简单 formula 比如 197 + 50, 它会算出答案然后赋值.
右边的 icon 是一个锁定比例, 开启之后修改其中一个 dimension, 另一个会依据比例自动一起修改.
第 1 个是 frame 的角度旋转
第 2 个是调 frame 的圆角 border-radius (4边)
右边的小 icon 可以指定每一个角不同的 radius
隐藏/显示超出 frame 的内容. frame 就像 div 当内容过长的时候可以有 scroll bar 的概念.
相关文章
- MySQL学习笔记_10_MySQL高级操作(下)
- 轻量级远程调用框架-Hessian学习笔记-Demo实现
- Python数据库ORM工具sqlalchemy的学习笔记
- Django学习笔记之使用 Django项目开发框架
- 【Linux】Shell学习笔记之四——文件和目录管理(硬连接和软连接)
- Angular 学习笔记 Material
- SpringBoot学习笔记-7:第七章 Spring Boot 启动配置原理
- redis cluster集群管理工具redis-trib.rb命令小结-运维笔记
- Ceph分布式存储 - 学习笔记
- Android学习笔记:超能RecyclerView组件使用总结
- 【转】人类的心理行为模式----《影响力》笔记
- 小波变化库——Pywalvets学习笔记
- 《图解算法》学习笔记之选择排序
- gdi+学习笔记
- SpringBoot笔记——Hello World(狂神)
- 斯坦福机器学习公开课学习笔记(1)—机器学习的动机与应用
- 随想录(SEO笔记)
- Unity UI Toolkit学习笔记-USS
- 2021-09-23 《计算机操作系统》(第四版)学习笔记:第二章(1)
- 大龙的学习笔记之“虚方法,抽象方法,重写,抽象类,接口”
- 孙鑫VC++视频教程笔记
- 《正义论》笔记
- 大数据笔记(一):大数据启蒙与入门知识
- IOS学习之斯坦福大学 IOS开发课程笔记(第一课)