<p>Design Thinking 是由斯坦福大学和 IDEO 的 David Kelly 提出的创造性设计思维方法，包含六大步骤并衍生出了一系列的设计流程和工具。 Evolt 作为一款 Web 端 App，包含用户画像、故事版、商业画布、体验地图四大工具模块 ，帮助商业和产品设计师更好地实践 Design Thinking 设计方法。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>相关参数</p></h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>平台：Web端</p></li><li><p>界面语言：英语/法语</p></li><li><p>导出格式：.pptx</p></li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>开始使用</p></h2><p>初次访问 evoltapp 的默认语言是法语，可以通过右上角切换为英语环境。注册邮箱账号后拥有免费账号的相关权限（5份文件数量限制）。使用任何一样工具前，你都可以通过 View More 学习该工具的在 Design Thinking 方法中的意义和使用要领。在 Evolt 完成编辑后，可以通过 Export 按钮导出为可编辑的 pptx 格式，如果内容较多，需要多等待一会。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-679d9b7eea375a2712fa1840b9ed9325_hd.png"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>用户画像 Persona</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-5ac00c9ced4af5c46804a66dde198e50_hd.png"/></p><p>Evolt 通过步进式模板指导你在不同设计项目中使用用户画像，并支持自定义描述内容。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>体验地图 Emotion Map</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-a090e8b6c5a3e509c48c89469e527db4_hd.png"/></p><p>Evolt 以卡片形式组织体验流程，进行分组形成多个阶段。你可以针对不同步骤评估用户情绪，并筛选出体验过程中的痛点和兴奋点。Evolt 同步形成图表化体验地图。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>商业画布 Business Model Canvas</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-26a994981cd1ae9413722d1c7647be2f_hd.png"/></p><p>商业画布工具在当前的设计师群体中使用率并不高，但它描述了整个项目或产品的基础结构，能够帮助你理解当下的项目，并以更高的视角描述和评估当前的设计工作。Evolt 的商业画布仍旧沿用 2004年 Alexander Osterwalder 发布的九大模块矩阵。你也可以与时俱进，将环境价值和社会价值纳入考量。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>故事版 Storyboard</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-279ca65425bd0072f9da266cda983d0e_hd.png"/></p><p>故事版是经典的分析工具和交流工具。设计师通过创建故事版梳理行为流程和触点，整理出现存的摩擦点、兴趣点和产品机会。同时可以和不同文化和知识背景的参与者分享你的 idea。在 Evolt 中，你可以上传插画、编辑标题和描述并标记用户情绪。虽然可以在故事版工具中画出一整部故事书，还是建议你控制在3-6个场景，最多不要超过12个。</p><p><br/></p>

Evolt

Evolt - Design Thinking 实践工具 - 胡思

<p>macOS 更新了版本 Mojave 以后，桌面壁纸多了一个选项：动态壁纸，这玩意儿会在不同的时间段根据日照切换壁纸。合理使用动态壁纸的确可以提升自己的逼格和办公室地位。但是 Mojave 中只提供了两个可选壁纸，最近更新的 Catalina 也只增加了一个，很抠。还好我找到了目前市面上第一个动态壁纸创作交流平台：Dynamic Wallpaper Club，今天分享给大家。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-8b8827092215d18ac88b11fe2a0e083d_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"></h2><hr/><p>我们来看一下 Dynamic Wallpaper Club 两个主要的功能。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>壁纸库</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-399d6e4ee796dedd3e76232f268eea75_b.png"/></p><p>Dynamic Wallpaper Club 上面有不少制作好的动态壁纸，可以免费下载。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>壁纸制作</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-c030dac0966cceb7159b08f36bf4c516_b.png"/></p><p>Dynamic Wallpaper Club 拥有一个简单灵活的动态壁纸制作引擎，所有人都可以轻松使用。</p><hr/><p>让我们一起来制作一个动态壁纸。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第一步，注册登录</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-9fa6669498e8fde39a03a90bfa729c2e_b.png"/></p><p>可以用 Email 注册 Dynamic Wallpaper Club 的账号，填写邮箱密码，并在邮箱中点击验证链接即可。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第二步，制作壁纸</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-5f6467a304b12c0ccb124659afee1007_b.gif"/></p><p>点击导航栏中的「Create」进入制作页面。上传素材图片后选择合适的模式。其中「Sun」模式下，动态壁纸会根据照片的 EXIF 信息对应室外的日照情况而切换，而「Time」模式则需要你自己设置动态壁纸切换的时间节点。</p><p><span style="font-weight: bold;">tip：至于素材源，可以考虑从高清延时摄影中截图。</span></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第三步，下载</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-6534df5e02613f23c7b171434b30934b_b.png"/></p><p>制作好的动态壁纸会出现在你的个人界面，点击下载即可。<a target="_blank" href="https://dynamicwallpaper.club/wallpaper/85qp7ixhoh" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">报告老师，这份是我的作业。</a></p><p><br/></p>

Dynamic Wallpaper Club

