前言

我原本以为, 在 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. 阅读翻译Prompting Engineering Guides之Introduction（提示工程简介）

    阅读翻译Prompting Engineering Guides之Introduction(提示工程简介) 关于 首次发表日期:2024-07-19 Prompting Engineering Gui ...

  2. Langchain 与 LlamaIndex：LLM 应用开发框架的比较与使用建议

    Langchain 和 Llamaindex 是两种广泛使用的主流 LLM 应用开发框架.两者有什么不同?我们该如何使用?以下我根据各类资料和相关文档做了初步选型. 一.Langchain 1. 适用 ...

  3. 深入理解Spring Boot：Bean管理、原理解析与Maven高级应用

    深入理解Spring Boot:Bean管理.原理解析与Maven高级应用 前言 大家好,今天我们来聊聊Spring Boot的核心内容,包括Bean管理.Spring Boot的工作原理以及Mave ...

  4. 关于使用c++制作蓝牙连接，Windows版本

    1 #define _CRT_SECURE_NO_WARNINGS 2 #pragma warning(disable : 4995) 3 #include <iostream> 4 #i ...

  5. （二）MongoDB的在SpringBoot中的应用

    我来填之前MongoDB的坑了,项目中又用到MongoDB的我又想起来了,我这拖延症也是没谁了. 1.在pom.xml中引入依赖 <dependency> <groupId>o ...

  6. 6、SpringMVC之视图

    注意:本文环境搭建请参考5.2节 6.1.视图概述 视图的作用是渲染数据,将模型Model中的数据展示给用户: SpringMVC视图的种类很多,默认有转发视图和重定向视图: SpringMVC中的视 ...

  7. 【H5】14 表单 其三 原生表单部件

    现在,我们将详细研究不同表单部件的功能,查看了哪些选项可用于收集不同类型的数据.这个指南有些详尽,涵盖了所有可用的原生表单小部件. 预备知识: 计算机基础知识和对于HTML的基本理解. 目标: 要了解 ...

  8. 【Vue】Re04 指令：第二部分

    一.v-on指令 作用是用来将元素绑定事件监听器,触发特定的函数执行一定功能 关键字:事件监听 <!DOCTYPE html> <html lang="en"&g ...

  9. iOS开发基础146-深入解析WKWebView

    WKWebView是苹果在iOS 8中引入的重要组件,它替代了UIWebView,为开发者提供了高性能.高稳定性的网页显示和交互能力.在本文中,我们将深入探讨WKWebView的底层架构.关键特性.使 ...

  10. PHP 红包功能代码

    前段时间被问这个问题,最近有空就写写啦,还是挺有趣的 首先做下抢红包方法分类: 对于发红包的人来说,一共有大致3类(其他的我暂时没想到,有想到可以联系我呀~) 一.拼手气红包个数不定(完全看运气) 二 ...