前言

我原本以为, 在 Figma 只要用 Auto Layout 就可以打天下. 真的是 too young too simple.

要做一个简单的 7:3 比例, 用 Auto Layout 是做不出来的. Auto Layout fill container 只能做到平均 50% : 50% 而已.

这个是 Figma 的 feature request: Fr/Percent units for more control over auto layout content

参考:

How to use Constraints with Layout Grids in Figma Responsive Design

Designing with Figma: 04 - Everything About Layout Grids and Constraints

Layout Grid

要完成上面的需求, 目前只能使用 Layout Grid.

画一个 frame

配置 Layout Grid.

10 个 columns (红色的部分), Margin 是左右的 padding, Gutter 是每个 column 的间距 (垄沟)

Layout Grid + Constraints

在 frame 里面画 2 个 frame, 比例是 3:7

把里面的 frame 配置 constraints 左右

这时, 里面的 frame 会和 grid 的线条定位, 如果没有 grid 的话, 是和 parent frame 左右定位.

Figma 学习笔记 – Layout Grid的更多相关文章

  1. Xamarin 学习笔记 - Layout（布局）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1227733/Xamarin-Notes-Xamarin-Forms-Layouts ...

  2. KendoUi 学习笔记(二) Grid

    Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造       allowCopy    Boolen|Object  (默认:false) 当他设置true, ...

  3. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

  4. Selenium Grid 学习笔记

    Selenium Grid 学习笔记http://www.docin.com/p-765680298.html

  5. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  6. WPF学习笔记3——Layout之1

    一.概述 了解XAML的基本之后,进入Layout的学习.Layout,即布局,可能需要用到几种不同的容器.每一种容器都有各自的逻辑.在用户界面的设计过程中,很多时候是在想办法使得界面更加吸引.实在. ...

  7. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  8. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  9. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  10. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

随机推荐

  1. JavaScript高级~数组方法reduce

    reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值. 有点抽象,意思可以看做每个元素执行之后,都会有一个汇总结果,你可以通过这个汇总结果 ...

  2. JMeter 基于脚本实现代码共享

    需求描述 需求是这样的:执行某次压测任务时,压测涉及的前端接口,要求携带一个userName请求头,该请求头值为实际用户名经过DES加密后,再采用Base64加密后的值,为此,编写了一段加密代码,发送 ...

  3. 关于UE5打包DLC

    首先打开Project Lanucher,参考下图:,其次编辑配置两个edit Profile,参考下图: 第一个用来打包项目,第二个生成DLC,dlc填写的名字和插件一样,Main的配置如下: DL ...

  4. C#中使用 record 的好处 因为好用所以推荐~

    一晃距C# 9发布已经4年了,对于record关键字想必大家都不陌生了,不过呢发现还是有很多同学不屑于使用这个语法糖,确实,本质上record就是class的封装,能用 record 书写的类,那10 ...

  5. Linux网络问题排查

    Linux网络问题排查 用于排查Linux系统的网络故障. 网络排查一般是有一定的思路和顺序的,其实排查的思路就是根据具体的问题逐段排除故障可能发生的地方,最终确定问题. 所以首先要问一问,网络问题是 ...

  6. 【Zookeeper】01 概述 & 基础部署

    背景: 随着互联网技术的发展,企业对计算机系统的计算,存储能力要求越来越高,各大IT企业都在追求高并发,海量存储的极致, 在这样的背景下,单纯依靠少量高性能单机来完成计算机,云计算的任务已经无法满足需 ...

  7. 【Mybatis-Plus】04 AR (Active Record)

    AR模式,全称激活记录 具体操作更接近Hibernate一样的OOP操作方式影响数据库记录 比Hibernate操作更灵活更方便 上手: 首先User实体类需要继承Model类并泛型注入User类型 ...

  8. HP笔记本电脑——暗夜精灵2pro继电池鼓包后出现无法充电的问题，最后电量显示：0%可用（电源已接通，未充电）

    问题如题,最近使用暗夜精灵2pro笔记本(自己17年5月1节日购买)使用了四年,使用了第二年的时候出现电池鼓包问题于是自己花了不到200元在某宝上购入电池进行替换同时更新bios,正常使用到今年8月2 ...

  9. 【转载】 实时调度论文中经常出现的术语 ties broken arbitrary的意思 —— 看伪代码时出现 ties broken arbitrary

    看伪代码时突然看到这样的一个Ps标注, ties broken arbitrary,  不明白是啥意思,后来看到下文:https://blog.csdn.net/kangkanglhb88008/ar ...

  10. baselines算法库baselines/bench/monitor.py模块分析

    baselines算法库baselines/bench/monitor.py模块代码: __all__ = ['Monitor', 'get_monitor_files', 'load_results ...