macOS 更新了版本 Mojave 以后，桌面壁纸多了一个选项：动态壁纸，动态壁纸会在不同的时间段切换壁纸。设计师群体自带高逼格标签和尝鲜特性，一定会给 Mac 换上动态壁纸。但是 Mojave 中只提供了两个可选壁纸，最近更新的 Catalina 也只增加了一个，灰常抠门儿。还好我找到了一个动态壁纸制作分享平台：Dynamic Wallpaper Club，当然这也是目前市面上第一个动态壁纸创作交流平台。

Dynamic Wallpaper Club - 动态桌面制作分享 - 胡思

动态壁纸制作

<p>Felipe 可以将简单的图层瞬间转化成设计稿中已存的 Symbol，从而大大加速设计师找 Symbol 的速度，适用于任何设计系统。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>瞬间调用 Symbol</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-5378972f17f9c578d0b93e2a859dbe35_hd.gif"/></p><p>调用 Symbol 的速度提升了几倍。无需在长长的 Symbol 中查找，仅仅画一个简单的图层，变出一个 Symbol。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>另外</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-18e3e08936c7803057ffcb66d57a6ac6_b.png"/></p><p>识别11种不同类型的图层元素，支持共享 Library。附赠两套示例 UI Kits，完全支持 Felipe，请尽情尝试。</p><hr/><p>如果你的设计系统并不是特别大，Felipe 还是能帮的上一些忙的。当你的设计稿包含了很多 Symbol 后，Felipe 的准度会明显降低，因为类似尺寸的 Symbol 太多了，增加了它的识别门槛。</p><p><br/></p>

Felipe

Felipe - 通过鼠势调用 Symbol - 胡思

<p>继上次使用图层功能对豆瓣电影首页进行模块划分后，又处理好本地字体的使用。然后我导入了几张电影海报，框选它们时发现了一个好玩的功能。查了一下官方文档，发现这个功能叫做 Smart Selection，用于高效操作设计稿中的图层网格。Sketch 在 55 版本中也偷偷放上了半个这个功能，离 Smart Selection 还是有一些差距，不过我猜很多同学并没有发现这个小秘密。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-5494753d5373f983220a69d6a6f30352_b.gif"/></p><p>Sketch 55的小秘密</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>教程相关</p></h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">Figma: the collaborative interface design tool.</a></p></li><li><p>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></p></li><li><p>阅读时长：3分钟</p></li><li><p>操作时长：5分钟</p></li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第一步，整理图层</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-c0d9f86df456026086826dd3323cb759_b.gif"/></p><p>使用「图层插入 - 图像」功能将几张海报上传至设计稿中。使用鼠标拖动将这些海报全部框选，此时会发现整体选中框的右下角有一个「蓝色的按钮」。点击该按钮会自动将杂乱无序的海报图层整理成有序的网格。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第二步，调整间距</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-4cd39a14802d01c9de0d8f135f684eb0_b.gif"/></p><p>此时再一次使用鼠标拖动框选住整个海报网格，鼠标 Hover 时可以发现整体选框中多了很多操作功能提示。拖动行元素之间的「水平横线」可以调整水平间距，垂直亦然。这个间距调整会影响所有行元素的间距，不仅当前两行的间距。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>第三步，调整布局</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-1b9c679bb22c1f47c45eb2516609edc0_b.gif"/></p><p>鼠标 Hover 选框时，里面的每个图层中心都会有个小圆点，Hover 海报图层时小圆点会放大成为描边圆圈⭕️。进一步 Hover 该圆圈时可以拖动这个图层。此时你可以拖动这个图层跟别的图层调换位置，也可以把这个图层放置到别的行中。</p><p><br/></p>

使用 Smart Selection 玩转图层网格

使用 Smart Selection 玩转图层网格 - 胡思

<p>Sketch Manger 可以高效管理 Sketch 设计稿中的 Symbols、图层样式和文字样式，通过对设计资源的复用节省设计师的重复劳动。</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>资源管理</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-06b759ef6c183f15dfc2211e2cf08c3c_hd.png"/></p><p>你可以通过 Sketch Manager 这一款插件同时管理 Symbols、文字样式和图层样式，这意味着一个插件帮你管理了整个设计系统。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>资源整理</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-7727eb1c642ee5240fb4d3b584935e5f_hd.png"/></p><p>用 Sketch Manager 附带的一些功能可以帮你高效整理设计资源。比如元素重命名、快速定位无效 Symbols。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>智能重命名</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-4a3694b0adac882bc981c611f8e06ec4_hd.gif"/></p><p>设计稿整洁的关键之一就是有一个清晰的命名结构。「智能重命名」功能可以帮你一次性快速批量命名设计稿中的元素。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>拖拽即用</p></h2><p>插件面板中的那些设计资源，都可以拖拽到画布上直接使用。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>有好的界面</p></h2><p>插件的操作界面风格和 Mac OS 保持一致，让你无需学习，直接上手。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>使用感受</p></h2><p>Symbols、文字样式、图层样式，三个合起来就是 Design System Manager，虽然 Sketch Manager 是这个功能的早鸟，但是据我所知 InVision、Abstract、蓝湖都提供了类似的解决方案。解锁整个插件至少需要300元，感觉有点不划算。如果你是土豪设计师，我建请无视我。普通设计师可以货比三家。</p>

