A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.

Make your workflow more efficient.


All Features

MenuNotesLayer |
Fix to Parent with Margin | Fix the width and height of the parent, and set the margins.
Fix to Parent Width (Height) with Margin | Fix the width or height of the parent, and set the margins.
Bounds Layer for Every Selection | Create a bounds layer from the selected layer.
Divide Layer | Split Layer.
Ungroup Shape Layer | Ungroup shape layer.
Unlock All Layers | Unlock all layers.
Toggle Layer Constrain Proportions | Lock or unlock constrain proportions for selected layers.
Select All Layers In Selection By Type | Select all groups, text, shapes, bitmaps, symbol instances, slices, exportable layers, hidden layers.
Select All Layers In Selection By Name | Select all layers match by layer name.
Select All Child Layers | Select all sub-layers.
Select All Siblings Layers | Select all siblings layers.
Select Parent Groups | Select parent groups.
Select Layers Outside of Artboard Bounds | Select and reveal layers which is outside of the artboard bounds.
Select Reverse | Select reverse.
Paste and Replace | Paste and replace, replace the selected layer with the Sketch layer on the clipboard.
Clear Layer Name | Clears the layer name and removes the "copy" after the layer name.
Remove Redundant Groups | Remove redundant nested groups.
Remove Empty Groups | Remove empty group.
Remove Hidden Layers | Remove hidden layers.
Remove Transparency Layers | Remove transparency layers.
Create / Sync Link Layer | Create a link symbol layer from select group or artboard, and update the link symbol layers.
Arrange |
Change Places Between Two Layers | Change two objects positions based on midpoint or coordinate origin.
Tile Objects | Tile objects with grid or any orientations.
Tile Objects by Position X (Y) | Horizontal or vertical tiling objects.
Tile Objects Horizontally (Vertically) by Index | Horizontal or vertical tile based on layer list location.
Arrange Objects | Arrange selected layers or artboard.
Order Layers By ... | Change the position in the layer list based on the object X / Y value, name, type.
Reverse Layer Order | Invert the position in the layer list.
Text |
Increase / Decrease Line Height | Increase and decrease line height for all selected text layers. Plus or minus half of the value that you move objects while using Shift-Arrow key, you can change the value in Preferences - Canvas - Nudging.
Increase / Decrease Letter Spacing | Increase and decrease 0.38 letter spacing for all selected text layers.
Increase / Decrease / Reset Horizontally Scale | Increase, decrease and reset horizontally scale for all selected text layers.
Split Text Layer | Split selected text layers to multiple layer, use new line and a separator.
Combine Text Layers | Combine selected layers to one layer.
Capitalize | Capitalize.
Change Baseline offset | Change Baseline Offset for selected range of text layer.
Change Text Orientation | Change Text Orientation for CJK text layout.
Change Typeface for Latin Character | Change the typeface for latin-character in the text layer.
Add Space Between CJK and Latin Character | Add space between Chinese and Western.
Replace Fonts | Replace Fonts.
Replace Missing Fonts | Replace missing fonts.
Resize to Fit Text Height | Resize text layer to fit text field height.
Unfixed Layer Name | Cancels the fixed layer name of the text layer so that the layer name of the text follows the content.
Slice |
Auto Slice | Create a slice based on layer with export preset.
Fast slice, Fast slice Setting | Create a URL-friendly slice based on layer with export preset, without modal window.
Remove All Slices | Clear all slices.
Clear All Exportables | Clear all Exportable settings.
Save/Load Export Presets | Save and load export presets.
Artboard |
Artboard Form Selection | Create a new artboard from the selection object.
Artboard Form Group | Create a new artboard from group.
Artboard to Group | Artboard to group.
Resize to Fix Height | Adjusts the artboard to fit the height.
Move Artboards to Bottom of Anther | Move artboards or symbol masters to the bottom of another one.
Export all Artboards | Export all artboards, symbols to PNG / SVG.
Export all Artboards to HTML | Export show with HTML, searchable. When using SVG format, you can drag directly into Sketch.
Symbol |
Reset to Original Width / Height | Reset to original width / height.
Reset Overrides | Reset symbol overrides in selection.
Select All Instance of Symbol | Select all instances of the symbol.
Select All Instances of Imported symbol | Select all instances of imported symbol (library symbol).
Rename Instances | Rename all instances, rename selection instances, rename instance by symbol master.
Move Symbol Masters To Another Page | Move selected symbol masters to anthoer page.
Selection to Symbol Master | Change the selected layer directly into the symbol in its original position.
Detach Unused Symbol Master | Converts unused symbol templates to groups.
Remove Unused Symbols | Remove unused symbols, for Sketch 48+, with symbol preview.
Export all Symbols As PNG | Export all symbols as PNG according to the "Page / symbol" rule.
Sync Symbol Master from Sketch File | Synchronize symbols from Sketch files base on symbol ID.
Replace Pages from Sketch File | Forcing the replacement of the same name from the Sketch file, you can import the page containing the symbol by modifying the page name.
Library |
Fix Library ID Conflict | Fix library file with same document ID.
Imported Symbols Link Manage | Link imported symbols to another library, or fix the library not found error.
Replace Symbol With Library Symbol | Replace symbol with any library symbol.
Change symbols to Library Symbol Base Symbol ID | Change the selected/all symbols to library symbol base on symbol ID.
Change Local Text Style to Library Text Style | Change local text styles to same library text style from selected library.
Change Local Layer Style to Library Layer Style | Change local layer styles to same library layer style from selected library.
Import Document Assets from Library | Import document assets like colors, gradients and images from any library.
Import Styles from Library | Import text styles and layer styles from any library.
Add Library Preview | Add a artboard for library preview image.
Check For Library Updates | Check for library updates.
Styles |
Select Layer by Layer / Text Style | Select layer by layer or text style in curret page, selected layer groups.
Paste Fills / Borders / Shadows / Inner Shadows / Blur / Text Style / Text Color | After run "Edit" - "Copy" - "Copy Style ⌥⌘C", you can paste the fills, borders, shadows, inner shadows, blur to selected layers.
Add Solid Fill from CSS Color | Fill from CSS color code.
Fill Color from Global (Document) Colors | Fill from the global (document) color fast.
Swap Fill and Border | Swap fills and borders.
Remove All Disabled Styles | Remove disabled styles in all layers of the current page.
Remove Unused Layer / Text Styles | Remove unused layer styles and text styles.
Create Color Guide | Create a color guide from document color.
Create Typography Guide | Create a font style guide from a text style.
Import Document Assets from Sketch File | Import resources (colors, gradients, and patterns) from Sketch files.
Import Text Styles from Sketch File | Import text styles from Sketch files.
Import Layer Styles from Sketch File | Import a layer style from Sketch file.
Guides |
Clear Guides | Clear all guides.
Grid Presets | Common Grid Presets, like 8x8, 10x10 etc.
Hide All Grid/Layout | Hide all grid or layout.
Copy Grid/Layout/Guide | Copy the grid/layout/guide from seleted artboard.
Paste Grid/Layout/Guide | Apply the grid/layout/guide for seleted artboards, you must run Copy Grid/Layout/Guide first.
Prototyping |
Bring All Hotspot to Front | Bring all hotspot layer to front.
Development |
Pick Color and Copy the HEX Code | Pick a color from screen and copy the HEX code.
Copy Slice as Base64 | The slice image is copied to Base64, depending on the format and scale of the first item of the slice, you can get a different image.
Copy Selected Layer Name | Copy the selected layer name to the clipboard.
Copy ObjectID or SymbolID | When you select a layer, copy the ObjectID or SymbolID of the layer to the clipboard.
Show and Change Layer Info | Show and change layer's objectID, symbolID etc.
Script Editor Setting | Script editor font and font size settings.
Edit Plugin Setting | Set up external plugin editor, default editor Atom, Sublime Text, Visual Studio Code and WebStorm.
Reload Plugins | Reload all plugins.
Utilities | 
Export Clean Code SVG | Export or copy selected layers to clean code SVG, it can ignore layers by name or type, and optimize with SVGO.
SVG Export Setting | SVG export settings.
Nine-Slice from Bitmap Layer | Crop a bitmap layer to 9 part with resizing constraint settings.
Convert Sketch File to Other Version | Go to Sketch File for any later version of 43, you can open a high version file or go to a lower version.
Show File in Finder | Open the current document in the Finder.
Open Terminal at File Folder | Open the terminal and switch to the directory of the current document.

