figma如何不选中画板

我们要想一款工具，真正为我所用，熟知基础界面是第一步，今天带大家熟悉一下飞哥们的基础界面，虽然很基础，但是非常重要。飞哥们见面布局除了中间的画布，一共分为四款。 第一块是头部的导航栏，有了导航栏，我们可以将以打开的文件像浏览器标签页那样依次排列，帮我们随时切换，非常方便。点击最左侧的小房子标签就可以返回主页。需要注意的是，导航栏具有客户端内才有，所以大家如果想跟高效处理多个文件，可以尽量去使用客户端。 第二款是导航栏下面的工具栏，他一共包含三部分，最左侧他涵盖了 fig 码中的所有工具，这些工具分别是移动缩放、画板、签刀形状、文字拖动和评论。中间的功能区分为 两种状态，当我们选中某个对象时，功能就是对对象的操作，比如创建、组建剪切、蒙版和布尔运算。当我们未选中时，对应的是文件的操作， 这三个区域分别对应了文件所在项目除命名和对文件的操作，比如历史记录、导出图片、移动项目等等。而右侧模块则包含了语音会议分享、 交互演示、缺失字体提示和视野大小。其中分享功能也就是我之前视频里所讲的协作功能，只需要拷贝链接就可以让任何人看到我们的设计稿。然后我们在最左侧可以看到我们的图层和组间面板， 其中图层面板承载了发布上创建的所有图层和当前文件的所有页面。组建面板包含 了本地组建库中的所有组建，我们调用组建时可以在这个页面里调用。最右侧对应的是我们的属性面板，他包含了设计圆形和开发显示这三个属性面板。 设计面板控制的是静态页的视觉交互面板控制的是页面交互。开发面板是用来给开发使用显示元素的样式和布局代码。我们这里主要讲一下设计属性面板， 我们在这个面板可以控制选中元素对齐方式、位置、尺寸、旋转角度和圆角以及元素间距，然后还可以控制图层混合模式、填充描边特效以及 最后的导出。我们后面所讲到的自动布局和约束这两个功能也在这个面板，而这些具体功能呢， 我都会在后面视频给大家一一讲解。好了，今天的视频就到这里，我是设计时间久，我们下期再见。

what？ 随缘分享超实用的 ui 设计技巧进入今天的主题， 这个系列是飞哥吗？几乎人人都会问的一些问题吧。对，因为在工作的时候啊，生活中啊，很多小伙伴会问我很多重复的问题。今天的主题是约束啊，这个视频希望能 呃，带你彻底理解约束是个什么东西吧。视频开头我们看到了我们在 拉伸这个 frame 的时候，就画板的时候，里面的元素可能不是按照我们想要的方式去动的。对，所以我们就要解决这个问题。首先我们了解一下什么是约束啊？约 数就是在 frame frame 这种图层里的指元数，它会有约束属性，然后约束是这个 cost friends 啊，它默认是距离左边固定跟距离顶部固定的。 我们来呃，改变一下他的画板的尺寸，我们会发现这个元素呢，他距离左边固定，距离顶部固定的。嗯，那我们如果想让他距离右边固定看一下会怎么样？ 我们再拉这份，哎，发现他右边是一直保持不变的。对，呃，我们看一下都有哪些属性啊？他有横向跟竖向的，也就对应的这个横竖两 能防下我是怎么运动，就是在我负极的 frame 变化的情况，我的指元数是如何变化的？ 我们看一下横向啊，除了最开始的距左固定，距右固定，他还有 left and right， 是距左距右都固定，那就意味着我在拉框的时候，我这个元素就会放大，因为我距离左边右边都要固定尺寸嘛，你看， 嗯，对，还有个属性是 santa， santa 就是居中，比如说我一到中间， 那我再去拉啊，他就永远在中间。对，那其实竖下也是这五个属性是一模一样的。比如说我竖下选择的是 top and bottom， 我在往上下拉的时候，他就会变大变小，因为顶部跟底部的间距是要固定的嘛，然后改成 ct， 嗯，他就永远在中间了。对，现在飞哥吗有了自动布局，很多人其实不太了解这个约束式这些基础的概念了。嗯，比如说我们经常 会做到一个导航的效果吧。举个例子，比如说这可能是一个 logo， 然后这里是一些导航，有点丑啊。举个例子， 这网页我们常见的吧，对吧？我们可能会想，在拉的时候希望这个 logo 去左边固定，然后这一些功能的去右边固定，对吧？这 时候不需要用到自动布局，其实已经能实现这个效果了。我们的 logo 啊，我们刚才学的知识啊，距离左边固定看看啊，这时候他已经距离左边固定了，那右边这几个可能我们希望他距离右边固定。 right， 然后我们再拉一下这个导航，然后其实不需要用到自动布局，我们已经实现了这个效果。那上下我们可能希望他是垂直剧中的一拉。哦，发现这几个出了问题了， 那我们就选中他，看他竖向的约束，其实应该是 set， 我们改成这个，然后再把它 剧中，这时候我们就会发现他就是一个完全我们想要的效果了，对吧？ 这就是约束。在你的布局要求特别简单的时候，其实用约束就行了，没必要用自动布局。呃，关于自动布局，后面我会独立再开个视频吧。对，先从基础的说起，那再回到我们这里，我们想希望拉宽的时候， 这个 logo 是锯左，然后这几个菜单是锯右的，我们就改一下这个案例吧，改成锯右，然后锯上固定的，对， 那导航已经对了。然后其实大多数情况可能是我们希望把这个画板拉大的时候，这些元素不要乱跑嘛，对吧？所以就选中这个元素，把它距离顶部固定，你看这都约束不对。 对，好，这里说一个快捷的方法，就是在这个最顶层的这个 freem 上，我们按回车 那一下，全部选中这底部的指元数，然后我们把批量把元数改成据所据上固定，这样我们再往下拉的时候，哎，就是就实现了我们想要的约束效果。 这里还有一个偷机取巧的办法吧，比如说我不想设置这个约束啊，特别麻烦，对吧？可以按住 come on 的再去拉这个画板， 对，他也能让里面的元素保持不变。当然这个方法呢，很实用，但，呃，最好是要理解这个紫元素里的约束，每一种这个设置会有什么 效果比较建议，但是约束基本就这些概念。我们再总结一下啊，约束就是在一个 frame 里，他指人数里才有这个属性， 只有这个 friend， 并且没有自动布局，如果加了自动布局以后，其实就就没有那个约束了，就在没有自动布局的时候啊，他可以控制他自己在呃负极的尺寸改变的时候，他要做怎样的变化， 他可以是固定的，也可以是跟着一起说放的，全靠这右边的这几个属性来来定制。 那今天就关于约束，就迅速到这吧，一不小心就超时比较严重，你可能会准备很 很多要重要的概念或者说有用的东西给大家分享吧。那先这样了，拜拜。 nice。