Sketch Manager

Sketch Manager - 设计资源管理器 - 胡思

<p><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);">自动生成漂亮的可视化站点地图，每张页面的截图都是高清分辨率，任何站点或 web app 都可以使用 VisualSitemaps 进行爬取。UI、UX、SEO 或市场人员做研究时都可以用到。只需要输入一个网站链接，就可以可视化查看整个网站的站点结构。具体效果可以看一下这些官方放出来的 Demo：<a href="https://link.zhihu.com/?target=https%3A//app.visualsitemaps.com/share/4a67997259c88c77033d5924a43913b5" class=" wrap external" target="_blank" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey; caret-color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: normal; text-size-adjust: auto;">uxtools.co</a><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: medium; text-size-adjust: auto; background-color: rgb(255, 255, 255);">｜</span><a href="https://link.zhihu.com/?target=https%3A//app.visualsitemaps.com/share/78679ca7f2a4bab295f4e5f549192683" class=" wrap external" target="_blank" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey; caret-color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: normal; text-size-adjust: auto;">www.volvocars.com</a><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: medium; text-size-adjust: auto; background-color: rgb(255, 255, 255);">｜</span><a href="https://link.zhihu.com/?target=https%3A//app.visualsitemaps.com/share/f648c9bcce501197563fbe6de2479989" class=" wrap external" target="_blank" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey; caret-color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: normal; text-size-adjust: auto;">weather.com</a></span></p><p><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);"></span></p><hr/><p><strong><span style="color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; white-space: pre-wrap; caret-color: rgb(26, 26, 26);">完全自动</span></strong><br/><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);"></span></p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-a793dffa15574bcb4677a9de0a646903_b.png"/></p><p>输入一个网址，喝杯咖啡。上千页面的可视化站点地图立马生成。（需要很久，别听官方胡扯）</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>多格式导出</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-64d268c2f95d69d30c994fa645e624cd_b.png"/></p><p>可以将可视化站点地图导出为 PDF、CSV 等格式。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>分享</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-59fe2334de8e08aed185b9c02aea29b5_b.png"/></p><p>一键分享站点地图给你的团队或者客户。VisualSitemap 支持为不同的项目创建不同的团队。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>截屏评论</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-b12f0f1e96e7688690d6fe768bb8888a_b.png"/></p><p>对任何页面轻松标记以及从团队和客户那获得反馈。你可以通过截屏的状态管理这些反馈。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>重新设计过的站点地图</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-e3e88d41dfec8c1a1c489c6b0e54ccc9_b.png"/></p><p>你可以对默认爬取好的站点地图进行调整，只需拖拽那些页面就可以进行重新组合。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>爬取加密网站</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-9bceb3291dd033bdc362d0779b13311d_b.png"/></p><p>内部的或者加密的站点也可以爬取，只要你能进行自己身份的有效认证。这些数据并不会保留在 VisualSitemaps，保证数据安全。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>注册账号</p></h2><p>注册流程非常友好，随便填填就可以蒙混过关了。无需验证邮箱。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-fee91e67215197b41ce03d41ea710d61_b.png"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>爬取</p></h2><p>填写几个参数就可以了，要等待一段时间，并非官方宣传的「几秒」。作为免费用户，有很多限制，限制层级为两层，最多爬取50张页面。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-9ab3467fe2ed3c56327e75fb24b7febe_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>预览站点地图</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-efa9c7e27422f01bd4b205961db93fee_b.gif"/></p><p>点击「View」即可查看爬取的站点地图。进去后可以对展现方式进行横向或纵向的切换。点击站点地图上的页面可以进入详情浏览，查看整张页面的截图。也可以从该详情页直接跳转到对应的站点页面去。</p><hr/><p>做竞品分析的时候相当有用，当然也可以对自家产品的网站结构进行自检。美中不足的是如果只用一两次，成为付费用户很吃亏。所以笔者建议普通设计师可以用「反复注册」大法。</p><p><br/></p>

VisualSitemaps

VisualSitemaps - 一键生成可视化站点地图 - 胡思

