前言

我原本以为, 在 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. PHP 程序员为什么依然是外包公司的香饽饽？

    大家好,我是码农先森. PHP 唯一的爽点就是开发起来「哇真快」这刚好和外包公司的需求相契合,在 Web 领域的芒荒年代 PHP 以王者姿态傲视群雄.如果 PHP 敢说第二,就没有哪门子语言敢称第一, ...

  2. 映射lun

    环境 VMware1 网卡与 主机ping通 创建文件夹将文件解压进去 删除压缩包 创建虚拟机 下一步下一步,完成虚拟机 编辑虚拟机设置 否 账号密码 admin Admin@storage 等待 导 ...

  3. 【爬虫】Java爬取省市县行政区域统计数据

    前言 网上看了好几个Python爬虫来爬取省市县行政区域统计 官网除了省市县以外,还有区,街道,居委村委层级 https://zhuanlan.zhihu.com/p/512852193 所以自己用J ...

  4. 【Hibernate】02 快速入门

    环境搭建 : Windo7 x64 + IDEA 2018+ JDK 8+ Maven 3.0+ MySQL 5.0+ 创建Hibernate工程: 导入依赖坐标 <dependencies&g ...

  5. 【转载】SCI审稿过程中的几种状态

    原文地址: http://cjsphd.blog.163.com/blog/static/44718111201191175154300/ 审稿中涉及到的人: EIC-Editor in Chief ...

  6. 感慨！美国人的大学课程搞的确实蛮好的，不是那种刻板读书的感觉 —— 课程：SERVICE-ORIENTED COMPUTING AND SYSTEM INTEGRATION: SOFTWARE, IOT, BIG DATA, AND AI AS SERVICES

    无意间看到了一个美国人的课程,使用的教材:<SERVICE-ORIENTED COMPUTING AND SYSTEM INTEGRATION: SOFTWARE, IOT, BIG DATA, ...

  7. （续） python 中 ctypes 的使用尝试

    内容接前文: https://www.cnblogs.com/devilmaycry812839668/p/15032493.html ================================ ...

  8. 在WSL Ubuntu中设置sshd自启动

    参考: https://blog.csdn.net/android_cai_niao/article/details/128490566 ------------------------------- ...

  9. 在Vue3中如何为路由Query参数标注类型

    前言 最近发布了一款支持IOC容器的Vue3框架:Zova.与以往的OOP或者Class方案不同,Zova在界面交互层面仍然采用Setup语法,仅仅在业务层面引入IOC容器.IOC容器犹如一把钥匙,为 ...

  10. 【运维技巧】海豚调度工作流实例卡在正在停止&任务实例卡在正在运行怎么办？

    在大数据调度系统中,,大家可能会碰到任务实例状态更新不及时的情况. 对于Apache DolphinScheduler用户来说,这可能意味着前端显示的任务状态与实际情况不一致,即使任务已经在后台停止运 ...