思考及成长
1. 年中设计工具从 Sketch 迁移到 Figma - Figma 使用文档及常见问题汇总(有使用的问题都可以发给我) 2. 开始做大屏 - 组件化之后,大屏是由表头、框、背景、按钮元素等拼凑而成 - 以目前做过的大屏,总结不同样式的原子元素来构成一个大屏库 - 大屏内表格同样是有限类型,列出常用内容组合成库 3. 后台设计(关键不在于用什么样式,而在于流程的完整性) - Ant design 基本包含常见后台所需结构,且包含设计图到代码交互,利用好已有系统 - 且腾讯、字节已经在去年发布很多套设计系统 4. 问题 - 设计到代码的实现会有很多问题,开发不能很好理解,出来的页面总是和设计图有偏差,本质上还是做页面的思路不同:比如一个元素的尺寸如何约束?是给长宽还是约束 padding、margin 等,以及不同的元素用不同的方式限制其大小,有 Auto layout(自动布局)的整体思路很重要,这也是使用 Figma 之后学习到的一点
2022年展望
Figma 和 Plastic(类 Webflow)
1. Figma可导入Plastic生成代码,只需简单适配和编辑即可生成响应式页面 2. Plastic可导出为各种框架的代码(React、Vue、Next…) 3. 解决设计图到代码的过层
Auto layout(自动布局)
1.控制元素的 horizontal 和 vertical 属性,来实现横向和纵向布局 - 固定元素间距,调整上下左右的 padding 值、模块宽度、自适应属性(上、下、左、右、居中、适应宽度、适应内容) - 固定模块宽度,调整上下左右的 padding 值、元素间距、自适应属性(上、下、左、右、居中、适应宽度、适应内容)
组件化