<p>面对层出不穷的屏幕分辨率，一份完美自适应的设计稿可以省去设计师不少重复劳动。Figma 中自带「Constraints」功能，该功能专为解决自适应这一需求而设计，类似 Sketch 中的「调整尺寸」功能。我们使用豆瓣电影小程序的导航栏作为实验，一起了解一下 Constraints 的实际操作。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b4cf481e01531360a222f4a9c46d52eb_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>教程相关</p></h2><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li><p>官方文档：<a target="_blank" href="https://help.figma.com/article/54-constraints" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></p></li><li><p>阅读时长：4分钟</p></li><li><p>操作时长：15分钟</p></li><li><p>教学材料：<a target="_blank" href="https://link.zhihu.com/?target=https%3A//www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design%3Fnode-id%3D31%253A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></p></li></ol><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第一步，了解定义</p></h2><p>Constraints 功能让用户可以通过对图层 x 轴、y 轴布局方式的调整，实现图层按照一定的策略进行缩放，保障不同图层在页面不同位置的布局方式。Constraints 告诉 Figma 设计稿中的元素在用户拉伸他们的框架时应该如何响应，这让你轻松掌控设计稿在不同的屏幕尺寸以及设备上的效果。你可以为框架里的任何元素应用 Constraints。</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li><p>你可以为框架中嵌套的框架设置 Constraints；</p></li><li><p>你可以为同一个元素同时设置 x 轴和 y 轴的 Constraints；</p></li><li><p>你可以通过 Constraints 定义元素在可以滚动的原型长页面里是固定还是跟随滑动。</p></li></ul><p>Constraints 的操作界面和展开选项如下图所示。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-8324e555817d9878a427de82a1f60d35_b.png"/></p><p>首先看一下 x 轴不同设置的实际效果和说明。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b4c2d618822f404c0bd0056c09063eab_b.gif"/></p><p>再看一下 y 轴不同设置的实际效果和说明。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-5bab950e382b9a796b945c6a85925fe7_b.gif"/></p><p>Constraints 支持两种设置方式，既可以通过左侧可视化界面点选，也可以通过右边的两个按钮，点击展开菜单并选定。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-f1172f52430cf0a03d9beac8b31c3fcc_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第二步，图层分组</p></h2><p>通过插入不同的图层，还原豆瓣导航栏上的各种元素。关于图层的插入在系列中其他教程有讲，欢迎补课。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-97f9bd4fb1330ceef72c69d7f49b0e49_b.png"/></p><p>然后将图层按照功能模块分组。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-20bfb2ac8d2f41124a0abda947ca2375_b.png"/></p><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li><p>用于显示时间的叫做 Time，是 StatusBar 的一部分；</p></li><li><p>用于显示状态的叫做 Status，是 StatusBar 的一部分；</p></li><li><p>用于搜索的叫做 SearchBar；</p></li><li><p>用于显示页面标题的叫做 Title，是 NaviBar 的一部分；</p></li><li><p>用于放置小程序全局操作的叫做 NaviControl，是 NaviBar 的一部分。</p></li></ol><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第三步，设置 Constraints</p></h2><p>我们为五组图层设定不同的缩放策略：</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-9295cb8fe015fd63f735ae61c4a1e81b_b.png"/></p><p>设置以后拉伸 Instance Component 可以发现 SearchBar 中的 Hint 部分拉伸异常，这是由于图层组嵌套的缘故，大组和小组在同样缩放时，对布局的要求不同。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-9cc81fcef91cffedebfcbd7048a0384a_b.gif"/></p><p>我们针对产生冲突的 Hint 重新进行 Constriants 设定。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-18f384752efdcb73b3df5ffbe33fda1f_b.png"/></p><p>大功告成，效果如图。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-6d96214b4da60df0b0c105478dea3ede_b.gif"/></p>

用 Constraints 功能制作自适应导航栏

用 Constraints 功能制作自适应导航栏 - 胡思

<p>Figma 虽然界面简单，看上去很简洁。但在实际使用的时不时出现一些让人眼前一亮的小功能。这些功能只会在你绘制图形的时候出现，不会聚在工具栏、检视窗等界面上。比如说 Smart Selection。今天介绍的功能 Arc 就只能在椭圆图层上使用。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-5f3d720b9ba61103591634929d304e1e_hd.gif"/></p><hr/><p>Arc 功能包含了四个子操作点。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>打开缺口</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-dcf837fdea4febbf1a07fa6a2f1949fb_hd.gif"/></p><p>当鼠标 hover 到椭圆图层上时，右手边会出现一个操作点，叫做「Arc」。拖动这个操作点可以为椭圆图层打开缺口。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>调整朝向</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-38b8a340c3b563fdce8806e77ef46286_hd.gif"/></p><p>椭圆图层打开缺口后，会出现三个可以拖拽的操作点。顺时针第一个操作点叫做「Start」，拖动它可以更改开口的朝向。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>调整开口</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-17d0df7a63a998dc6434f3a8918369db_hd.gif"/></p><p>顺时针第二个操作点叫做「Sweep」，拖动它可以更改开口的大小。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>制作圆环</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-54916a6bdd5cb3c289cfb7ae2015718a_hd.gif"/></p><p>躺在圆心的操作点叫做「Ratio」，拖动它可以制作圆环，可以正向或反向拖动。</p><hr/><p>那么咱们可以用 Arc 来做点什么呢？比如画个饼图。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第一步，绘制正圆</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-a483c13c55dcfac2e5bf5e79570d9465_hd.gif"/></p><p>点击快捷键 o，按住 shift + option，拖拽出一个正圆。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第二步，复制改色</p></h2><p>粘贴复制出一个同样的正圆，并把颜色改深。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-63a2f3ec026cfe2012c6594fdb6523a7_hd.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第三步，制作扇形</p></h2><p>找到第二个正圆上的 Arc 操作点，拖拽开口。然后继续拖砖，更改开口角度，最终形成一个锐角扇形。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/80/v2-919bac288c920e5c27b4600978366c7f_hd.gif"/></p><p>好了，一张朴素的饼图做完了。在此基础上还有很多可以发挥的点，就教给大家自行探索了。在 Sketch 中画这么一个饼图避免不了几次布尔运算，所以 Figma 的这个 Arc 功能还是有心的，为设计师节省了不少时间。</p>