哈喽，大家好，这里是三门先生琪琪，一个热衷于分享飞感冒店设计师，今天会给大家分享一些飞感冒简单的东西，大家大概了解一下就好。首先我们要知道飞感冒是可以支持多端使用的，所以在工作中和你的开发小哥哥小姐姐沟通起来的话非常方便。但是免费的飞感冒也是有限制的，共同协助的人数一旦超过五十人。 我们现在看到的这个页面呢，相当于是菲卡玛的文件管理器，也就是他的首页，我们看到这个最近，这个最近呢就是全部文件都在这，包括一些官方推送的， 或者你团队里面其他人建立的。而这个爪子超高的，就是只有你自己建立的画板才会出现在这。我们在绘制界面之前就像是盖起一样，是需要新建文件，你可以点顶部这个加号新建，也可以点超高这个加号新建，还可以点右边的这个按钮新建，你想点哪就点哪， 当然我不一样，我一般用康曼的叫安心姐。今天的分享就到这了，还想了解更多的话，点赞关注跟我走，拜拜。

哈喽，大家好，这里是三位先生琪琪，今天给大家分享一下贝德玛中字体功能的使用情况，我们看到顶部这个工具栏 t 这个符号呢，点击他就可以快速的输入文字，当然你也可以使用快捷键 t， 录完文本以后，单击空白或者康曼的 ntarr 就可以退出文本编辑了。这里给大家分享一个工作中常用的小技巧，如何设置使用默认字体。在文本工具下单击空白处，在右边选择你想要的字体，然后再重新点击文本工具输入字体，这样就一直是这个字体了哟。我们看到右边这个熟悉栏， 这里的功能基本上都和 sky 差不多，但值得注意的是我们的这个行高在 sky 里面，我们通常字体大小是乘以一点二到二倍，但是被干嘛，他可以直接输入倍数， 比如说一点五倍，这可以直接输入百分之一百五十，所以说在你输入的时候一定要注意单位哦。最后字体还有一个链接功能，快捷键是卡曼的加 u， 这个链接功能非常的强大，这个链接功能可以连接到怪物的网站，也可以连接到飞到码中的画板，当然如果你要取消的话，点击右键选择，这就可以取消他了。今天的分享就到这了，再见。

那设计界面当中我们想要干嘛呢？下一步要做具体的设计，要做哪些事情？第一件事情你得在设计面板当中去添加一个对应的画板，那我们要如何来完成一个画板的创建呢？ 首先最重要的就是关注左上角这一边有一个画板的图标，那我可以怎么操作？一方面是直接通过鼠标点击另一副部分是通过点击快捷键 a 或者 f， 然后切入到一个画板的状态，在切入完了之后，我们可以在右侧看到一个对应的尺寸的列表，在这样的一个尺寸列表里面，我们可以选择我想要去创建的对应的规格，那这个规格选中完了之后，它自动就会把对应的参数数字 压到中间来，于是我们就在画布的中心创建了对应的画板。那除此之外，这是一个官方默认添加给我们的这些数字，我还可以干嘛呢？可以自己使用 画板工具手动进行拖拽，也就是我可以手动拖出任意我想要的这个尺寸。那这样的一个拖拽过程当中怎么实现呢？ 我们可以你看点击一下 a 或者 f， 那么在这个点击过程当中，我的鼠标是不是变了一个形式，变了一个实质的这一个图标，那我就可以在这图标过程当中去拖拽实现一个我想要的任何的任意的一个大小。 那这样的作用是什么？因为有些时候我们去在页面当中设计一些内容，比如说设计一些特定图标，设计一些不相关的元素的时候，人你是多大无所谓，这件事情上就是我们怎么顺手怎么画，就不一定说我一定要在右侧里面找到一个合理的尺寸才行，所以这两者之间的一个区别。 而除此之外，在我完成了第一步拖拽之后，我想要进一步去修改它，怎么修改呢？我就可以在右上角画板这个地方来修改它的长 和他的关。 哎，回过头来来操作一遍。比如在这里你看我这边是什么？是它长，比如我想要一个八百乘一千二的，然后我就可以这样输入来得到一个我想要的一个最终的结果。 同时如果我想要去批量创建相同规格的画板，对不对？比如像刚才我创建了一个画板，这某个尺寸，那我要去批量怎么办呢？有两种好几种做法。第一种是我可以复制对它进行粘贴，对吧？比如说在苹果系统里面，我是 common c 加 common 的 v， 那这样的操作里面我们可以 试一试。比如说你看我画了第一个画板出来，我现在想要还有一个这样的画板，我可以选中这画板，记得怎么选中它？鼠标点击它的这一个标题，然后 command c， 按 command v， 它自动帮我们在这后面 生成一个新的，你可以一直粘贴下去，他就不停创建出新的相同规格、相同尺寸的画板。那如果除此以外，还有什么方法呢？第二种方法也是我自己用的最多的，我们按住 alt 选键，或者按住 alt 键，然后对鼠标进行拖拽。 如果图案你看，我们就可以说点击一下这个东西选中，第一件事一定要选中，然后我们可以按住 alt 键，看到没有鼠标在这个环境里面又发生了一个图标的变化，那我再拖动，看到没有拖动，然后我再放手，我就生成出一个新的 那 alt 键这个东西大家一定要记住，是我是持续在我放手之前我一直按着的，如果说我 alt 按的过程当中，中间把 alt 键放手，那就变成了普通的移动，看到了吗？所以 alt 键你按住的情况下，他才能保证我拖出来的东西是一个复制。那我们作为一个 正常的项目来说，总是会创建大量的画板，对吧？所以每次我们要从一个前的前面这个画板的过程当中创建，你是按 alt， 就是一个特别频繁的一个操作，所以一定要记得这个 alt 键一定要按住。 那么接下来我们要来讲解的就是在刚才我们可以创建大量的画板对不对？但画板创建的够多的时候，你就会发现我中间这个仕途区域的位置肯定是不够放，那不够放的情况下会发生什么呢？我肯定会有大量的东西被隐藏到这一些界面当中不可见的地方， 所以我觉得想方设法来去看到他们就意味着我得去移动画布的显示区域，那移动显示区域的主要做法就是按住 space 加上拖拽，这是一个非常非常重要的操作， 也是大部分设计软件当中会使用的一个操作。简单的演示，你看假设我的画面比较大，然后很多元素超出了现在可设区那种 怎么办？我得按住空格键，然后对它进行一个拖拽，让我来查看到这一些隐藏的区域内容，所以这个大家一定要去多做超市操作，然后来习惯这一个步骤。那么接下来 我们既然已经要去进行移动了，那么自然我们要去关注的一个东西就是它的显示工具，这在界面当中的左上角可以看到，你通过点击可以查看到什么呢？它上面主要的这个区域是来设置这个画布对应的一些显示的操作包含了什么？主要的几个操作，放大、缩小、百分百、显示全部，而聚焦选中 那么一个个解释。首先放大和缩小就不用多说了，对吧？对画布的这一个尺寸进行放大和缩小， 所以你在这放大缩小过程中还有个做法是你可以按住 ctrl 键，然后对它进行一个放大，就是啊 按住滚轮，然后可以进行一个缩放，然后这个缩放的过程当中就是那相对来讲不是那么平整之一百分之一，百分之一的这一个递增递减，你也可以手动去输入，比如说我想要一个一百二十的，我想要一个十十八的，那除此以外就是它快捷键在这边就会显示，这是 ctrl 加或者 ctrl 加减， 对吧？这是一个特别常用的一个快捷键类型，那么接下来它会有个东西，就是百分百 command 零，我们按一下 command 零，它就显示成百分百。这个东西主要的作用是在我们很多时候设计一些弊端的，或者电脑当中要去显示的一些内容，我希望看到一个正经的显示效果，呃，一比一的显示效果，那我觉得实惠、实用 百分百。那么接下来我们说的 command 一和 command 二是干嘛用的呢？ command 一我们按一下，你会发现，哎，话不通，突然间进行一个缩放，那这个缩放好像没什么 规律，我们来再做个调整，比如我把这些元素移的比较远，目的是为了干嘛？很多时候我们在设计一个原文件，会把文件放的非常零散，但这时候就是你靠鼠标慢慢去拖，你永远拖不完，那怎么办？我就按一下科目的一，我就能知道我这个项目当中总共放了哪些文件出来。你看我假设把他们全部散开， 按下 command 一，也就我这画布里面所有放过的这些画板，我会一次性给你显示在中间这个可视的区域，这就是 command 一带来的作用，这其实非常常用。那第二个东西什么呢？ command 二 这是干嘛的？聚焦一个我选中的内容，一定要记得先选中一个图层或者一个画板，然后我按住 ctrl 二，你看他就变成百分百，就按着 ctrl 一，然后再按 ctrl， ctrl 一， 慢慢的进行快速的这一些聚焦内容的切换，这就是我们使用快捷键进行视图工具应用的一个主要的对象跟场景。

