什么是自动布局？

通常情况下，设计师增删内容、修改样式等都会影响原有内容的位置，从而还需花费时间整理原有布局，调整间距更会影响到多处比例效果，徒增操作成本。

「自动布局」采用代码思维，通过给设计稿设置好固定间距、依附效果等属性后，随意调整内部的内容时都将全自动排布，无需设计师单个手动修改。

通过自动布局，可以做到：

✓ 严格把控间距，高效调整布局

✓ 增删列表内容、调整顺序都无需重新排版

✓ 超强复用性，修改成本趋近于0

✓ 多尺寸适配，一版就搞定

接下来我们就展开详细了解自动布局的这些特点 ~

 

✓ 严格把控间距，高效调整布局

以往修改列表间距时，即使可以通过「等间距调整」快速调整，调整后还需要手动修改下面其他内容位置的情况。设置自动布局后，无需考虑其他部分，修改局部的间距后，其他内容也会按照原有的位置跟随。除了给设计师减少了麻烦外，还避免了由于多次反复调整时遗漏部分内容，影响开发效果的情况~

 

✓ 增删列表内容、调整顺序都无需重新排版

从前当有内容需要任意模块需要调整时，都需要手动移动后，重新调整所有内容的位置。设置自动布局后，增加、删除内容都可以随心所欲，不再需要重新排版整理。交付后需要改动部分文本或内容顺序时，即使不返给设计师，任意交付人也都可以代劳操作，无需担心有操作成本或影响到内容噢！

✓ 超强复用性，修改成本趋近于0

日常复用组件时可以减少样式上的重复设置，修改内容导致尺寸变化后，其他的内容仍需要手动修改。但有了「自动布局」后，复用后的修改项仅剩了修改内容，其他的部分可自动适配，大大提升了复用效率，让「复用」几乎真正变成了「直接复用」~

 

✓ 多尺寸适配，一版就搞定 

以往为了给开发提供多种响应式适配方案，通常需要手动调整尺寸后重新修改内容位置。通过「自动布局」的设置，手动缩放即可直观体验适配方案，开发只要通过代码查看、手动缩放查看设计稿，即可立即了解设计师需要适配方案，减少沟通成本，设计效率与开发效率都得到提升~

——————

我们的「即时设计」现在已经全面支持该功能了，以上只是「自动布局」基础的场景和简单介绍，实现更多的效果大家可以亲自上手试试哟~ → https://js.design