billycoder的专栏

39-Figma-APP套样机方法透视效果的样机需要用Mockup Plugin效果1.社区找到样机,创建副本2.复制画框到样机3.套带透视效果的样机搜索并创建副本打开Free iPhone 12 Pro Mockup的副本,提供了how to use安装Mockups复制frame过来,选中想要的样机里面的屏幕部分,然后启动mockup,点击perspective有个技巧,按住ctrl点击鼠标,可以选中最里面的图层...

38-Figma-页面交互演示制作效果1.把画框长度调整到屏幕尺寸2.设置画框滚动模式3.跳转页面4.点击播放可以看效果5.原型还可以套样机

37-Figma-摹客平台切图标注方案-Mockplus使用利用Mockplus插件1.选中模板中组件,添加切片图层2.这里只上传一个画板作为测试3.点击查看项目4.在摹客平台查看标注或者导出切图有框的地方,就有切图5.在摹客平台完成邀请...

35-Figma-Figma自带切图工具使用1.导出单个图标2.利用切片工具选中实例导出3.利用切片工具选中组件导出

34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置1. 组件命名规范页面/类型/具体名称2.组件放到统一页面中3.组件和实例之间跳转4.组件共享

33-Figma-数据采集器使用方式-后裔采集器填充app行业相关的数据，通过后裔采集器完成效果1.填入地址，点击智能采集 2.不需要的字段可以删除3.需要修改标题的话右键操作4.一切合适，就开始采集5.数据差不多就停止然后导出6.导入到谷歌表格，然后分享7.然后在Google Sheets Sync使用上一节介绍了Google Sheets Sync使用了...

32-Figma-谷歌表格插件替换数据方法主要利用Google Sheets Sync插件效果1.准备一个谷歌表格需要注意格式2.共享表格需要知道链接的所有人可以看3.修改组件的图层的名字#+谷歌表格表头文字4.使用谷歌表格插件...

30-Figma-常规配图添加方式-批量配图主要利用Unsplash插件效果1.shift加选所有图片2.还可以对图片进行微调figma属性面板提供了图片的一些调节

29-Figma-我的页面制作效果1.绘制三个圆2.设置图层模糊3.让三个圆只在矩形画框中显示拖动3个圆，同时按住ctrl，把3个圆放入画框中，利用画框的裁剪功能，只显示画框区域内容不想3个圆的位置发生改变，可以在图层面板锁定3个圆，减少误触4.内容部分吸管工具，i5.4个图标（图标+文字）自动布局4x（图标+文字）自动布局图标切换，选中图标，属性面板中有交换实例6.列表组件自动布局...

28-Figma-消息页面制作效果1.顶部菜单4个菜单是变体组件小角标是自己做出来的2.列表item组件3.用列表item的实例，完成列表

27-Figma-发现页面制作效果1.搜索完成搜索图标+文字，自动布局（搜索图标+文字）+语音按钮，自动布局，等距进行靠左靠右ios规范，这部分高度为442.切换效果变体组件3.框的阴影效果4.绘制列表组件主要自动布局控制位置就好了...

26-Figma-APP首页完成1.食材列表2.基本元素绘制3.变成组件4.课程列表效果5.课程列表组件组件创建shift+a创建自动布局，选中子元素，然后ctrl+d新增元素

24-Figma-APP首页排版（下）1.面板导航（文字和图标）是自动布局多个（文字和图标）是自动布局自动布局内部的元素，通过ctrl+d可以添加选中自动布局，可以调整自动布局内部元素的排列方向（横向和纵向）2.图文部分单个食品四个自动布局用到了自动布局的等距图片用Unsplash多个食品用自动布局完成...

24-Figma-APP首页排版（上）效果1.头部背景采用线性渐变填充文字位置控制用自动布局,shift+a创建自动布局文字和头像位置用自动布局Unsplash添加头像新建颜色样式2.搜索框图标和文字位置,通过自动布局搜索框,通过自动布局设置填充和圆角3.顶部菜单（图片+文字）套了一个自动布局4个（图片+文字）又套了一个自动布局选中自动布局里面的元素，可以ctrl+d快速复制元素4.点部切换变体组件...

23-Figma-标签栏组件制作效果步骤1.摆放位置布局网格2.控制图标和网格水平居中通过绘制一个辅助矩形完成3.几个图标水平对齐选中5个图标,然后水平对齐图标约束设置为居中4.制作变体组件绘制单个定义颜色样式复制方式创建另外3个,修改颜色创建多个组件批量修改组件名字,底部栏=首页、底部栏=发现、底部栏=消息、底部栏=我的合并为变体复制使用组件的实例，属性菜单栏可以完成切换...