然后我们首先创建一个画板，在画板当中创建一个举行，然后接下来和上传图片的操作是一致的，选择 v 六上传，选择视频。我们上传好的视频之后，我们可以看左边的文件图 标已经换成了视频，然后我们可以通过随意的剪裁来控制图片的大小，当然了这里边和图片上传图片是一致的，我们可以注意一下，如果和原始视频的比例不一致，当然会被裁切掉的。首先第一步，点击播放按钮，然后播放视频，复制一个画板出来， 还用这个播放按钮吧，然后复制粘贴，然后这个视频里边也会有一个播放按钮，点击播放之前就停止播放，这个播放按钮是存在的，如果点击播放之后，播放按钮应该是透明的，对吧？哦，透明度改成零。首先呢，我们点击播放视频，开始播放之后，我们再点击这个播放按钮，之后就是暂停播放，我们 看右边有一个 ottoplayottbale， 就自动播放的意思，我们还没有点击播放的时候，他应该是关闭的播放视频，他是开始自动播放的，然后这里我播放一下看一眼。好，我们点击播放暂停播放，点击播放 暂停播放。 ok， 这就实现了。然后我们接下来再看一眼，他这里会有一个这个静音按钮，对不对？好，那我们还是同样的把静音按钮复制，点击播放之后，肯定是声音是存在的啊，多余的线条要煽动。 ok， 然后我们再复制一个过来，然后点击静音之后呢，我们这里需要把图层进行一下隐藏， 可以把它一个调整一下位置，点击到这里回到视频，应该是静音右边的 otaplay 静音的关闭按钮，然后我们再回来点击视频之后，然后这里应该是播放的，预览一下。好，点击播放 静音，开启声音暂停。好，接下来我们看下一个步骤，会有一个两个视频的左右滑动，再创建一个画板出来，添加导入另外一个视频， 滑动视频到第二个视频，然后我们这里应该是滑动第二个视频，再滑回去，这里面各位同学可以注意一下。

对于行动上消费者 打扫完之后可以调整我们宽的角度对齐发射的。

马和 sky 有哪些不同？学会这些快乐转移？大家好，我是三文七七。一名词定义不同，在 sky 里面，画板叫奥布尔的，而菲格马里面叫福瑞。二画板缩放不同，除了命名不一样，操作逻辑也有所区别。在 sty 里面，可以选择移动画板的宽高而不会影响内容，但菲格马里面不行，需要按住 ctrl 键。三组建逻辑差异。在 skit 里面，我们把常用的元素转换成申报，方便我们对组件进行管理。但在贝干嘛里面，他的名字叫康复能，而位置也和 skit 不一样，在阿 sir 里面。

练个飞个麦技巧，秀他们一脸整！当你给老板或客户看图时，用触摸板总是飘忽不定，忽大忽小，老板和你都尴尬。这时可以先选中想要展示的页面，试试 n 下一页和 shift 加 n 上一页切换展示页面就会始终完整展示在屏幕中央，就是这么优雅从容！ nice！ 当你做半截图，所有图层组全打开一遍，不仅强迫症发作，而且想要在徒手找一个图层是想都别想！这时你只要按下 option 或 alt 加 l， 立马就会收起所有图层，瞬间治愈强迫症！

逼疯程序员的不一定是代码，还可以是设计师，当他新建花板的时候，程序员就生死难料。随后画一个和花板一样大小的矩形，调整亮一点的渐变，随后画出一个类似八层的按钮，并且添加画框。 他居然还给画框添加秒边，并且圆角值给到最大，随后更改矩形颜色。谈小间他就下了一个蛋，修改颜色添加的阴影，机智的他选择了同类色， 随后又下了几个大小不同的蛋，拼合成云彩的形状。调整大小位置后降低不透明度，复制一层，调整位置并置顶 下。不出蛋的他画一个圆形，改为底色备用，随后用星星工具画出星星，一闪一闪亮晶晶，满天都是小星星。 适当放大后，直接透明度改成零，选中按钮画框，勾选裁剪内容，趁你不注意，他就把画好的 ui 复制了进来。给文字添加画框后，分别原位复制颜色改为白，名称改为一，也可以改成零，但我不是，我就不改。 随后白色文字上移，注意文字图层要在画板内，但文字不要在画板内。随后复制画板，改变背景颜色，将白色文字移入画板，黑色文字移出画板。 回到按钮，把云彩吹走，星星透明度改为一百十档缩小。随后调整第一个蛋的颜色，并且调整顶部的圆形颜色和背景色一致。最后给按钮添加胶糊，触发模式为蛋机 智能动画前后晃动，动画时长居然给到一千。最后打开预览，一个简单的按钮，动画就做好了。五星评论家麦克阿泽表示，当我看见十八座设计的时候，我就知道做设计能赚钱，因为被开发档案可以赔！ 跟着十八学设计迟早开上，法拉利大型设计纪录片持续为您播出！

