5 分钟了解 Sketch 的新特性 Tint - 色调
source link: https://wocai.de/post/2020/03/5-%E5%88%86%E9%92%9F%E4%BA%86%E8%A7%A3-sketch-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7-tint-%E8%89%B2%E8%B0%83/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Sketch 近期更新了新版本 64，其中带来了一个新特性：Tint，中文翻译为色调。
需求缘起 #
我们在设计 tab 组件的时候经常会遇到这样的场景：
如果要实现tab激活或者未激活的状态，需要画两套icon。如果考虑到现在越来越流行的Dark Mode，你可能需要四套icon。
如果你的应用还支持换皮肤……设计师就只能一口老血了。
Tint 的引入 #
最早的时候 sketch 中是没有 tint “色调” 的概念的，在最新的 64 版本中，新增了这个设置。
官方说明见这里
色调和填充的概念不同，填充是针对单一元素，填充颜色/渐变/图案等。色调则是针对一组元素中每一个元素的填充进行修改。
比如组由一个方块和一个文字构成，那么方块对应填充 A，文字对应填充 B。
当你选择了这个组之后，可以选择色调，这个色调将会直接同时覆盖填充 A 和 B。
上图中左侧即为被覆盖的情况。
不适用色调的情况 #
由于色调特性本身的限制，如果组内原来包含了多种元素，那么选择之后，两个颜色都被覆盖了。
在第一次使用这个特性的时候，我差点以为出了 bug，因为……
按钮中间的文字也被覆盖掉了。
适用色调的情况 #
由于透明度不会受到填充的影响，如果组中仅包含一种颜色，就可以通过透明度展示不同的效果了。
更完整的示例如下：
左侧为原始的组，右侧为使用了色调的组。
其实除了颜色之外，边框，内外阴影，文字颜色也都能受到色调影响。
配合组件使用 #
前面提到这个功能会因为颜色覆盖的问题直接把按钮中的文字隐藏掉，但是有没有办法在组件里用色调呢？
当然有办法啦！
sketch 支持组件嵌套组件，也就是说，我们可以通过组件嵌套的办法，在高一层级的组件中对按钮使用色调。
通过这个特性，我们就可以将原本每个颜色一套的按钮组件优化到少一个数量级。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK