As more and more use Sketch design team to build UI interface, Fengyun large glittering diamonds have become standard on many UI designer, design productivity is greatly liberated. And in terms of component design, responsive design, teamwork, management style increasingly playing an irreplaceable role.
Sketch although there are so many advantages, but there are many designers according to the traditional PS accustomed to using, and did not leverage the power of Sketch, just simply take it as a visual design software. Encountered in the usual UI work efficiency or use of tedious operation to solve, an increase of assignments, overtime has become the norm over time.
The following example, music play, 320px width, to be reused, symbol into components, designated group member / Music / playback conditions. But now there is a need to use 480px player page article, this time will find direct tension component is destroyed.
If we make a play bar assembly of 480px will repeat that: obviously look the same, but different widths, why can not directly use the same components it?
Sketch Resizing is such a function, in its blessing, we can put the same structural components into the elastic responsive components, to achieve efficiency gains.
Will become flexible after such top music play use the Resizing, only one component can be achieved in different widths.
In previous PS era, stretching is a destructive operation belong to, when we met in the same style, not the same as the width of the component, only to re-establish a new component, which resulted in a repeat pattern. This thing is not in front of the front end only by changing the width, the internal float, position and other attributes can play responsive role in achieving reuse assembly. Resizing is actually imparting assembly response effect.
Resizing Introduction
Resizing also called intelligent scaling, may be constrained position and size of the elements in the group or the Symbol, thereby achieving elasticized components.
Until the latest version of the current 55, Resizing interface has undergone a total transformation of the three stages.
1- initially only four attributes representing stretching, fixed position, zoom and floating. You need a lot of practice to in-depth understanding.
2-接下来四个属性被打散，分为左边的上下左右固定和右边的宽高固定，设计师可以自由搭配，提高了灵活性。
3-最后进化到了如今的Pin to Edge +Fix Size模式，标题布局的改变让空间加大，增加了预览窗口，整体更加灵活和直观。
其实到了Sketch54版本自带中文后，Resizing有了官方中文名称：调整尺寸，两个重要属性也有了更直观的中文解释，让设计师更容易理解。
对于如何切换54版本以后的中英文界面，可以看这篇文章《还我英文界面！Sketch54设置英文版的方法》
Resizing属性解析
Resizing主要有下面的几种搭配用法。例子中，UI黑客的logo与背景一起编组，我们修改的是组内logo的Resizing属性。
1-什么都不选，表示正常的拉伸，和PS拉伸效果一致，但是具有破坏性质。
2-边缘位置不固定，宽高固定，表示浮动。logo没被破坏，但是位置不对。
3-边缘位置固定，宽高不固定，表示边缘吸附缩放。上下左右的间距都对，但是logo被拉伸破坏了。
4-边缘左上角固定，宽高固定，表示logo固定在左上角，实现了我们所需要的效果。
除此之外还有其他的搭配组合，都是在以上的四个基础上扩展而来的，操作都类似，但是会在不同的界面中形成不同的效果。
对于上面的logo例子来说，结构很简单，组内只有一个元素，但是在实际的设计需求中，我们往往会面临更复杂的文字、图片、形状等元素搭配，这就要求设计师通过更多的实例来进行练习。
播放条图层分析
回到刚开始的播放条，它就是一个比较复杂的结构，既有文字又有形状。无论我们怎么拉伸，内容都会根据宽度来进行适配，里面当然也使用了我们的上面讲到的Resizing功能。
在使用Resizing制作复杂弹性组件之前，我们首先要梳理清楚组件内部各个元素，只有这样才能更加准确地搭配使用位置与宽高。
播放条主要分为三个部分：
A-左边时间和播放按钮
B-中间进度条和B1
C-右边时间
我们想要实现的效果：
A-整体与播放条左边缘的间距始终固定，并且大小不变
B- play bar integral with a fixed distance left and right edges, wherein the width of the gray bar progress vary, B1 size remains unchanged
C- integrally with the right edge of the play bar is always fixed spacing, and size of the same
Layer structure of the entire play is this article
Playbar add Resizing
Then start to play bar add Resizing property.
For A and C, it is very simple, requires only a fixed size, and then around the pitch fixed.
Resizing A set of
Resizing set of C
Until now we have set up A and C, B has not been set, look effect.
A and C can be seen very obedient, honestly stick in their position, and does not vary with the width and height stretching occurs.
Then we started Resizing B settings.
For B, gray bars divided into inner and B1. Wherein the gray bar we do not use it to perform any settings, since B is a reference, the gray bar itself to be stretched, so we need to set B1.
The effect desired is the same size B1, the position is fixed on the left side, in fact the same as A and set.
Next, let's look at the effect of stretching after a good set of A, C, B1.
Almost there, just position B has been changing, we finally need to play both ends of the edge strip B remains fixed spacing, width varies with stretching, then it needs to be fixed at both ends.
After the above settings, we finally completed the elastic retractable music play. Only one component can adapt to any changes in the width, do not have to be repeated because of the different widths away making components, reduce workload, improve the maintainability of the document.
In our future UI design, you will encounter a variety of needs adaptive width or height of the component, which requires us to fully grasp and use the Resizing function, good control characteristics of each component, and ensure efficiency upgrade.
END
Reproduced in: https: //www.jianshu.com/p/bec04c9722bf