用 Arc 功能为椭圆图层易形

用 Arc 功能为椭圆图层易形 - 胡思

<p>AEUX 是一款来自 Google 的动效设计插件，致力于降低动效设计的操作门槛，使其得以成为日常 UX 设计工作的一部分。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-885eedd29b65651dc3679cc460919295_b.png"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>阅读相关</p></h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>原文地址：<a target="_blank" href="https://medium.com/google-design/aeux-f79e06e01594" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">Medium</a></p></li><li><p>原文作者：Adam Plouff - Skethc2AE、AEUX 作者，Google 动效设计工具开发者</p></li></ul><hr/><p>动效可以在页面切换中起到很强的提示效果，让用户知道从哪里来，到哪里去，从而获得更好的导航体验。但是把动效设计结合到 UX 设计工作流中，并不是一件简单的事。</p><p>追溯到2016年，那时简直是动效设计最暗无天日的时候。当时出现了很多的动效设计规范，但是并没有切实有效的工具。直到 Lottie 出现，我们才能真的在设备上渲染动画。在 AE 中重现设计稿意味着要在 AI 里重新画一遍，再进行 AI 和 AE 的数据导入。这一切需要很复杂的导入和重复处理过程。然而设计稿的调整和修改没有止境，每一次调整就意味着要重新进行一次 AI 调整，AE 导入等一些列愚蠢的过程。</p><p>为了减少这些没用的环节，2016年中期 AEUX 作者开始在 Google 内部开发一个叫做 Sketch2AE 的插件。这是第一个用来在不同应用中传递图层信息的插件，是同类插件的开山始祖。但这并不只是一个文件导入器，而是希望设计师能专注于创造。在2017年，Sketch2AE 公开发布，帮助动效设计师参与 UX 设计流程，以及视觉设计师能够在 AE 中工作。下图为当年的 Sketch2AE 传输过程。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-2eae3b727db9d8a247994db305c4a426_b.gif"/></p><p>从那以后，UX 动效逐渐成熟。许多设计团队思考 UX 应该包含通过时间带来的体验。动效设计师和视觉设计师配合，通过多次迭代，可以创造出一个大不相同的解决方案上。从 Sketch2AE 放出来以后，出现了很多类似的工具，动效设计师对工具间数据传输的需求也在不断增加。所以 Sketch2AE 的作者开发了一个更健壮的动效设计工具 AEUX，用来在 AE 中进行 UX 动效设计。下图是 Material Design 中 AE 操作指南。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-0d3921ecb1a9b3844b6b3589e30ebd29_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>欢迎来到 AEUX</p></h2><p>新工具的目标之一是支持更多的设计工具，增加团队协作时的灵活性。AE 对自家的 AI 和 XD 数据导入支持非常到位。但是有了 AEUX，你可以从 Sketch 或 Figma 导入图层数据，并且支持最新的 Sketch 功能，另外：</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>读取复杂画板时的速度提升了93%；</p></li><li><p>支持文字图层和嵌套 Symbol 的复写；</p></li><li><p>减少了冗余图形的绘制；</p></li><li><p>文字图层的各个属性还原度提升；</p></li><li><p>图层组可以转成 AE Precomped，也可以一键解除。</p></li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>AEUX 和 Figma</p></h2><p>虽然 Sketch 还是很流行，许多 UI 设计师也开始使用 Figma。有了 AEUX，团队间协作时可以无视设计工具的不同，都能导入 AE。</p><p>Figma 的核心特色就是在线协作，所以在导出图层数据时需要通过一个接入了 Figma API 的网页应用。现在，Figma 插件在设计环境还无法使用，意味着图层数据的导入/导出需要通过一个更传统的方式。针对一个在线设计应用，数据安全也是需要着重考量的。</p><p>在完成 AEUX 导出应用的验证后，你被要求输入 Figma 文件路径。这个应用会收集文件内所有的画板信息。每一个画板可以独自下载，每一个需要的图片会被处理和压缩后放到新的 AEUX.json 文件中。把 AEUX.json 文件拖放到 AE 的 AEUX 面板中，就会完成图层的创建。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-8bd36eddafdbbabcb5447a2ecdd43273_b.gif"/></p><p>Note：AEUX 不会追踪用户数据，不会查看和储存你的设计。它就是一个瞎眼机器人，只负责在你电脑上的浏览器中，把你的设计稿转换成 AEUX.json 文件。需要你调用分享功能它才有读取设计稿数据的权限。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>吸取的教训</p></h2><p>打磨一个工具基于你如何思考其他设计师工作上的痛点。有时你最好的意愿并不真的有价值，或者被人有你没料到的更好解决方案。我在创作 Sketch2AE 时学到了很多，进步很大。最重要的是限制心智模型切换的次数。如果某人尝试着设计，就让他设计，而不是逼迫他读手册，学习理解那些难懂的概念。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>移除复制/粘贴</p></h2><p>图层数据转换会在屏幕后面悄悄进行，这样可以避免困惑。虽然并不是瞬间完成，但是在你从 Sketch 切换到 AE 的时间里，面板上已经更新了你需要操作的新图层。整个转换过程的简化使你可以更专注于设计。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-47e044654a13346225e09d4d4db2c85a_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>及时的反馈</p></h2><p>在之前的版本中，导出成功后才有通知，而 Sketch 下面的弹出消息很容易被忽略。所以你需要等待，并猜测插件是否运行成功（这真的是一个糟糕的设计体验）。</p><p>Sketch 中浮动的 AEUX 操作面板提供了一个地方来通知你插件的运行结果。同样在 AE 中。AEUX 面板会显示解析的进度，以及通知 AE 不能绘制的元素。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>对于未来</p></h2><p>UX 动效设计正在发展，大家还在试错的过程中。希望 AEUX 帮你更好更开心的参与 UX 动效设计。</p><p><br/></p>

