前言

我原本以为, 在 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. BootstrapTable 行内编辑解决方案：bootstrap-table-editor

    最近开发的一个业务平台,是一个低代码业务平台.其中用到的了bootstrap-table组件.但是bootstrap-table自身不带编辑功能. 通过搜索发现,网上大部分的解决方案都是使用x-edi ...

  2. 如何删除Git中缓存的用户名和密码

    昨天在上传代码的时候提示输入用户名密码,结果输错了3次就没有提示框了,就一直报错(身份验证失败),没办法提交代. 在使用git的过程中,我们也会经常遇到以前保存在git的用户名密码忘记了,或者不用了. ...

  3. 在Django中，多数据操作，你可以编写测试来查询另一个数据库服务器中的数据，并将结果导入当前Django项目的数据库表中

    在Django中,你可以编写测试来查询另一个数据库服务器中的数据,并将结果导入当前Django项目的数据库表中.下面是一个简单的示例: 假设你有一个Django应用程序,名为myapp,并且你希望从另 ...

  4. oeasy教您玩转python - 4 - # 调试程序

    ​ 调试程序 回忆上次内容 py 的程序都是写在明面上的 所有需要执行的事情都明着写到了 py 文件中 用 python3 解释 py 文件进行执行 可以下载人家写好的 py 文件 下载的 py 文件 ...

  5. WCF异常System.ServiceModel.ProtocolException问题处理

    现象: 最近遇到了WCF 服务无法调用的错误,异常如下. System.ServiceModel.ProtocolException, System.ServiceModel, Version=4.0 ...

  6. 【译】用 GitHub Copilot 提交注释揭开历史的神秘面纱

    您是否曾经难以理解一个提交在做什么或者为什么要做?在审查或协作代码更改时,您是否希望有更多的清晰度和上下文?如果您的回答是肯定的,那么您会喜欢 GitHub Copilot 为您所做的--生成提交注释 ...

  7. Codeforces Round 953 (Div. 2)

    Codeforces Round 953 (Div. 2) 闲来无事水题解. A . B . C 显然 \(k\) 是偶数.考虑 \(k\) 的上界,\(p_{1}=n,p_{n}=1\),产生 \( ...

  8. Jmeter函数助手37-setProperty

    setProperty函数用于修改jmeter属性值. 属性名称:填入需要修改的属性名 Value of property:填入需要修改的属性值 Return Original Value of pr ...

  9. 2、Git之Windows版本的安装

    2.1.下载Git 官网下载地址:https://git-scm.com/download/ 最初,Git 是用于管理 Linux 社区的代码,所以在很长的一段时间内,Git 只能安装在 Linux ...

  10. 【RabbitMQ】09 深入部分P2 消费限流 & TTL

    1.消费限流设置 就是设置项的2个调整,当然还有前面的手动确认的监听改动处理 https://www.bilibili.com/video/BV15k4y1k7Ep?p=26 2.消息过时设置 TTL ...