10 help you with UI design speed-Sketch using tips

Choose to use sketch reason a lot, because of curiosity to install the students should be a few, see the introduction feel powerful and installed should also be a lot. Of course, if you are a ui/Web designer, your Mac and I feel like running PS overwhelmed, then sketch will definitely help you solve problems, from the cotton and the omnipresent progress bar.

More and more designers began to choose to use sketch design Web page, UI, development team Bohemian coding credit to the Wei. While the software that continues to iterate is still a lot of bugs and has not yet fully replaced PS in functionality, it has been able to gradually reduce the frequency of using PS as a bloated software.

New software, many features are not too handy, the design of an interface may be more than the time spent on PS. So it's very important to control some practical tips. Even if you are a sketch novice, the following 10 tips can help you save a lot of time.

　1. Choose a reasonable size for the artboard

Okay, well, it doesn't seem like a high-end technique, but in sketch, the artboard is very practical and easy to use. Sketch provides a very large number of preset artboard sizes (or is it a UI design artifact? This software is designed for the UI design!), you only need to click a button, you can select the artboard you need!

　2, to handle the grid

Using raster systems to design UI and Web pages is a frequent technique, in sketch you just have to select View (view)-> Layout settings to quickly configure the layout, or use the Ctrl+l shortcut to invoke the default layout.

　3, a few seconds to quickly copy ... Any thing!

This functionality is often used in AI and PS, and sketch developers are fully implemented in this software. You can hold down the option key and click the element you want to copy to drag. When you drag the element to the area you want, and then use the Command+d shortcut key, you can copy the action.

Note: If you find that you are unable to operate, you can go to the preferences (preferences)-> Layers (layer) to unlock pasted & duplicated objects (Paste & copy object) option.

4, distance measurement

If you want to design a fine piece of work, be sure to have all the details at your fingertips. If you want to measure the distance between all the elements on a page, just select the element and hold down the option key. Next, is your own OCD time ~

　　5, the use of shared style, you will benefit from

If your project has more than 100 pages, and the project review has been advanced to the third round. See the end of the date to come, a wonderful flower party a late call to you: "We have all the buttons are changed to blue how?"

Okay, let's not rush the table and hit the phone. Dozens, you can say "OK" because you can use the shared style to handle these buttons. When you create your UI elements, for those that you want to reuse, you can click "No Shared Style" on the left menu to bring up the menu, and then give the style an unforgettable name and then apply it to more UI.

　6, "misuse" symbol (symbols)

The symbol, also known as symbols, is a very useful feature in sketch, although it may seem a bit of an abuse trend, but it's really helpful.

If you design a UI that has many different states, mode or option, you can set a single screen as a "symbol", then click the "Convert to Symbol" button in the toolbar, and then copy the symbol on the artboard and create the different states you need, The only thing you need to do is add the symbol you set (Insert-> symbol). When you change the elements in this symbol, all of the screens will be updated at the same time, which is definitely quick enough.

　　7. Drag them when drawing graphics

This is a super practical technique. When you are drawing a graphic, for example, you want to draw a circle, but it is difficult to draw it once and put it in the right place. However, if you press the Space button during the drawing process, you can move it to the right position immediately after it has been created, and then continue sizing.

　　8. Rapid change in transparency

This function should also come from PS, although many people do not use it too much. When you want to adjust the transparency of an element, you do not have to adjust the progress bar slowly, you only need to use the number button (1-0) to set the transparency, such as 3 is 30% transparency.

　　9, the use of "proportion (Scale)" function

Most of the time, the UI elements you create do not necessarily match your needs, and they are normal when you are big or small. For example, you set a edge radius of 20px, Border 4px button, if you direct mouse drag and drop zoom, I am afraid the effect will not be ideal. If you click on the "Proportional (Scale)" button, so to adjust, the effect will be much better.

　　10, make the most of your work space

Everyone is carrying a notebook to work, but almost all the software in the notebook display, feel the screen space is not enough, but not all the time is just a screen to help you output the screen content, this time, you need to use the screen space. If you want to hide both sides of the menu bar, click on the ctrl+option+cmd+3 key combination, if you want to hide the left or right, the shortcut keys are ctrl+option+cmd+1 and ctrl+option+cmd+2.