AEUX

AEUX - 往 AE 导入设计稿 - 胡思

<p>为你的商业或私人设计项目提供免费的矢量纹理库，可自定义编辑形状及图层样式，加快你的工作流程。适用于 Sketch、 Figma、XD 与 lllustrator 。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);"><p>品类丰富</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-18ce92b4b3afe116d54d4ccde313703a_hd.png"/></p><p>拥有大量不同风格和色彩图案。可以根据需要快速找到喜欢的风格。目前收录了22套风格迥异的纹理，还在持续增加。</p><p><br/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 1.2em; line-height: 1.5; font-family: -apple-system, system-ui, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; clear: left; color: rgb(26, 26, 26); white-space: pre-wrap; background-color: rgb(255, 255, 255);"><p>快速更换颜色</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-499fcd66ec14d6c639604ee33e1954cb_hd.png"/></p><p>选中想更换的颜色，在颜色选择器中选择你喜欢的颜色，更新图层样式就可以得到更换后的图案了。</p><p><br/></p>

paaatterns

paaatterns - 免费矢量纹理库 - 胡思

<p>Measure 作为最早出现的 Sketch 插件之一，同时也作为最早的标注类插件，这么多年来帮助了很多设计师从无聊的标注工作中解放出来。插件的开发者希望把标注设计稿变成一件有趣的事。作为业内标杆，Measure 在 Github 上已经摘了六千多星。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>工具栏</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/80/v2-f9676a58fb105d0ae3194ab683ac3fef_hd.png"/></p><p>Measure 自带的工具栏上放置了最常用的一些功能，搭配了清晰易辨识的图标。让你在标注设计稿时可以快速找到需要的功能。使用快捷键 control + shift + b 可以唤出 Measure 工具栏。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>全新的 UI</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-3ca31bf0fffb6c8706072ff2a3852525_hd.png"/></p><p>友好的用户界面让你更容易上手 Measure。按住 option 然后点击工具栏上的 feature 图标可以唤出该界面。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>导出标注</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-07e0c0d5a39505beef7d7d29709fb82c_hd.png"/></p><p>一键自动生成 html 页面，可以离线查看设计稿的一切细节，包括 CSS 样式。具体效果可以看看这个 Demo，<a target="_blank" href="http://utom.design/news/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a>。</p><p><br/></p>

Measure

Measure - 标注类插件开山祖师 - 胡思