Design Research Technique is a huge repository of design techniques for every project stage. 18F Method Cards has a collection of tools to use in a design project. Each card presents the what and why of the method, how to use it etc. This is an open source project you can contribute on Github. There are more like Medialabamsterdam with a toolkit of methods, IDEO design kit, Servicedesign tools, Hyper Island toolbox, UX Process, and Gamestorming that has several games/tools for co-creation sessions.

Usertesting.com is the most used at present but Usertest.io is showing more potential because you can test competitors as well. You can also use UsabilityHub for less complex, inexpensive and fast user testing. There are other tools for specific uses. For example, UXCam can be used for watching how users use your app and analyze the information.

Mouseflow- It helps see visitors’ behavior and fix pain points with recordings, heatmaps, funnels, and form analytics. Hotjar is a good fusion of Clicktale, Qualaroo, SurveyMonkey, Ethnio and Crazy Egg for Heatmaps, Visitor Recordings, Conversion Funnels, Form Analytics, Feedback Polls and Surveys in One Platform.

There are additional tools like Crazyegg for heatmapping, Kissmetrics to track and analyze customer behavior, Mixpanel for mobile metrics, Koncept to test prototypes.

VWO is easy to set up and test. It helps you conduct visitor research and build an optimization roadmap.

GA Experiments or Google analytics experiments framework is expected to grow into a smarter tool in the future. It enables you to test almost any change or variation to a website or app.

