设计工具上手

自动布局本质是把弹性盒模型引入设计工具，让容器随内容自动伸缩。优势有四点。第一是内容自适应，文字加长按钮自动变宽，列表增删条目自动重排，改稿不需要逐个挪元素。第二是响应式推演，通过填充与对齐设置，同一组件能快速验证不同屏宽下的表现，接近真实前端行为。第三是组件可维护性，基于自动布局的组件在内容变化时不会散架，后续改设计系统的效率大幅提升。第四是与开发的翻译成本，结构本身对应前端的弹性布局思路，标注交付时沟通更顺畅。使用要点是理解方向、间距、内边距与换行的层级关系，复杂嵌套时先画结构草稿再动手。面试中最好能讲一个用自动布局把改稿时间从小时级降到分钟级的实例。

位图由像素网格构成，记录每个点的颜色，适合表现照片级连续色调与复杂渐变阴影，但放大后会出现马赛克，文件体积随分辨率上升。矢量由数学公式描述的路径构成，缩放到任意尺寸都边缘锐利，文件小且便于修改形状与配色，适合图标、标志、插画与界面图形。选择标准看内容类型：摄影素材与人像渲染必须位图；界面元素、图标、字体是矢量；运营位大图可以在位图基础上叠加矢量元素。输出时的典型规范是图标用 SVG 保证多端清晰，运营图按投放渠道切一到三倍率的 PNG 或压缩后的 JPG 与 WebP，印刷稿则用三百 DPI 以上的位图加可编辑矢量源文件。混合场景如图标加投影光效，可以矢量为主、效果位图化兜底。理解两者边界是设计工具课的第一性问题。

组件是可复用的母版，实例是母版在使用处的投影，母版修改后所有实例同步更新，这是设计系统能够一处修改全局生效的基础。实例可以覆盖文字、填充等局部属性而不脱离同步，还可以被解绑独立。变体是组件的分组机制，把同一组件的不同状态与尺寸收进一个集合，比如按钮的默认、悬停、按下、禁用四态，以及大小两档，通过属性下拉切换。变体的价值有三：一是属性化切换替代了翻找多个独立组件，效率高且不易选错；二是让组件库的结构对齐前端组件的属性接口，设计稿即文档；三是配合布尔运算与嵌套变体可以组合出大量状态而不必逐个画。管理上要注意变体命名规范，属性与值用斜杠约定，避免组件库失控。这是 Figma 进阶面试的高频考点，需能清晰说出同步机制与解绑时机。

我会分四个环节排查。第一是设计源，检查自己的稿子是否用了开发难以实现的手段，比如非标准投影、特殊混合模式、手动字距，以及图层命名混乱、自动布局缺失导致标注误读。第二是标注与资产，确认交付物里尺寸、间距、圆角、色值是否完整，切图是否按一到三倍率与正确格式导出，图标是否矢量为 SVG。第三是沟通流程，主动跟开发走查关键页面，确认字体加载方案、动效参数与断点行为有没有歧义，很多还原问题其实是约定缺失。第四是验收机制，建立走查清单，用真实环境截图与设计稿逐屏对比，记录差异项并区分必须改与可接受。长期方案是把规范沉淀进设计系统与组件库，让还原问题在源头减少。回答这类问题时强调流程与机制，而不是单次互相甩锅，是面试官想看到的成熟度。

三者都覆盖界面设计核心流程，差异在定位与生态。Figma 的核心优势是浏览器即开即用与实时多人协作，团队评审、设计系统管理、与开发交付的链路最完整，跨平台且社区插件生态最活跃，因此成为大多数团队的主流选择。Sketch 是 Mac 原生工具，历史包袱小、性能好，组件体系成熟，配合云端库也能协作，但在 Windows 协作与浏览器体验上受限，适合纯 Mac 小团队。Adobe XD 与全家桶联动好，早年靠原型动效见长，但近年更新放缓，生态收缩，新团队选型时已少被考虑。选型逻辑应从团队构成出发：跨地域协作与设计系统优先选 Figma；本地 Mac 且重度依赖既有 Sketch 库可延续；重视频与印刷的混合工作流则 Adobe 全家桶不可替代。工具永远服务于流程，面试时表达这个立场比站队某软件更稳妥。