<p>Components 是指那些在整个项目中会被反复使用到的 UI 元素，可以是按钮、图标、模态或者形形色色的图层组合。通过对这些 Components 的复用可以保持整个设计稿的一致性。Components 算一个可玩性比较高的 Figma 功能，了解下面四条规则可以帮我们快速上手：</p><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li><p>母版 Component 中所包含的图层定义了这个 Component 的所有属性；</p></li><li><p>实例是你可以在设计稿中复用的 Component；</p></li><li><p>你对母版做出的任何改变都会立刻应用在实例上；</p></li><li><p>实例中的一些属性可以复写，这些变化不会影响母版。</p></li></ol><p>豆瓣电影的海报下面都会放置这部电影的评分星级和具体分数。上手制作了几个 Component 后，笔者发现其支持的复写属性比 Sketch 中的 Symbol 要多，这就使得原来需要 Nested Symbol 才能实现的一些组件机制可以依赖简单的样式复写搞定。我们今天一起来做一个评分控件，熟悉熟悉这个功能。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-ba6745d76adc12424b73e2ec5d8ddbf0_b.png"/></p><p>今日份任务</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>教程相关</p></h2><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li><p>Figma 地址：<a target="_blank" href="http://www.figma.com/" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">www.figma.com</a></p></li><li><p>教材地址：<a target="_blank" href="https://www.figma.com/file/KvufnMRDmnZka4WWIl4u7OZA/whose.design?node-id=31%3A3" class="Link ztext-link" style="text-decoration-line: none; cursor: pointer; border-bottom: 1px solid grey;">戳这里</a></p></li><li><p>阅读时长：4分钟</p></li><li><p>操作时长：10分钟</p></li></ul><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第一步，制作一组五角星</p></h2><p>从工具栏调用「插入图形」功能插入一颗五角星，调整其大小和形状，参数如图。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-5943e22b6e283003352feb8d76d7e0d2_b.png"/></p><p>将制作好的五角星复制四个，把五个五角星框选起来后使用 Smart Selection 功能整理成一行等间距的五角星图层组。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-09c958ebaaadfb08e9bf44e86effc02e_b.gif"/></p><p>使用布尔运算把五个分开的五角星图层合成一个完整的图形图层。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-44967027a222b6b4935199c13f39763f_b.gif"/></p><p>插入文字图层，制作 Rate 的评分部分。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-d56966107584fc05e4cbc90afbd68e8a_b.png"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第二步，调整图层样式</p></h2><p>把这组五角星图层的填充方式改为线性渐变，设置四个渐变节点，非别为黄黄灰灰，中间两个节点紧邻。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-080696761bdbbd588e73ec39a937bcc5_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>第三步，创建 Component</p></h2><p>框选已经调整好的五角星组和评分图层，点击工具栏正中间「Create Component」功能，完成创建。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-1a81105d4d81ea5a6cc82afc5d15baf3_b.png"/></p><p>在图层管理栏中找到「Assets」中拖拽刚刚制作好的 Component 就可以使用了。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-58e1c4b01426e139edc5eff8ecb6eb25_b.gif"/></p><p>依次调整实例 Component 中不同图层的属性，更改评分控件的分数。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-b3d00603662de67110ebcb0b74d1fcab_b.gif"/></p>

用 Component 功能制作可改分评分控件

用 Component 功能制作可改分评分控件 - 胡思

<p>如果你是一枚 toB 设计师，那么少不了要和表格打交道。用 Sketch 从零到一绘制各式各样的表格并不省力。Chart 可以按照你的需求，自动生成表格。它是 Sketch 上最强大的数据可视化插件，可以通过随机数据或 Excel、JSON 数据来生成表格。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>丰富的图表类型</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-3881799e5e26c8a073dd94bf4283e9e8_hd.png"/></p><p>Chart 收录了13种最常用的图表类型。如果没有找到你要用的，可以和作者联系，也许他评估后会加进去。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>把真实的数据放进设计稿</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/80/v2-f0b3ee3d471dafdce5d741cda546279b_hd.gif"/></p><p>你可以通过数据管理器把真实的数据导入 Chart。它将使用 Google Sheets 或者你产品的 API 来绘制图表。即使你没有数据，Chart 也支持填充随机数据。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>自定义你的图表</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-fa7ddd559546efcf36203ea687f2fede_hd.gif"/></p><p>使用你自己的配色，更改图表中描线的粗细。既可以使用预设的通用样式，也可以定义你自己的样式。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>找到最合适的可视化方案</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/80/v2-b2e3794a7df519cf1fafae8c29bc81aa_hd.gif"/></p><p>几秒就可以切换图表类型，你可多做尝试并看看什么表现形式更适合你的使用场景。</p><hr/><p>完全解锁这款插件有点小贵。笔者建议有数据可视化需求的中产设计师可以去 Echarts、AntV 等国内成熟的数据可视化方案那里找找，截图配上设计说明，既省钱，又方便技术人员的实现。</p><p><br/></p>

Chart

Chart - 最好用的数据可视化插件 - 胡思

