前言

我原本以为, 在 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. 2 手机号登录时，调的不是login接口，而是注册的一个接口

    手机号登录时,调的不是login接口,而是注册的一个接口

  2. 新一代云原生日志架构 - Loggie的设计与实践

    Loggie萌芽于网易严选业务的实际需求,成长于严选与数帆的长期共建,持续发展于网易数帆与网易传媒.中国工商银行的紧密协作.广泛的生态,使得项目能够基于业务需求不断完善.成熟.目前已经开源:https ...

  3. 基于Java：流浪动物领养信息系统设计实现(源码+lw+部署文档+讲解等)

    \n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件 ...

  4. Odoo 增加web后端的响应能力

    实践环境 Odoo 14.0-20221212 (Community Edition) web_responsive-14.0.1.2.1.zip https://apps.odoo.com/apps ...

  5. Django Template层之Template概述

    Django Template层之Template概述 by:授客 QQ:1033553122 实践环境 Python版本:python-3.4.0.amd64 下载地址:https://www.py ...

  6. vscode 常用设置

    vscode 常用设置   by:授客 QQ:1033553122   版本 vscode Version: 1.33.1   1.   自动保存文件设置 文件编辑一秒钟过后自动保存 2.   黏贴后 ...

  7. 简单写写IO流里的一些高级流

    缓冲流Buffered:缓冲流是一种高级的流,他可以对file类的流进行包装,内部含有一种缓冲池,可以在一定程度上提高IO的读写效率 不过,按实验来看,只要给低级流和缓冲流相似的byte读写,其实两者 ...

  8. python 私有属性的作用

    python 私有属性的作用 class Player(): def __init__(self, name, power, skill): self.name = name self.power = ...

  9. 【杂谈】JPA乐观锁改悲观锁遇到的一些问题与思考

    背景 接过一个外包的项目,该项目使用JPA作为ORM. 项目中有多个entity带有@version字段 当并发高的时候经常报乐观锁错误OptimisticLocingFailureException ...

  10. JavaScript 中的闭包和事件委托

    包 (Closures) 闭包是 JavaScript 中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕.闭包可以帮助我们实现数据的私有化.封装和 ...