22-Figma-常见项目框架搭建完成框架图画框模板使用iPhone 11 Pro /X 375×812顶部状态栏和底部菜单栏,使用组件组件哪里来?社区搜索"ios 15",选择一个下载量还不错的,然后创建副本搜到社区的组件,可以切换视图,查看效果(cover/page)顶部状态栏:44 标题栏:44 底部菜单栏:83标尺快捷键:shift+r完成布局网格完成小程序框架需要去社区搜索一个小程序组件,然后找到上面的的"胶囊部分"...

21-Figma-APP项目实战概述项目名称包含页面项目的开发过程

20-Figma-2-5D图标绘制技法效果步奏1.分析案列2.绘制3个基本矩形3.通过Easometric插件完成变形4.完成图形拼合可以用吸管工具i,随意先上色5.添加颜色和图片和者文字背景模糊线性渐变图片或者文字也可以变型复制属性:ctrl+alt+c粘贴属性:ctrl+alt+v...

19-Figma-旋转造型绘制技法效果步骤1.绘制基础造型平滑锚点切换为转折锚点锚点处调整圆角2.定义自定义旋转点这个点画小一点然后找到小圆点的坐标3. 利用插件Rotate Copies完成4.完成...

18-Figma-微质感图标技法效果步骤1.绘制基础造型1.绘制基本结构2.形状->连集所选项 3.形状->连集所选项 2.上色和阴影效果内阴影外阴影

17-Figma-磨砂图标绘制技法最后效果步骤绘制基本结构添加基本颜色渐变填充描边使用径向渐变大量用了复制属性混合模式用了叠加添加背景模糊添加噪点用到了noise插件用到了蒙版用到了编组用到了合并形状拓展...

16-Figma-自动布局常见操作创建自动布局,shift+a解除自动布局,属性面板操作或者alt+shift+a自动布局加背景圆角,属性面板自动布局内子元素新增,属性面板设置自动布局元素新增方向(水平或垂直),再ctrl+d自动布局控制内边距,属性面板自动布局控制项目间距,属性面板自动布局设置大小,拖动或者属性面板自动布局如何适应内容,属性面板操作自动布局让子元素居中对齐,属性面板操作自动布局如何设置等距模式,属性面板操作改变自动布局宽高子组件固定高度调节宽度,属性面板操作改变

15-Figma-布局约束和栅格约束操作拖动Frame,子组件缩放,子组件的默认约束就是缩放拖动Frame,子组件保持在中间,选中所有子组件,然后在属性面板修改拖动Frame,子组件保持在左边,选中所有子组件,然后在属性面板修改拖动Frame,子组件保持在其他位置,选中所有子组件,然后在属性面板修改约束案列案列1效果左右拉伸Frame，图片不动，标题不动，描述文字拉升实现图片 约束 左标题 约束 左描述 约束 左右拉伸案例2效果左右拉伸Frame，图片缩放，标题不

14-Figma-组件、样式团队推送管理常见操作颜色样式怎么定,放到一个单独的页面,属性面板定义颜色样式文本样式怎么定,放到一个单独的页面,属性面板定义文本样式常用图标怎么定,放到一个单独的页面,创建为组件即可如何使用团队上传的组件库,资产面板,点击书籍小图标看图...

13-Figma-组件管理常见操作创建组件，选择，点击顶部创建多个组件，框选多个，点击顶部组件使用，对组件进行复制，就创建了组件的实例实例跳到模板，右键-》转到组件模板所有组件如何管理，都在资产面板变体组件，框选，属性面板中点击"合并为变体"组件重命名,右侧图层双击组件,或者组件右键,或者ctr+r组件批量重命名,选中多个组件,或者组件右键,或者ctr+r变体组件命名规范,key=value,key=value,key=value,key=true/false总结添加组件快捷键

12-Figma-插件安装与使用安装插件社区->插件->搜索卸载插件右键->插件->管理插件->卸载常见插件Chinese Font Picker中文字体选择器Unsplash丰富的可商用图片资源UI Faces生成用户头像Icons8 Icons图标资源库Heron Handoff切图标注交接SmoothShadow阴影调整器Find and Replace文本替换Chinese User Data Generator中文用户数据

11-Figma-属性栏-填充、描边、投影、导出常见操作填充纯色填充，属性面板操作线性渐变填充，属性面板操作，注意第二个点的透明度默认是完全透明其他渐变填充，属性面板操作，了解填充存为样式，属性面板操作填充样式修改，属性面板操作填充样式分离，属性面板操作描边纯色描边，属性面板操作线性渐变描边，属性面板操作，注意第二个点的透明度默认是完全透明其他渐变描边，属性面板操作，了解描边存为样式，属性面板操作描边样式修改，属性面板操作