大家好，我是小翔。接下来我们正式开始学习飞格马的自动布局。首先我们了解一下飞格马自动布局的一个基础用法，我们可以先按一下椭圆工具哦，来绘制一个椭圆。 如果我们想给这个拖源添加一个自动布局，我们直接选中拖源，在右边能够发现他是没有自动布局这个选项的。但是我们选中一个画板，能够看到可以在这添加自动布局。 这也是需要我们注意的。菲格玛的自动布局，它是依附于画板的，它必须是一个画板才能够添加自动布局。菲格玛的画板也叫福瑞姆，前面我们也提到过它可以进行嵌套。 比如说我们按一下 f 就是画板工具，可以在外边的这个画板里面再去建一个画板。如果我们选中这个画板，就会看到有自动布局的这个选项，那这 时候我们想给这个圆添加一个自动布局。我们有两种方法，第一种方法，因为我们说了它需要依附于一个画板，那我们可以在外面给它包裹一个画板。 那我们看一下这种方法。我们选中这个圆，然后右键在这里能看到一个选项，福瑞姆斯莱格选，就是把所选的对象添加一个画板，他有一个快捷键是 ctrl old 加 t。 这个用呢还是特别频繁的，我们点一下这个选项。我们观察图层，到底能发现外面加了一个画板。 画板图层前面的这个缩略图是一个井号的图标，我们也可以通过这个图标来快速的判断它是不是一个画板。那现在添加了一个画板，我们选中这个画板，就可以去添加一个自动布局，我们可以直接点击这个加号，然后就添加了一个自动布局。但是我们 添加完之后，再观察这个塑料图，能发现他又有一个变化，他现在是一个三个小方块的一个图标，但是他依然是一个画板。这个需要我们注意，他是一个特殊的画板，也就是说他是一个带有自动布局的画板，所以他会成为这个图标。 当然这样操作会显得略微麻烦一些。我们还有一个快捷的操作，我们可以再画一个圆，然后我们直接按一个快捷键，它是说服的加 a， 这个也希望大家能记住，因为这个用的也是特别的多。按一下说服的加 a， 我们观察图层，这里，这里会自动变成一个带有自动布局的画板。这两种方法得到的效果其实是一样的，只不过我们用第一种方法能够看到外面的这个画板的大小是跟里边这个形状大小一样， 而这个呢，它外面会多了一个空隙，这个只不过是这些数值选项不一样而已，我们也可以进行再次的调整。那接下来我们看一下自动布局的这些选项。我们选中这个画板，为了方便观察，我们可以给这个画板添加一个颜色， 因为他默认是没有填充颜色的。我们可以添加一个红色，然后中间的这个圆，我们也可以改一个颜色。这里有一个快捷的操作， 就是我们选中这个福瑞姆下面的子图层，我们可以选中这个画板，直接按一下回车键，就可以快速的去选中里面的子图层， 然后我们给这个图层呢也添加一个颜色，比如说是黑色，这样方便咱们去观察。然后我们看一下自动布局的这些选项，首先有第一个选项，它是一个 方向，那这时候我们看不出来效果，因为这个画板里面现在只有一个对象，那我们可以选中里面的这个黑色的圆，然后我们按一下 ctrl 加 d， 就是快速的去复制一个， 能发现我们复制出来的这个圆，他是自动的往右进行延展的。这个就是因为第一个选项，我们可以选回这个画板。然后看一下第一个选项，他就是往右进行延展的，我们也可以切换他的方向。然后我们可以再次去复制， 我们可以先把这个方向设置成水平的。然后我们先看下面的这个想象，这里有一个间距，我们可以直接去拖动改变这个间距。能看到这个指的是里边的这些紫元素的一个间距。当然我们除了可以在这里更 改数值，我们也可以把鼠标直接放在这个间距上，会有这样的一个小红线，然后我们去直接拖动，也可以改变这个数值。或者我们直接在这里单击，然后可以在这里去输入数值，比如说是一个二十的间距。 当然这个选项需要自动布局，下面有多个字元素。那如果我们选中上面的这个自动布局，能发现这里我们设置的这个数值，它是没有效果的，因为它里面只有一个元素，没有相互之间的一个间距。 然后我们再看下面的这两个选项，我们选中这个画板，能发现他的一个默认数值是十，我们可以把这个数值调大来观察一下，能发现他就是左右的一个间距，同样的后面这个数值就是调整的上下的一个间距。我们 也可以用同样的方法，把鼠标放在这个间距上，然后单机在这里去输入数值，或者我们直接在这里拖动，这样就可以改变某一个边的间距。 如果我们想让四个编剧不一样，我们除了可以在这里单击进行修改，我们还可以点开后边的这个选项，然后我们可以单独的去设置四个边的间距，第一个就是左边，然后这个是上边，然后这个是右边，然后这个是下边。句 后面还有一些重要的选项，像这个对齐方式，包括这个更多的选项，这些我们放在后面再去了解。其实我们把前面这几个基础的选项了解明白，我们就可以做出来一些自动布局的效果。我们可以看一下一个典型的应用，就是我们可以做一个按钮，我们可以先 写一些文字，比如说这个就是确定，然后我们就可以快速的给他添加一个自动布局，按一下 sift 加 a， 那这时候他就添加了一个自动布局，也就是外面有一个画板，我们可以先调整一下他的样式， 给他添加一个颜色，比如说这个按钮是一个蓝色，然后这个文字的颜色可以是一个白色，选中这个文字改一下颜色。我们还可以添加一个圆角， 福瑞姆也是可以添加圆角的，比如说在这里给一个八像素的圆角，这样我们就通过自动布局的方式做出来了一个按钮。那这个按钮其实跟我们传统的做法做出来的按钮，它是不一样的， 因为这上面文字的多少是不一定的。那如果我们再去复制一个，我们在这里改一些文字，比如说 多写一些文字，能发现外面的这个福瑞姆，它的大小是自动发生变化的。这个其实跟上面的这个设置选项也有很大的关系，这个也是我们的一个重点，后面我们也会详细来说。我们先保持默认的这个哈格选项就可以了， 这时候我们可以再去调整一下它的样式。这个按钮的颜色可能是不一样的，那我们把这个颜色调整一下，它是一个灰色。我们再把这两个按钮再去添加一个自动布局。我们选中这两个按钮，按一下碎粉的加 a， 又可以添加一个自动布局。然后我们就可以去调整这两个按钮的一个排布方式，包括按钮之间的一个间距。我们还可以去调整下面的这个数值，也就是这两个按钮站的一个大小，就是外边的这个弗瑞姆的一个大 大小。其实我们现在已经用到了自动布局的一个嵌套，因为里边的这个是一个自动布局，外面我们又嵌套了一个自动布局。当然这个嵌套的具体用法我们后面也会详细来说。 那比如说我们选中里边这个按钮的自动布局，我们再去改变这个数值，就是改变的按钮的左右的这个间距。这里还有一个快捷的操作，我们可以按一下 sf 的加回车键，就是往外再去选一乘，就是选中他的负极。我们可以先把这个编剧先调整成零， 我们做成了自动布局。其实他还有一个好处，我们可以直接去拖动，改变他的一个顺序，比如说这三个，我们把这个颜色先暂时改一下，然后我们直接去拖动，就可以改变他的一个布局。其实如果我们掌握了这个基础的 用法，我们就可以做出来一些自动布局的效果。比如说我们常见的一些排版，这里有一些图片，然后有一些文字， 或者又有一些其他的元素，那我们就可以把这三个元素选中，然后添加一个自动布局。按一下碎粉的加 a， 或者我们直接点击添加自动布局。因为我们现在选中的不只是一个元素，所以在右边也能够直接添加自动布局。我们点击添加， 然后我们做出来这个布局，就可以很方便的进行一个调整，包括间距的一个调整， 而且如果里边的这个元素大小发生变化，这个间距是不影响的。当然自动布局还有一些更多的设置，特别是我们嵌套的时候， 像上面的这个尺寸调整的选项，包括对齐的选项，以及后面这些更多的选项，这些选项我们接下来再讲，那我们下次再见。