Reflector is a wireless mirroring and streaming receiver. It works with mobile devices, desktops and both Mac and Windows OS.

CamStudio has been around and popular for screen recording. It is free but has not evolved in the last decade. It still has an option to export at .swf file :)

The complex user journeys that used to take a long time can now be done quickly using a tool called Smaply. I have found this tool to be really good. StoriesOnBoard is a useful app for agile planning and mapping each feature in your UX project.

Coggle is a freeware mind-mapping web application. It is easy to use and you can collaborate in real time with the team.

Morae is good for focus groups and usability studies. You can record and remotely observe user interactions, analyze results and share your findings with the team. UX Check is a Chrome extension that helps conduct heuristic evaluations on a website.

BugHerd is a visual bug tracking and project management app that lets you report issues directly on a website with a simple point and click. BugHerd automatically grabs all browser data and even takes screenshots for you.

UX Recipe is a simple tool to estimate project costs based on the process steps being followed.

If you are a Sketch user, you already know that plugins are a huge blessing making work so much faster. And of course the popular Invision for prototyping and Invision Studio as a competitor of Sketch. I have tried to stick with Invision for prototypes even though there are many tools like Flinto, Marvel, Framer etc out there. Consider using Noun Project for all your icon needs. Get a NounPro subscription so that you can install its plugins and apps. Iconfinder is another option but it is not free or has a trial period. Unsplash and Pexels are useful for free stock photos. Adobe Color CC and Coolors are a good place to explore color combinations for designs. Zeplin is useful for collaboration and handoff for UI designers/frontend developers. Freeble is a good place to find design freebies created by Dribble users. Skala Preview is useful to preview designs from your Mac to iPhone to a mobile device.

There are many sites and blogs that can be listed here. But will only list a few. I am a regular visitor of GoodUI. It is a great site to learn about UX patterns and ideas. Pinterest, in my opinion, is a good place to get inspired when looking for something interesting within a subject area. Awwwards, Design Inspiration, UI Movement, and FWA are good sites worth visiting to get inspired. I have found UX Companion mobile app to be useful. It is a glossary of UX theories, tools and principles available for reference. Pttrns is a good site to look for mobile UI patterns. It does not have enough patterns yet, but hopefully, in the near future, it grows. Medium is another source of good articles you can visit. There are some design publications like UXDesign.CC, Prototypr, and Muzli I typically visit and subscribe to their newsletter. There are some Slack channels one can join. My experience has not been great with channels. Most users are students or early stage designers. The conversations tend to be basic and sometimes sharing their work for feedback. You can explore Designer Hangoutand The Designership. Smashing Magazine is a very popular design magazine worth visiting once in a while. Other notable are UX matters, UX Magazine, Web Designer Depot,

