Sketch Practical new skills

as the current product prototype Design ,Sketch is especially suitable for mobile apps and responsive web design development. Let 's take a look at some of Sketch's getting started guides and how to use the Mockplus plugin for interactive results.

< Span style= "FONT-FAMILY:CALIBRI;FONT-SIZE:16PX;" > Sketch mac Photoshop sketch sketch Design product prototype craze, because it is easy to draw a design manuscript, compared to Axure

as a weapon in the prototype design of the present product, Sketch is particularly suited for the design and development of mobile apps and responsive web pages. Let 's take a look at some of Sketch's getting started guides and how to use the Mockplus plugin for interactive results.

First, artboard

< Span style= "FONT-FAMILY:CALIBRI;FONT-SIZE:16PX;" > installing sketch Click on the Golden Diamond Icon is a vector-based drawing software, without the concept of a traditional canvas, the entire white space can be created, but in fact we also need a " frame " design limits our design, in the Skech this thing is called artboard app interface as a artboard artboard

specific operation, in the upper left corner of the interface, click Insert, pop-up menu select Artboard, the mouse becomes a cross, you can freely drag, the right side of the property panel is also accurate to set the size; In addition, select artboard , the right column will also provide default dimensions for some common devices, and click to select the appropriate ones.

Second, the component

Sketch has a rich library of materials, including native controls on Android or IOS, and we can simply drag the parts we need to artboard to save a lot of time, So that we can use the time freed up for more core product design thinking.

Clicking on the file-new from template in the menu bar will show you the five most common platform or design-style templates that you can select when you open them. Here's a tip:artboard the size of IPhone6 or 7 by default , so the size in the IOS app icon doesn't have to be adjusted and dragged directly.

If you want to reuse components quickly, you can also turn components or modules into Symbol, which is similar in nature to the master in Mockplus, allows us to reuse a set of content across multiple pages. Select the desired component and click Create symbol .

fonts and layers also have the same need for reuse as components, and in a single design, it is tedious to adjust each element individually . The " Text style " in Sketch can solve this problem, similar to the function of the format Painter in Mockplus. According to the need, a set of their own commonly used style specifications, will be shared style text, where needed to directly reuse can not only improve efficiency, but also to ensure the overall aesthetics.

Third, scalability

< Span style= "FONT-FAMILY:CALIBRI;FONT-SIZE:16PX;" > sketch > One of the biggest features. sketch Open a third-party plug-in interface, designers can easily find in hundreds of kinds of plug-ins suitable for their own way of working, all for the designers more convenient and efficient work.

However, it is important to be clear that Sketch produces static visual manuscripts, no dynamic interaction, no teamwork and labeling, and interaction is the soul of a prototype, the most intuitive way to show prototype logic and thinking. Combined with Mockplus, you can easily turn the design artwork in Sketch into an interactive prototype by installing the Mockplus plugin in Sketch . In the Mockplus 3.2 release, the Sktech design document is supported as a Mockplus MP project file so you can publish it as a cloud project and easily leverage 8 Preview to demonstrate your prototype project, or you can upgrade to a team project to collaborate and annotate with small partners.

in addition, Mockplus 3.2 version also supports the instant generation of flowcharts and brain map design patterns, with the use of Sketch will make your prototype design less! Click here to learn more about the 3.2 version:mockplus 3.2 -looking, five features to surprise you!

Source: Network

Sketch Practical new skills