10-Figma-属性栏-对齐、分布、坐标、图层操作常见操作垂直对齐,属性面板操作,或者alt+v水平等距,属性面板操作,或者alt+shift+h,或者点击整理水平对齐,属性面板操作,或者alt+h垂直等距,属性面板操作,或者alt+shift+v,或者点击整理其他对齐,属性面板操作平滑圆角,属性面板操作,针对ios系统翻转,右键操作混合模式修改,属性面板操作图片顺序调整,ctrl+]上移,ctrl+[上移,ctrl+shift+]顶,ctrl+shift+[底透明度,属性面板操作

09-Figma-工具栏-预览以及分享设置常见操作设封面,Frame标题处,右键点击"设为封面"修改项目标题,顶部修改即可分享,右上角,简单创建副本,文件下拉菜单里面让分享只能看,不能创建副本,付费团队的分享里面有这个设置设计稿讨论工具,点击讨论图标,在合适的地方添加讨论即可总结草稿中的文件可以分享和编辑，对方可以保存只有付费团队中的项目可以设置不让对方保存在画板上右键可以设置封面通过评论功能进行团队之间的沟通...

8-figma-文字工具常见操作单行文字,选中文字工具,点击输入多行文字,框选一个区域,点击输入单行文字换多行,点击回车继续输入即可修改字体,属性面板切换或者通过Chinese Font Picker插件修改字号,属性面板,或者ctrl+shift+<>修改字距,属性面板,或者alt+<>修改行高,属性面板,或者shift+alt+<>修改字重,属性面板,或者ctrl+al t+<>其他样式,属性面板点点就好了复制文字属性,ctrl+a

是什么?figma又上角多了一个悬浮菜单，可以方便找插件，提供了搜索功能怎么用https://moonvy.com/figmaEX/这里下载一个集成了Figma EX的figma就好了

07-figma-钢笔工具常见操作​ 绘制直线​ 断线操作,按住esc​ 绘制曲线​ 绘制折现​ 转折锚点切换平滑锚点,按住ctrl​ 加锚点,鼠标点击​ 减锚点,按住alt+鼠标点击​ 移动锚点,v状态拖鼠标​ 控制手柄单边移动,按住alt拖动​ 闭合的路劲填充颜色,用颜料桶填充,在点击就删除填充总结...

06-figma-形状操作形状操作矩形圆角操作单个圆角修改多个圆角修改直线水平垂直线改颜色箭头修改箭头方向椭圆画正圆画扇形多边形绘制任意多边形星形绘制任意多角星放置图片…插入图片在指定的形状中插入图片,直接放入形状即可，这个和蒙版功能很像蒙版操作两个图形层叠摆放-》然后框选2个图形-》点击设为模板布尔运算如何触发，两个形状，框选之后就会触发哪些操作？连集所选项 -》加-》形状相

05-figma-frame和group组(group)操作框选创建group,框选然后ctrl+g加选创建group,点击元素,然后按住shift点击其他元素,然后ctrl+g取消group,ctrl+shift+ggroup填充,组里面元素会被修改填充,在属性面板操作画框(Frame)操作框选创建Frame,框选然后ctrl+alt+g取消Frame,ctrl+shift+gFrame填充,组里面元素不会被修改填充,只是Frame有颜色,在属性面板操作Frame嵌套,鼠标拖动进去就

移动工具使用在哪里有哪些操作 复制操作 基本复制,按住alt 水平垂直复制,按住alt+shift 重复复制,复制一次之后,再ctrl+d 移动 移动单个,选中一个 移动多个,选中多个 修改圆角 四个圆角 拖动 属性面板修改 单个圆角 按住alt+拖动 属性面板修改 整理 框选几个元素->然后点击左下角整理图标 可以修改间距 可以调节位置 注意 移动工具缩小元素后,圆角可能丢失缩放工具使用在哪里有哪些操作缩

主界面简单介绍如何下载社区中的素材搜索->然后创建副本figma四大区

安装使用和汉化任务账号注册体验在线版完成汉化版本的安装了解figma手机端实时预览两种使用方式第一种方式可以使用浏览器进行使用，第二种方式可以去下载它的客户端进行使用。方法一/使用web端打开Figma官网 www.figma.com注册并登录账号即可如果你想在浏览器中使用自己的本地字体，那么需要下载Figma 的Font installers方法二/使用客户端为了更好的体验，你可以下载Figma桌面客户端采用此方案的话就可以不需要安装Font installers

01-figma介绍为什么我们要去学习figma平台如此之多的ui设计工具，为什么我们就只学这一个就可以了？看一下，当前的一个ui设计工具排行榜。目前figma码稳居第一位，sketch第二位，xd第三位。像ai 和ps，这个占有的量就更少了。为什么ps和ai占有的量很少。因为其实我们在去做ui的过程中，ps软件是非常臃肿。里面有大量的工具，我们根本就用不着。并且ps对电脑的性能要求也是比较偏高的。ai也是如此。figma支持windows 以及苹果。你只要拥有一个浏览器就可以使用，它是不受这