三个小技巧，出图效率提升百分之八十一、自动布局想要一搞，适应所有尺寸，加一个自动布局就行了。选中画板，点击自动布局，设定好规则，然后随意调整尺寸，容器内元素都可以自动变化，简直不要太方便。二、绣板插件黑色感觉不对怎么办？用这个插件就可以了。选中元素， 选择插件色板，这里有阿里字节、腾讯等大厂设计系统配色可以选择，点一下就能切换各种好看的配色。三、批量填充 选中所有容器，按住 shift 加 coman 加 k， 再选中所有图片，就可以快速完成批量图片填充，效果立竿见影。这三个技巧用过的都说真香，赶快上天球练习一下！

我们可以将夫人理解为组，但他比组的功能更强大。一、创建夫人 我们可以通过点击左上角的 frame 图标，按住鼠标左键并拖动来创建 frame。 或者也可以从最右侧选择不同的尺寸来创建 frame。 也可以框选对象之后，鼠标右键点击 frame selection， 一个 frame 便创建好了。 二、添加和移除当需要往 frem 中添加一个矩形时，只要鼠标箭头进入到 frem 画框内，他便被添加到 frem 中了。 移除时也是相同的道理，选中举行，鼠标从福瑞姆中向外拖举行便被移除了。

如何设置贝特玛封面？强迫症福音可以看到很多社区的设计稿封面都很干净整洁，那么是怎么做到的呢？首先 先在你的设计稿里面创建一个封面尺寸画板，绘制你想要的封面样式，这里注意两边预留安全距离。绘制完成以后，右击点击设置为封面即可设置成功。关注我，带你了解更多设计知识！

tigma 自动布局应用一个案例理解自动布局， tigma 的自动布局功能很好用，今天我们用自动布局做一个卡片案例。先准备好素材，首先选中四个头像，添加自动布局 快捷键 shapeta 加 a 间距模式为叠叠，然后拖动一下粉色手柄，调整一下间距。 接下来选中黄色图标和文字，添加自动布局，输入二者的间距值为八，调整为垂直居中对齐，此时文字基准线是对齐的。 选中两个素材，再次添加自动布局，命名为底部，调整对齐为垂直居中对齐。 一， 将底部和两个文字素材显正，添加自动布局，给一个白色填充值，并添加一下四周的内。编剧 可以看到此时内容并不是自适应宽度的， 我们先给一个兼计值，再来调整自适应内容。首先选正底部，选择水平填充容器， 稍后我们需要将黄色按钮和文字调整到右侧，鼠标点击对齐的蓝色部分，然后 x 键就会变成等距对齐了，这样底部已经可以自适应宽度了。接下来选中第二个文字素材，添加 自动布局，去掉所有编剧，改为水平填充容器， 然后按 enter 键选正内层的文字图层，同样改为水平填充容器， 这样第二个文字素材也制作好了。接下来我们将红色按钮添加到容器内，使用绝对定位，将其放置在右上角，设定好按钮的约束位置，按钮就可以自适应宽度了。 接下来我们设定一下标题文本，选中文本素材，添加自动布局， 然后我们需要在右侧给文本容器添加一下又监禁，这样文字就可以和红色按钮分隔开了。 同样的，先设定水平填充容器，再按 enter 键选正文本图层，设定一下水平填充容器，这样内容自适应就制作好了。然后我们添加一下卡片的眼角和投影。 最后我们还需要添加一个约束举行，将举行放入容器内，添加绝对定位， 设定一下拉伸约束，这样当内容变短时，巨星也会跟着变短。最后我们将素材添加到 界面中，因为添加了自动布局，所以只需要调整颜色和文字内容就可以了。 你学会了吗？原文件在标记式社区。

