Figma 学习记录

设计工具

Figma Figma Mirror

三大概念

Frame，Group，Component

创建组件和复用样式

创建组件「母版」 从子版右键，从中间可以找回母版 或者子版右键，选择 可以与母版切断联系

使用技巧 简单： 把多个不同状态的组件做到一起，通过隐藏某些部分，来显示需要的组件状态复杂： 给同一组件创建多个不同状态的component，利于管理和重复使用

Contains

设定元素与父元素的位置关系

Auto layout

Auto layout 是服务于设计的一致性服务，将隐藏的图层在设计中的占位消去。

动效

 

插件列表

Vecary3D 制作3D模型

Unsplash 无版权图片库

Charts 图表制作

Arrow Auto 画箭头

Mapsicle 制作地图

Iconify Material Design icons 图标库

Lorem ispum 模拟文字

Isonmetric Easometric 2.5D 制作

Avatars 替换头像

Wireframe 制作 原型图

Text Filler 文字替换工具

Humaaans 画插画

Rename it 重命名文件工具

Figmoji 发表情包工具

Logo Creator Logo库 参考

UI Kit 创建 设计规范

Clean Documents 清理文件工具

To Path 做路径插画工具

Get Waves 制作曲线图

To do 时间管理工具

uiGradients 渐变颜色库

QR code generator 二维码生成器

IOSPNGExporter 方便二倍三倍图

Blush 集合多个插画库

 

切图

插件：Android Resources Export 一套设计稿件切出安卓和苹果的版本

问题：程序员如何知道切图中的间距？ 仅对ios原型图，导出svg格式，在figma里面选中一个元素，长按option，并且将鼠标移动到其他元素上，就能够知道与其他元素的距离关系。