You can also follow some thought leaders like Khoi Vinh at Subtraction or Neilson Normal Group on their websites. On Twitter, you can follow Luke Wroblewski, Andy Budd, Jared M Spool, Aarron Walter, Paul Boag, Joshua Porter, Whitney Hess, Alex Morris, Nick Finckand Chris Messina.

Viewing award-winning work is also very helpful. Check out Cannes Lions, One Show, D&AD, Communication Arts, UX Awards, etc during your down times to get inspired by the best in the profession. The most important mantra to keep in mind is to keep learning. Learning should never stop to keep improving and widening the ‘T’ in your T-shaped skillset.

If we’re able to skip the less-liked parts of the process, automate repetitive activities, we can gain more time to focus on creativity and ideation. For example, Landing Pages by Viral Loops lets you save time designing a well-performing landing page. Avocode helps teams turn Sketch, PSD, XD, and Figma designs to the Web, React Native, iOS, or Android code. Futuramo Icons lets you easily personalize entire icon sets accordingly to your visual identity. FlowMapp lets you create intuitive sitemaps so everyone on your team can see workflows at a glance. I have found Trello to be very useful for collaborative planning and project management. While I am happy with Google Docs for basic needs, recently Dropbox Paper is getting attention.

Redpen is a useful tool for commenting and feedback. Shortcuts.design is a huge time saver to switch between the apps using keyboard shortcuts. Craftwork Marketplace is a great place to get UI Kits, landings, mockups, wireframes to get assets for designs. Case Study Club 2.0is a great place to find interesting and inspiring case studies of design projects. It helps designers learn from previous experience and expand their knowledge by researching on other professionals’ accomplishments and ideas.

In design agencies, design managers running the firm also have a role to play to create an efficient work environment. To avoid employees getting stressed and overworked, finding a balance and seeking employee feedback for improvement is important. Boosting morale is management 101 practice we sometimes forget when we are in a design manager position. Efficient workloads management needs the deep understanding of team’s possibilities and limitations for a design manager.

A demotivated designer cannot be innovative. Encouragement, Opening up, building trust through workshops are useful in creating a liberated workplace.

A difficult time is a testing time for any design manager. Some small tips to have the team overcome this are reinforcing confidence, recognize small wins, give credit, be thankful for contributions, demonstrating trust in employees and facilitating recognition of employees by others.

There is a trend to work late in design firms and agencies to impress the manager. In some firms, if the manager is working late, employees will too. Sometimes employees send out emails very late in the night just to impress the manager. Late night work and sometimes all night work is forced by the managers for new business pitches or to meet deadlines. This is not efficient. It will not encourage creativity. It will simply get the work done at the cost of designer’s physical, emotional and mental health. Overdoing it will end up in the employee leaving the firm for someplace better. Design managers need to change the mindset and stop thinking employees as ‘resource’ and ‘workforce’. They are human beings with tremendous creative talent and emotions. Each experience in the workplace will contribute to their creative output. Happiness cannot be bought. Increase in salary does not necessarily make an employee happy. But creating a work environment where the employee feels happy to come in every day, create, grow, learn, and leave on time with a sense of fulfillment will definitely make the firm innovative.

Time management is an important practice that each designer as an individual and as an agency should be looking into. Workplace time management is a real challenge. Emails, texts, phone calls and even snack breaks prevent us from focusing on and effectively executing a single task at a time. Pomodoro technique improves work and project productivity. I recommend Be Focussed app on your mobile device to ensure you can make use of every minute at hand.

Meetings one after another erode away time and focus on the work a designer might be doing. If meetings are scheduled at various times during the day, we are not able to provide enough undivided attention to the actual work we want to do at a stretch. Some firms have devised a rule where once a week, say Wednesday there will not be any meetings scheduled on the calendar. Additionally, employees are allowed to work from anywhere that day. Designers can work from home, coffee shop, outdoors or office to overcome cognitive rigidity.