在接下来我们讲一下 figma 的三个概念，分别是 group， frame 和 altered out， 以及三者之间的区别。我们实际操作给大家演示一下，我们创建一个矩形，可以高度给到六十，宽度给到两百四， 然后打一串文字，我们先创一个 group， 比如说二十四吧， ok， 二十四，刚好 我们改到 group 叫 group 按钮，好把它把这两者居中显示一下，左右居中，上下居中，选中这两个元素，摁键盘上的 ctrl 加 g 键或者鼠标右键，这里面有一个 group selection， 这个就是针对于 打组的功能，就可以把这两个物体打成一个组，那同时左边的图层也发生了一些变化，我们展开看一下，这个组里就包含了两个元素，一个是这个文字，一个是底下那个图层， 把这个图层换一个颜色啊，把这个颜色去掉，然后可以给他增加一个描边，比如说增加一个白色的描边，让他看起来更像一个按钮。 我们拖拽一下这个 group， 看一下，发现里边的文字啊发生了一些很随机的变化，而且里边的内容非常不可控。 我们选中这个文字看一下，这里面也出现了一些很奇怪的小数点，这就造成了页面可能会非常不准确，那这也是 group 的一个弊端，我们可以创建组，但是尽量不要改变这个组的大小，那改变之后会使这个页面非常的不精准，不可控。 那接下来我们创建一个 freem 按钮，按键盘上的 a 键，然后在这里边拖动一下，同样我们也创建一个六十，宽度为两百四的一个按钮， 然后打一个叫做 free 按钮， free 按钮 啊，在这里边居中一下，我们改变一下这个 freem 的按钮的大小。 哎，这个时候发现里面的文字没有动，始终固定在这个位置，但是文字距离右边和底边的间距变了，那顶部和左侧的间距没有变，这是因为啥呢？ 我们选中这个文字，看一下，右边有一个属性叫 constraints， 这个就是一个约束的概念，他默认选择的是左和顶边， 我们可以切换一下，改成中间居中，然后我们再选择 fram 去拖动一下。哎，发现我们无论怎么拖动，这个文字始终固定在中间的位置，这就是 fram 比 group 高级的地方， 那最后这个更高级，它叫做 auto layout， 它是什么概念呢？翻译过来叫做自动布局，我们先不用管它它叫什么，我们先创建一个。创建 auto layout 有好几种方法，那第一种就是我们可以去先去创建一个文字，比如说我们就叫做 auto layout 按钮吧，找 auto laugh 按钮，我们可以选择这个文字，直接按键盘上的 shift 加 a 键，就可以创建一个 auto laugh 了。这个时候我们看一下左侧的图标， 它已经发生了一些改变，它跟这个 frame 已经不一样了，我们可以给这个 auto layout 按钮加一个描边，让它看起来更清晰一些。同样你还可以用另外的方法，比如创建一个 frame， 或者创建一个矩形都可以。我们先创建一个 frame 吧， 还是给他呃这个两百四六十的一个，呃尺寸大小。然后我们把这个文字复制过来，改一下他的颜色，让他嗯清晰的看见。我们先改一个颜色吧， 我们可以选择这个 freem 或者矩形都可以啊，然后选中它按键盘上的呃， shift 加 a 键，或者这里边已经有一个 auto la alt 了，我们可以在这边有一个加号，我们点击一下，这样的话它就已经创建好了，这个 auto la alt 就 已经创建好了。然后我们看一下凹凸里奥特里边的一些参数，看一下他们都是干嘛的。我们先看一下下面这两组数据，第一个是指里边的文字或者图形距离两边的间距，我们拖动他改变一下， 我们放大的时候发现两边的间距也会同时放大，我们验证一下，选中这个里边的文字，按住键盘上的凹神键，可以看到 这个文字距离四周的一个编剧的大小是多少，那当前距离两边是四十四距离上下分别是十三，我们看一下这里面的参数， 这个就是表示距离两边的间距，那同理，那这个数字就是距离这里边的内容距离上下的一个间距，我们调整他可以调整上下的间距。那右面这个小方块是干嘛的呢？我们点开他看一下， 发现除了可以同时控制左右和上下的边距的时候，我们也可以分别去控制啊上下左右这四个不同的边距，比如说我们距离右边让他再大一些，然后距离底边也让他再大一些， 这样调整起来就非常的自由和灵活。 ok， 我们收起来把它重置一下，然后我们看一下这个部分是干嘛的，我们鼠标放在这里，可以发现这个小方块可以随意的更改切换，那默认他选择的是在左上角的位置，我们拖动一下这个按钮看一下， 哎，发现这个内容始终固定在左上角不动，对吧？这个东西就是控制里边的内容的位置关系，我们切换一下试一下，比如说切换成顶部的居中，然后距距离右边，左下 居中以及距离右边。所以无论我们怎么拖动，他会针对于我们选择的这个属性，然后固定在这个位置。 那么这两组参数是干嘛的呢？当我们的 althole out 里面有两个或者有两个元素以上的时候，那这两个属性是控制我们里面的元素是横向排列还是纵向排列？那因为我们这里面只有一串文字，我们可以放一个图标在里面，我这里面已经准备好了一个，我们把这个图标 拖到凹塑料的里面，我们发现他会自动的进行横向排列，这是因为我们选择了横向的箭头，如果我们选择向下箭头，他就会自动的进行纵向排列。 那下面这个数值是控制这两个元素之间的一个间距，我们选中这个元素看一下他俩的间距，当前是十，当前是表示 纵向的间距，如果我们换成横向的箭头，他就表示横向的间距。讲到这，我们基本上就把奥特里奥特里面百分之八十的功能就讲完了。那除此之外呢？关于奥特里奥特，我们还需要掌握一组属性，就是上面这一组。 在讲这部分之前，我们先回到课件，在凹凸 love 中有三种设置方式，分别是填充容器、适应内容和固定宽度，这些又是啥意思呢？我们可以这么理解， 刚才的奥特莱奥的案例里边只有两部分组成，一个是外框，一个是内部的文字或图形。我们可以把这个外框理解为爸爸，所有的外框都是爸爸， 所有的内框都是儿子。然后我们看第一个叫做填充容器，就是要听爸爸的话，如果外框改变了内框，儿子就要听话，也要随着外框变化。我们要实现这样的效果， 需要对儿子里面这个元素进行参数设置。第二个呢是爸爸去听儿子的话，也就是说我去动里边的框，作为外框的爸爸就要跟随里边的儿子而改变。如果要实现这样的效果，就需要对爸爸进行设置。第三种叫做固定宽度，我们可以把它理解为脱离父子关系， 外框洞外面的内框洞里面自己的他俩毫不相干。如果要实现这样的效果呢，就需要对内外分别进行设置。理论讲完了，我们还是要实际操作一下，不然同学还是有点懵。 这里边我已经创建好了三个不同的奥特里奥特，这里边的紫色代表我需要对其属性进行设置。我们先看第一个叫做填充容器，就是儿子要听爸爸的话，这是一个非常正常的父子关系，也就是说我们动外框里面的框要随着 改变，我们选中这个儿子，在右侧顶部这个属性里面，我们可以把它更改一下。点击之后这里面有两个选项，第一个是表示固定宽度，那第二个叫做填充容器，我们需要把它改成。第二个叫做填充容器，也就是填充外面的这个容器， 同样纵向的也要改成这个填充容器，那设置好之后，我们去尝试改变一下外面这个把把， 拖动一下看一下。哎，这个时候里面的儿子会随着外面的爸爸随意的变动，随意的改动，那这个就叫做填充容器的设置， 然后我们看一下第二个，第二个叫做适应内容，也就是让爸爸去听儿子的话，然后我们需要设置的是外面的这个紫色的爸爸，然后我们选中这个紫色的爸爸，其实 这里面已经给我们设置好了，我们点击看一下，第一个还是固定宽度，第二个 hug contents， 这个表示就是适应内容，我们把横向的改成适应内容，纵向的也同样改成适应内容，那这个时候我们拖动里面的儿子，其实爸爸会随着里面的儿子进行改变的，我们尝试一下， 哎，这就是我们想要的效果了，那当前的设置就是适应内容的设置，然后我们再看一下第三个就是脱离父子关系，爸爸动爸爸的，儿子动儿子的，他俩互不干扰， 那我们需要对内外都进行设置，我们先设置儿子，把它改成这个固定宽度，这里边已经改好了，叫做固定宽度，那外部我们也需要调整为固定宽度，把它改成第一个固定宽度，这个时候我们拖动一下爸爸，儿子就不会受到任何影响， 那同理我们拖动一下儿子，其实爸爸也不会受到任何影响，那这个就叫做固定宽度的设置。 ok， 那我们学了这些有啥用呢？给大家举一个例子啊，比如说我们创建一个按钮， 这个按钮我们还是给设置成六十啊，两百四的宽度，这个按钮我们再给他起个名字，就叫巴特曼， 把它改成二十四，然后局中显示 shift 加 a， 把它转成 auto 料的。 我们知道按钮的文案可能会有长有短，那我们把这里面的文案改一下，改成，嗯，这是一个可长可短， 可长可短，可大可小的按钮， 看到没有，只要我改里面的文字，它外框就会随着变化，那这就是 auto layout 它的魅力。那当然 auto layout 还有很多更复杂的玩法，那这部分就需要大家自己去探索一下。另外呢，给大家推荐一个东西，我们在这里可以去切换一下 figma 的社区 搜索， figma or to layout playground， a， r， o， u and d 这第一个就是啊，把它打开，然后点开它，这是 fake 嘛？给我们提供的关 auto layout 非常完整的说明文档，同学们可以看一下这里边的一些说明和案例。那有同学说我实在是看不懂，他是英文的，那怎么办？我们可以回到这个里面，再继续搜索一下 figma auto layout play g， r， o， u n d playground， ok， 这里边就有，我们把这个打开，这里边已经有网友给我们翻译好了，这你要看不懂，那就实在说不过去了啊。 最后再给大家推荐一些设计资源，也就是刚才我们提到的这个社区功能，这里面包含了大量的设计文件可以参考，同时你也可以找到一些插件，你也可以在这里面去搜索想要的内容。 ok， 那这就是这节课的所有内容。

最近老有人问我在飞克麻中为什么拉伸画板元素就会跟着一起动或者是一起拉伸？其实主要原因就是因为你的布局约束没有调整好。 解决方法有两种，第一种就是把你的布局约束调整好，这是不是有点废话？还有一种就是超级无敌好用的方法，按住口帽的，然后再去拉伸画板就好了。哼，女士不爽。