前言

我原本以为, 在 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. 使用forEach循环异步方法，导致使用深拷贝时，得不到最新数据，控制台会打印出最新的数据

    在使用forEach循环遍历一个数组,如果循环时有异步方法,会导致最终深拷贝得不到最新数据,但是控制台会打印最新的数据 `const arr = [ { name: "Jone", ...

  2. 在缩小浏览器宽度的时候，图片会超出li的宽度

    要确保在缩小浏览器宽度时,图片不会超出 <li> 元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于 <li> 元素.一种常见的方法是使用 CSS 中的 max-wid ...

  3. vb.net 实现excel导入的时候滚动显示导入的数据

    如果你想在 Excel 导入过程中滚动显示导入的数据,可以使用逐行读取 Excel 数据并在滚动窗口中显示. 在 VB.NET 中,你可以使用 Excel.Range 对象逐行读取 Excel 数据, ...

  4. [oeasy]python0108_谷腾堡活字_哥特字体_罗马帝国_希腊文化_文艺复兴

    谷腾堡活字 回忆上次内容 上次回顾了字型编码的进化过程 7-seg 七位数码管 显示数字   14-seg 十四位数码管 显示字母     ​   添加图片注释,不超过 140 字(可选)   米字管 ...

  5. TIER 0: Redeemer

    TIER 0: Redeemer Redis Remote Dictionary Server 是一个开源的内存数据存储系统 Redis 是完全基于 内存,"内存"数据库的数据检索 ...

  6. static个人理解

    static解:主要用于内存管理,static关键字的方法不需要new对象就可以直接在同static内进行调用,在其他类中可直接通过类名进行变量的访问.static关键字属于类,不是类的实例.成员分为 ...

  7. [SDR] GNU Radio 系列教程 —— GNU Radio TX PDU (发送数据包操作）的基础知识（超全）

    目录 1 PDU 概述 2 Demo 详解 2.1 Random PDU Generator 2.2 Async CRC32 2.3 Protocol Formatter (Async) 2.4 将 ...

  8. 我出一道面试题，看看你能拿 3k 还是 30k！

    大家好,我是程序员鱼皮.欢迎屏幕前的各位来到今天的模拟面试现场,接下来我会出一道经典的后端面试题,你只需要进行 4 个简单的选择,就能判断出来你的水平是新手(3k).初级(10k).中级(15k)还是 ...

  9. Snipaste截图工具-测试工程师强推

    Snipaste主要功能是截图和贴图,网上下载直接安装即可. 个人认为Snipaste比其它截图好用的点: 快捷键简单.Snipaste只需按F1截图,不会和其它截图工具的快捷键冲突 贴图功能.贴图功 ...

  10. 【SqlServer】Windows-2019 安装

    安装教程参考: https://blog.csdn.net/weixin_43790591/article/details/104149800 数据库SQL Server 2019 + 管理工具SQL ...