<p><span style="caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto; background-color: rgb(255, 255, 255);">这是一款直观得超乎想象的排版工具，操作对象涵盖杂志、书籍、小册子、海报、报表和文具等。可结合丰富的图像、图形和文本功能，设计出用于出版的美观布局。与广受赞誉的 Affinity Deisgner、Affinity Photo 一样，Affinity Publisher 的设计别具一格，摒弃不必要或过时的功能，挖掘新时代设备的性能，以满足 21 世纪设计师的需求。</span></p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>全面贴合排版的功能</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-749c0e6e160c0fa4a480a6c1760c4ec9_b.png"/></p><p>借助母版页、对开跨页、网格、表格、高级排版、文本流、专业打印输出等其他惊人功能，Affinity Publisher 可满足设计出完美布局的所有需求。比如这些功能：</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>双页跨页</p></li><li><p>实时母版页</p></li><li><p>嵌套母版页</p></li><li><p>智能缩放图像框</p></li><li><p>文本换行、精细填充</p></li><li><p>自定义形状的文本框</p></li><li><p>在文档中链接多个文本框</p></li><li><p>高级参考线、网格和对齐</p></li><li><p>表格和自定义表格格式</p></li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>丰富的文本处理功能</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-8f5198b49b0d98c33fab645167dbce13_b.png"/></p><p>Affinity Publisher 提供可视化文本，让你得以摆脱令人厌倦的传统文本布局，以创造性的新方式进行文本处理。比如这些功能：</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>你可以将文本样式链接到文档中的所有页面</p></li><li><p>支持最新 OpenType 字体的所有风格功能</p></li><li><p>文字装饰、首字下沉、路径文本、艺术文本</p></li><li><p>基线网格，确保文本的基线在所有列和跨页中对齐</p></li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>完美的图形处理功能</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-f0d55275dedac629ddc33ca07b0ff57d_b.png"/></p><p>无论简要要求如何，都可以依靠 Affinity Publisher 来处理所有标准文件类型，让你可以从多个源中提取栅格或矢量资源，自由地组合出内容丰富的设计。</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>可以使用完整资源管理器链接或嵌入图像</p></li><li><p>支持 PSD、AI、PDF、JPG、TIFF、PNG 或 Affinity 文件</p></li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>微调图像</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-d6e5ffe41ce8598c8baae31976334609_b.png"/></p><p>确保图像与布局的亮度相匹配。Affinity Publisher 附带了一整套强大的图像微调工具，可以在文档中进行校正。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>先进的设计工具</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-2efd6783e817d93c6f9bce2905af6932_b.png"/></p><p>使用功能强大的钢笔、节点和综合形状工具在布局中创建和编辑矢量图形，所有这些都可以控制渐变和透明度等样式。</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>精确的钢笔和节点工具</p></li><li><p>线性、圆锥形、放射状和位图填充</p></li><li><p>添加、减去、组合和分割形状等布尔运算</p></li><li><p>丰富的图层样式，包括阴影、发光和斜面</p></li></ul><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>兼容性</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-ff83c0247a2919f667298e82d6184d4f_b.png"/></p><p>支持图中所有格式文档。</p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-size: 1.2em; font-stretch: inherit; line-height: 1.5; clear: left; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); white-space: pre-wrap; text-size-adjust: auto;"><p>色彩</p></h2><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-da4345e2666211eba03ce94e839e7374_b.png"/></p><p>Affinity Publisher 可以处理 RGB、LAB、灰度和 CMYK 色彩空间，并可根据打印的专业色彩要求进行高级控制。</p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; caret-color: rgb(26, 26, 26); color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; white-space: pre-wrap; text-size-adjust: auto;"><li><p>端到端 CMYK</p></li><li><p>专色支持</p></li><li><p>包含 Pantone 库</p></li><li><p>ICC 颜色配置文件</p></li></ul><p><br/></p>

Affinity Publisher

Affinity Publisher - 新一代排版工具 - 胡思

<p>精益求精是一件非常有挑战的事。最新版本 Sketch 又对自己进行了大量的修正和提升：</p><ol class="public-DraftStyleDefault-ol list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em; counter-reset: ol 0;"><li><p>在画布上直接复写文字图层；</p></li><li><p>更智能的智能分布；</p></li><li><p>自动在 Sketch Cloud 云端保存读取设计稿；</p></li><li><p>根据内容自动调整尺寸的文字图层；</p></li><li><p>提升文字图层调整尺寸时的表现；</p></li><li><p>Sketch Data 插件中添加更多头像内容；</p></li><li><p>提升图层测量性能；</p></li><li><p>右侧检视窗宽度增加。</p></li></ol><p>其中第一、二、四点功能值得一看。</p><hr/><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>在画布上直接复写文字图层</p></h2><p>有了这个功能，我们在复写文字图层的时候不用先找到 Symbol，再去右边繁复的检视面板中找到对应的文字复写输入框。双击 Symbol 上的文字部分，就可以直接在画布中进行复写。这个功能直观易懂，可以大大提升 Symbol 的使用效率。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-681ba016f949fedcf675bbbcf0a14946_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>更智能的智能分布</p></h2><p>选中一堆图层，在右侧检视面板中点击「整理」，这些元素会按照网格自动归位，有点像操作系统中的「整理桌面」。不得不说这个功能向 Figma 的 Smart Selection 借鉴了很多（基本上全部😂）。在上一个版本的 Sketch 还只支持一个方向的等间距调整，现在已经支持两个方向。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-d6e1381d3ba4964521f4340b82abc5e0_b.gif"/></p><h2 class="Editable-styled" style="margin: 2.33333em 0px 1.16667em; font-family: inherit; font-size: 1.2em; font-style: inherit; font-variant-caps: inherit; font-stretch: inherit; line-height: 1.5; clear: left;"><p>根据内容自动调整尺寸的文字图层</p></h2><p>之前的文字图层只能选择根据内容「自动调整」和「固定」尺寸。新版本中调整尺寸的选项变成了三个：自动宽度、自动高度、固定尺寸。这一改动对 Symbol 中的文字图层摆放可以起到一定的优化作用，让我们来看一下这三个选项的效果。</p><p><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-e7dd481814d4ca8b5aa2fb5a6bd36662_b.gif"/></p><ul class="public-DraftStyleDefault-ul list-paddingleft-2" style="padding: 0px; margin-top: 1.4em; margin-bottom: 1.4em;"><li><p>自动宽度：文字图层根据内容自动调整宽度，高度不变；</p></li><li><p>自动高度：文字图层根据内容自动调整高度，宽度不变；</p></li><li><p>固定尺寸：文字图层宽高不变，超出部分截断。</p></li></ul>

7月已过，也许你应该了解一下这些干货