Design thinking principles around Agile, iterative, collaborative and practical methods helps designers rethink business models and develop new products. It allows a diverse team to develop products with a quick turnaround time. This process is inspiring corporate culture in companies today based on the formula of Immersion, Ideation, and prototyping and to think like a startup. Speed and innovation need to go hand in hand to survive in the competitive world. As per Jeff Bezos, Founder of Amazon — “If you double the number of experiments you do per year you’re going to double your inventiveness.”

Innovators can use this process to not just do rapid product innovation, but also for business planning and campaign development. The lean startup model described on MIT’s ‘Deploy or Die’ helps accelerate the business transformation process. According to Gartner “By 2021, more than 50% of established corporations will be leveraging lean startup techniques”.

This design thinking is being adopted more today to break down corporate inertia and accelerate innovation. It helps stimulate employee creativity, deliver practical user-centric solutions, avoid reworking, save large sums in product research, encourages circulation of ideas and win over internal allies by including employees and their subject matter knowledge. All of these are key facets of the Efficient Design process.

Efficiency also comes with designing personal spaces. Messy desks, homes, and offices reduce productivity. Mess and disorder lead to disorderliness of mind. Designers get inspired and are more productive when workspaces are clean and simple. Designmodo has some inspiration for designers to arrange their workplace. Deskhunt is a popular destination for designers looking for inspiration to become more focused by designing their workspaces.

Designing your workspace is not just creating a pleasing visual experience. It needs to create a good experience for all your senses to allow for better focus in your work. The flow of air, lighting, sounds around you and the smells matter. Each sense of our body should be at ease in order to stay away from distraction. Creating a good environment in your workspace helps reduce stress levels and allows for more creativity. Complete silence or soothing music is helpful to help the mind focus. But it will work best if you are used to some form of meditation in your life.

It is said that the fragrance of rose removes the thorns in life. Rose is more than a flower of love. A small tip here is to use fragrant rose flowers or natural rosewater to enhance your workplace experience. It is an Ayurvedic remedy to reduce stress. The natural fragrance of the rose flower is very soothing, it calms our aggressive nature, reduces tensions to help us focus on the design work.

Rosewater, when mixed with sandalwood paste and applied to the forehead, will give relief to a headache that is a common ailment when we work under stressful environments, long hours and tight deadlines. You can try applying this paste before going to sleep and will find comfort in deep, uninterrupted and dreamless sleep that will refresh you the next morning. In the yogic traditions, people apply this on their third eye between the eyebrows. Activating the third eye chakra helps to become a designer more insightful and creative. As they say, love the rose flower and your world will turn sweet!

More firms will benefit from creating pleasing natural environments, quiet spaces or rooms and implementing meeting black-out days in the offices. Encouraging meditation as discussed in part two of this series in office spaces would create a more relaxed and open mindset conducive to creativity. The process of UX design is very much like meditation. In both, we objectively look at our thoughts, past experiences and do not get carried away. We calmly look at the problem, reflect on it and assess it before considering solutions. This clarity of mind helps us focus and find the creative spark within.

The tools listed in this article are simply tools. They do not solve problems or give ideas. These tools will only shorten the timeframe and improve the output. Design solutions have to come from the team with the designer at its nucleus. Thus designers should involve users, stakeholders, partners, internal teams and developers in the process as needed. This ensures everyone is on the same page and contributes his or her ideas, skills and feedback to the project regularly.

Hopefully, the resources mentioned in this article will help and inspire you to be more efficient and keep learning.

This article is part of a series

The idea of staying busy and working long hours is no longer considered a key to success. Designers should look at new ways to be ‘efficient’. Read part one of ‘Rethink Design’ here.

Smaller budgets, slim profit margins, increased competition globally, fragmentation of media and too much pressure that leads to safe solutions without innovation are problems designers are facing today. Read part two of ‘Rethink Design’ here.

Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show…

Over the course of two full redesigns and our recent navigation refresh, we've worked to distill most of the MailChimp interface into a set of atomic pieces, forming the pattern library you see here. By documenting and assembling a reference site of our patterns, we were able to speed up our process and solve some internal communication problems. A common lexicon of code and UI elements benefits us in a few ways:

Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.

Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.