Nowadays VR and AR industries are giving big opportunities for designers and bring a completely new experience to the digital world. Virtual Reality can quickly teleport a mind from reality to something crazy. You are in a room wearing VR helmet and boom … you are on another side of the world.

Does anybody wonder to try yourself in VR design? I think most of us. But what stops us? I think there are 2 things:

1. It is pricy. Professional VR software usually requires Oculus Rift or HTC Vive.
2. It is bad described and explained.

What if we can get started from 4$? Sounds crazy.

Basic Kit for VR Design consist of:

• Google Cardboard or something like this (preferred).
• Any smartphone with a screen bigger than 4.5″
• SketchApp, Adobe Photoshop or any other graphic editor.

Step 1. Design flat interface

Find any VR 360 photo by googling or take any of them from here.

And open this photo in Sketch/Photoshop. Further, we need to put the interface on the photo. But how should it look or what is its purpose?
Try to look carefully at the photo. If you teleported to that place, what would you do there, what would be exciting to do there?

I came up with a few thoughts and I transformed them into this interface:

I want to emphasize on 2 things:

Put a shadow under an object, it will make your flying UI live and deep.

Don’t make interface too big, otherwise, it won’t fit into your field of vision.

As result, you should have a jpg image with high resolution and UI above designed. In my example, it was 2880 × 1440.

Perfect. We are moving forward.

Step 2. Move it to VR

Sign-up at console.instavr.co/signup and go through the tutorial. I don’t recommend you to skip an onboarding. The app looks still raw.

Upload your wide 360 photo.

Choose “Web” tab and click on “Make Package” link.

In “Download” section click on “Open Hosted Page” button.

As result, you get your VR 360 photo right in a browser 😍. You can rotate a camera and take a look at the interface from the different angles.

Unfortunately, Instavr puts a watermark on each made canvas and it is possible to get rid of it by purchasing Pro plan for $299/month or 199/month paying annually.

Step 3. View on a device

We are staying in 1 step from the final goal!

Email or slack yourself a link, copy-paste into default browser (in my case it was Safari), allow autorotation in a mobile device, set a device in horizontal mode and open generated a link.

Click a “Cardboard” icon on the right top corner to switch to VR mode with gyroscope.

You may experience some performance issues like low respond or low-FPS score. I didn’t experience that on iPhone 6/7 but found an issue on some old android devices. To solve performance issue generate “Android” package instead of “Web” one.

Congratulate! Fall in love with VR? Me too! 🤜 🤛 See what we can do next.

What is next?

1. Try adding a video instead of image to InstaVR. You can found many of them on Youtube.
2. Go to professional league with purchasing Oculus Rift, HTC Vive and get a job in VR. This article contains some valuable advices for it.
3. Join my mailing list

Originally published at usabilityscale.com on August 27, 2017.

Simple guide to make your first Virtual Interface in Sketch was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

User experience is subjective in nature and it is pretty hard for designers and product managers set a right and clear goal to achieve.

The Strong designer has a benchmark of product’s UX and he measures it on a regular basis. I’ve done few steps to find the answers on “what to measure” and “how”.

1. I have discovered design metrics from different design&product teams.
2. I tried them on my current job position.
3. I made a list shorter choosing only the most valuable KPIs.

1. System Usability Scale (SUS )

Overview:

SUS provides a “quick and dirty”, reliable tool for measuring the usability. It consists of a 10 item questionnaire with five response options for respondents; from “Strongly agree” to “Strongly disagree”.

Measuring:

1. Download a template with 10 questions or create similar form on Google forms/Typeform
2. Give a questionnaire to people who know your product (at least 10 users outside your team). Remember — we need fair answers. 😉
3. Calculate results by this form and find a common value:
   (Result 1 + Result 2 + …+Result 10)/10

😕 How to make it easier and quicker? I develop my own automated tool for SUS measurements. Try it for free and tell me what you think.

Outcome:

As result, you will get one number, for instance, 65. Find your result at this scale.

And here is the most important: you can see whether your product improves or it is getting worse.

Measure product SUS once per 2 weeks and you will know the direction where your product is going to.

2. Completion rates

Overview:

Completion rates are the fundamental usability metric. A binary measure of pass and fail provides a simple metric of success. The case of usage: actions with multiple steps, e.g. registration, checkout, adding a credit card, connect this app by API to another one and more.

Measuring:

Any web analytic tool which supports funnels. I would recommend Google Analytics, Mixpanel, Kissmetrics.

Outcome:

Someone might protest me — "Funnels are for marketers". However, it was designed for marketers we are able to use funnels for our goals:

• find the bottleneck in the system
• figure out where our customers leave

Issues above give us a guide to action: speak with customers about this and simplify it right here!

3. Net Promotion Score (NPS)

Overview:

Net Promoter Score (NPS) is a metric for assessing customer loyalty for a company’s brand, products or services.

The company just has to ask their customers one simple question: “How likely is it that you would recommend us to a friend or colleague?”. Answers are assigned a score from zero to 10, with 10 being the most positive. Customers are then divided into three categories: Promoters, Passives and Detractors.

Measuring:

A bunch of tools, bur these I could recommend as simple and cheap: Delighted, Promoter.io, Starred.

Outcome:

And again someone might write me: “But NPS is NOT a design metric! It is a metric of success team!”. Here is my short explanation on this question:

Yes, it was designed for it. NPS measures the loyalty that exists between a provider and a consumer. Consumers usually are able to let a feedback for an each NPS measurement.

And you know what I found? True for internet business:

Bad NPS ratings in the most of the cases are related to bad UX and bugs

Conclusion

Setting the correct KPIs to track UX is pretty important. It helps to focus on the most important things, creates clear goals to achieve and keeps our ears open.

These metics set clear goals for UX success: SUS score, NPS and Completion rate.

In my next piece of content, I will describe how to find more specific metrics for your product: KPIs for e-commerce section and for SaaS are different and they are measured by different methods.

Wish you good measurements! 🤓

Need UI/UX Designer? Let’s work together 👉 alexkukharenko.com/contact/

3 most valuable metrics for UX & Product Designers was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

I am a big Sketch fan since I moved from Adobe Photoshop. We designers love it, seriously!

But … sometimes this app is driving me nuts. So what is wrong there?

List of issues:

1. Half pixels (For example width: 271.01).
2. With “cmd + v” Sketch inserts objects to a random position on the artboard.
3. Sketch works slowly and drive is running out of space.
4. Mess within an artboard panel.
5. Selecting of objects is painful. How many times should I click to select an object? sometimes 6.
6. Lack of collaboration.
7. I can not apply “Shared style” to the group of vector objects. (folder at the left panel)
8. Zooming. How to find zooming range that I need? 100%, 50%, 25% — poor choice.
9. When I move several artboards with “Shift” key on hold one artboard becomes unselected.
10. There is no correct pre-filled “line-height” value for text.

And I solved 9 of 10 issues. I hope together in comments we will figure out what to do with the #7.

Fixing the issues

1. Half pixels

What is a magical trick on the GIF below? Look at the values on a right side.

Solutions:

1. Set the correct preferences as it is shown on a screenshot above
2. Set a shortcut
   System preferences — Keyboard — Shortcuts — App Shortcuts — Add
   Application: Sketch
   Menu Title: Round to Pixel
   Keyboard shortcut: Control + Command + R(in my case)

Done. Go back to your project, select the top group and press a shortcut. This “Round to Pixel” will be applied to any object inside, except “Lines”, although. It does not work for them. I recommend using “Rectangles” instead.

2. With “Command + v” Sketch inserts objects to a random position on the artboard.

Solution: Use “Paste Here” option. It will arrange an object right there.

3. Sketch works slowly and drive is running out of space.

Solution: Here is an instruction how to solve it. I got 130gb free space on my MacBook, for instance!

4. Mess within an artboard panel.

We can follow the rules of the naming of groups but anyway it is completely impossible to find something while so many groups are open.

Solution: Assign a new shortcut to fold/collapse it!

Application: Sketch
Menu Title: Collapse Artboards and Groups
Keyboard shortcut: Control + Command + C(in my case)

5. Selecting of objects is painful.

How many times should I click to select an object? Sometimes 6. Then deeper that layer in structure than more clicks it requires.

Here I clicked only 1 time instead of 3. How?
Solution: Hold “Command” key when you click on an object. That is it.

6. Lack of collaboration.

We don’t have any Sketch solution out from the box that just works. However, we have some good solutions from Craft and Picnic Plugins.

Sharing sketch files with the colleagues is just bad. These guys are developing good solution — auto syncing with sketch files in real time! Unfortunately, plugin is still under development. Waiting for a beta!

Solution: Craft already has a solution to move discussions into good workspace.

7. Can not apply “Shared style” to the layer’s group.

Very often I need to apply new color for SVG icon wich stays somewhere in a deep into group or I want to apply the new Shared Style for each icon inside a group. In current condition, shared styles can not be applied to the layer’s group. Very sad.

Send a comment you know how to fix it, dear friend.
Not solved yet.

8. Zooming.

How to find zooming range that I need? 100%, 50%, 25% — poor choice.

Solution: There is a shortcut for it, indeed. Hold a “Command” key and use mouse scroll. It will zoom-in or zoom-out by 4% on an each step.

9. When I move several artboards with “Shift” key on hold one artboard becomes unselected.

The reason for using it — each time when you hold “Shift” and move artboards by mouse they move only vertically or horizontally. It helps to move things in strong order.

Solution: Select the artboards, click and hold on artboard name (like on a screenshot below), hold “Shift”. Drag them around.
It works.

10. Sketch doesn’t fill “line-height” value for text correctly.

With each newly added text layer, you may notice that line height is not good for reading. We have to count each time a formula — text size * 1.5 = good line-height. For example: 14px * 1.5 = 21px.

Solution: There is a plugin for it, and it is awesome!
Press Command + L to set the line-height ratio.

The final word

Overall, Sketch is a great tool yet not perfect. But nothing is perfect on this world, right?

By the way, I am open to new projects. Let’s work together 👉 alexkukharenko.com/contact/

10 annoying issues in Sketch and 9 easy solutions for them was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Purpose of rapid prototyping

Why do we need the prototypes? We need to check and validate the concept, test our hypothesis and prevent future mistakes. All of it happen before the development stage and it saves a lot of time, money and efforts. The concept of rapid prototyping tool means — “Make prototypes for apps as fast as possible”. That’s a general purpose.

Question

In these terms, it is pretty important to know which tool is the fastest one has better features for colaborating. Many people are asking: “Which one is better for it? InvisionApp or MarvelApp”. It has to be proven — I conducted an experiment.

Experiment

Idea was to make the same prototype 2 times: the first time in Marvel App and the second time in Invision App. I prepared 4 mockups with a lot of links between screens, turned on a screen recording and started to build the prototypes. It was funny!

And I got a result!
Marvel was 1.6 x times faster for building prototypes than invision app (40 seconds vs 65 in InVision).

Ok. Wait…but why?

Both of tools use global hotspots. Global hotspot is a linked area which is visible on the multiple screens. Marvel App has better UX for setting up new hotspots. Marvel asks only necessary questions, does not interrupt the flow, shows nice previews of the screens.

Difference in applying new hotspots

Marvel App(on the left side) allows to duplicate any link on the multiple screens. Also it is possible to combine the hotspots as you want. It makes managing of them simple and flexible process.

Invision App uses a concept of templates for the hotspots. Creating of hotspots is a tedious process, each time app requests (so annoying!) to select the template from a dropdown list. But applying already saved template is better and faster process.

Colaboration

Comments and invitations are available for both tools in the free plan. In Invision collaboration goes smoothly and predictable: just one click by an area where you want to leave your comment and field appears.

Another cool collaboration feature from Invision is Liveshare. You can collaborate together with your colleagues, create notes, draw, make a voice conversation in a browser and connect to a call from the normal phone. Impressive!

Marvel app supports basic collaboration things like commenting and inviting. It does not support a voice and making drawings.

Marvell has less developed collaborating functionality comparing to InVision. But I can get it: InVision has already acquired 134M in 5 rounds instead of 8M for Marvell. InVision is able to put more efforts in different directions.

Syncing with Sketch

Both apps have sketch plugins. There is no noticeable difference between them.

Pricing

Minimal comfortable plan for InVision is 22$ per month.

But a minimal comfortable plan for Marvel costs … nothing. I have already around 15 projects and it allows me to create more, although collaboration is enabled for first 3 projects only. That’s fine for a small team.

Let’s summarize what apps offer us in a free plan:

InVision

• 2 Projects
• Colaboration ans commenting
• Invisin Inspect, Boards
• Integrations: Sketch, PS, Basecamp, Trello, Jira, Slack, Teamwork, Hipchat, Flowdock

Marvell

• Unlimited projects
• Commenting of 3 first Projects
• Integrations: Sketch, Slack, Box, Asana, Google Drive
• Explore (described bellow)

What else?

Explore fom Marvell

You can browse shared prototypes, inspire by works of others, find good examples of interaction — kind of dribbble for prototyping. Although keep in mind that both of these tools don’t support advanced animation. It looks very basic.

2 extra features from Invision

Inspect

There is a direct competitor of Zeplin — preparing the visual assets and collaboration with developers. Given values — easy measurement of dimensions, getting basic CSS, comfortable way to store all these @2 @3 files.

Boards

Moodboard. Every time when I hear “moodboard” this guy from Silicon Valley season 3 appears in my mind.

But talking seriously Board in Invision is a place where you put your png files, colors, samples, fonts and it looks awesome. Yes, that’s it.
Why do we need it? It helps to store and organize inspirational content for projects with dropbox and google drive syncing. Something else? I would not recommend it for branding assets. Frontyfy does it better.

Conclusion

I would recommend InVision for teams with more than 30 people. It has strong features for commenting, collaborating and delivering designs. Product envolves very quickly.

I would recommend Marvel as a prototyping tool for a small team, for a single designer in any size team or for those who has a deadline in 2 hours.

I just realized: I have done my prototype in Marvel with 35 screens and it took me 1,5 hours. The same in InVision should take approximately 2 hours 25 min. It saved 54 min for me. It worths to try.

Enjoy the rapid prototyping, designers!

Update

Victor Tademos mentioned a good thing in comments:

I’d like to add a point: usability test. We tried Invision and I strongly not recommend it. We had about 30 screens on our prototype and then when we tested on a mobile phone it was a disaster: a lot of delay, broken links, links appearing in a different position and more. Even using Invision app for mobile. We want to try Marvel for usability tests next.

And it reminded me my horrible experience: When I worked with InVision closely (it was a prototype with 35 screens) sometimes applied hotspots didn’t take place correctly, some screens were stretched. All these annoying things forced me to spend twice more time.

Prototyping fight: Invision vs Marvel was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Last few years we have seen few robust tools which have transformed our past workflow into something better: Zeplin, Invision Inspect, Simpli. Today I want to introduce you one more tool: Marketch.

Why it requires our attention:

• It’s free
• Works offline
• Extremely fast
• Supports web and mobile platforms (shows sizes in px, points, and dp)
• Generates css
• Exports all images in different sizes (1x, 2x, 3x)
• Developer doesn’t need to have Sketch App

Installing

Download repository as ZIP file and install marketch.sketch plugin by double click.

Export styles from Sketch

Select artboards, confirm the settings and choose a folder where generated files will be saved.

It creates a project’s folder with the assets inside.

Work in Marketch

Open index.html file. Interface consists of 3 columns:

1) Left navigation sidebar

It contains all the symbols and artboards that were exported.

2) Content section

Here you are able to work with your mockup and measure some dimensions:

• height and width of selected (clicked) object
• distance between objects

3) Styling sidebar

This right sidebar contains CSS details of selected object.

In general it generates clean and simple css code which is able to handle a lot of annoying and routine work. But I can’t call Marketch complete solution and I will explain why.

Testing on a real example

Let’s examine how it will help us to write CSS for Password input field.

Let’s see what is missing and has to be added to CSS file:

• Need to mention margin values.
  margin: 12px 15px 12px 15px;
• Need to mention input’s type in HTML form. In this case all characters will be masked as asterisks *:
  <input type=”password”>
• Set a different font style for placeholder and text
  ::-webkit-input-placeholder {color: #ccc;}
  font-color: #5c5c5c;
• Add a focus state. We can generate a CSS code for it by Marketch also:
  border: 1px solid black;
• Unfortunately this basic styling will not look the same in different browsers.

This tool for you if:

• Your developer hates Sketch App
• You hate writing of annoying CSS ( that’s me!)
• You are a mobile developer and you hate of calculating sizes.
• You create living styleguide

In conclusion:

As the expected tool doesn’t allow to make HTML layout with 1 click but it can help a lot for designer-developer collaboration. Besides, it’s a great thing for creating living styleguides! Nowadays we are going to living styleguides only and all those sketch and PSD styleguides feel pretty old.

CSS exporting from Sketch — Marketch Plugin Review was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.

Shot on Dribbble

Prehistory

Last year many designers noticed a huge trend to animate mobile design and to present it in a nice perspective look. I thought: How do they do that?

I knew exactly, that it would be possible if I moved all UI assets to the After Effects and then animated it there. But that’s ridiculous! I was not going to spend hours to receive a nice gif animation without an opportunity to open a prototype on the device.

So, I tried to find a way (it was a wrong way):

• I made a UI design in Sketch
• I moved a sketch file to Flinto and made it interactive
• I had a .mov file which I converted into a .gif one
• I added the .gif file to Photoshop
• I applied the “Free transform” tool for the .gif to change the angle of UI

Thus, I got a blurred gif file with the unsharp text. “What the hell? How do other guys do that?” — I thought. And I turned my efforts to get more insights from more professional interactive designers than I am.

During my unsuccessful research, I faced with a fact that plenty of designers don’t know how to do it!

The last drop in my sea of despair was the conversation with a designer who knew exactly how to do it, but he was silent.

I wondered how I could find a way to share the solution with a community and to shed some light on the problem. And I found it out! Turn on your coffee machines — we are going to work!

Preparing a software

You have already almost everything you need (if you are UI designer):

1. Sketch — a tool for making design + this plugin.
2. Flinto or Principle — prototyping tools which help to record a video of interaction. Flinto has 14-days trial and allows to open the prototypes on the device.
3. Adobe After Effects — powerfull video editing software. It will help to move recorded video onto a device’s mockup. You can get a free trial version by this link.
4. Adobe Photoshop — tool for making gif files.

Making a design

Prepare a mockup in Sketch. Keep in mind that if you want to try yourself in the interaction design you need to prepare several screens or 1 screen with different states. I took my design of onboarding process from ZeTour App, where I am a co-founder.

Making a prototype

Export your screens to Flinto by “Send to Flinto” plugin. To do it choose the artboards on the left side and run a plugin (Plugins — Send to Flinto). We have to export artboards in high resolution only. I export my design in 2X resolution for iPhone 7 and get 750x1334 files, for instance.

I used this tutorial to animate my design. If you aren’t an experienced user of Flinto, try another tutorial.

I recorded my interactions by using recording feature in Flinto and saved a file as .mov.

Locate a video inside a device’s mockup

Before we go to After Effects you need to download device mockup in PSD format (that one, for instance: http://bit.ly/2fCvKXI). I would recommend to use PSD mockups that contain only 1 view of the device, otherwise After Effects will ask you which folders to merge.

Open After Effects and create a new project. Switch workplace to “Effects” view (Window — Workspace — Effects) and drag your .mov video and device mockup to Project panel.

And then drag a .mov file and PSD mockup to the “Timeline” panel. You will see this result:

Most of the work will be done in “Preview” workspace. Before we go further, we need to change a composition’s resolution. You can get “Composition Settings” by clicking the right button on a composition item and by applying settings. I wanted to use this prototype as a gif shot in dribbble and to set up 800x600 px resolution.

Done. Let’s then continue with the preview panel. Did you notice that our preview window become smaller? Select a track on the “Timeline” panel and step-by-step change the size of the layers so that they can fit into the nice shot. Pull the corners to resize the object and use Shift to leave it without distortions.

We come up to the most interesting part of this story — we are going to put a video into the device. Click on the video layer and choose the Corner Pin effect (Effects — Distort — Corner Pin). And, then, carefully put the video’s corners on the device screen. Don’t hurry, this step demands accuracy.

Disable the “Timeline” panel, if you have a small screen (Windows — Timeline). As soon you complete, press a Space on keyboard to see the result. The first loop will slowly render the video, but the second one will play smoothly. I don’t know how you will react, guys, but the first time I have done it, I was dancing!

Hint!

You can continue playing with that PSD file. Once you save the changes, it will be applied to the After Effects project. I decided to change the background of the mockup in Photoshop and it was instantly updated in After Effect. I appreciate the Adobe ecosystem.

Exporting

Select a composition and go to File — Export — Add to Render Queue and a new tab will be added to the bottom panel.

Click on the dropdown icon near “Output Module” and choose “Custom” item there.

Choose “Quicktime” as a format, and click on the “Format Options” button. Find H.264 video codec in the list and choose it. Then, press OK twice and click on the blue “Render” button.

Getting a GIF

Make one more render but with another setting (choose “Photoshop” in output module). Files will be saved on the Desktop in the folder with a name of Project.

Go to Photoshop, find _00000.psd file, open a PSD as a sequence and choose a frame rate. I had a 5 sec video, so I decided to use 30 frames per second. Try to make your gifs smaller than 7 MB.

Press Shift + Option + CMD + S to get “Save for Web” window and choose these settings:

• GIF
• Adaptive
• Colors: 256
• Transparency: On
• Quality: Bicubic Smoother
• Looping options: Forever

Result

I am fully satisfied with this result. It was hard to find but easy to achieve. Everybody who is able to make a design in Sketch can repeat this path and make his own creative animation.

Happy end

I feel happy for 2 reasons:

• I found the solution
• I can share it with designers

Wish you luck with After Effects!

PS

If you need a kick-ass UI/UX, I am open to new projects. Let’s get in touch alexkukharenko.com/contact/

Complete guide for making animated perspective design or story that nobody wanted to tell me was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Last few weeks I have been working with a huge .sketch file which contained 35 artboards inside and faced with a problem that everything has been working very slowly and buggy.

At first, I had to look into google and found one way which could help me. I found out that each Sketch App saves a lot of copies of your ongoing projects and each your ⌘ + C makes one more copy. It leads to 2 consequences:

• These projects clutter up your disk space
• Sketch App works slower

Step 1 — be surprised

Check the size of the folder. For the beginning run a command in Terminal:

sudo du -sh /.DocumentRevisions-V100

Actually, the disk space becomes filled up rapidly. I noticed, that it was added at least 1 GB to that folder each day.

Step 2 — show hidden files

Run this command in Terminal. It will allow you to view hidden files.

defaults write com.apple.finder AppleShowAllFiles YES

And relaunch a Finder (alt + right mouse click on finder icon). After that yoy need to go to your hard disk (default name is “MacintoshHD”) and find “.DocumentsRevisions-v100” folder.

Step 3 — set a permission

Change a permission at first:

Click on a folder and choose “Get Info”. Now unlock a permission section and set these parameters. Before you leave, choose “Apply to enclosed items” option.

Step 4 — cleaning

Go to .DocumentRevisions-V100/PerUID and delete the file there.
Additionally, go to /.DocumentRevisions-V100/.cs/ChunkStorage and delete all the files there.

Step 5 — return the settings

Set permission for the folder again and run a command:

defaults write com.apple.finder AppleShowAllFiles NO

Step 6 — reject Sketch to do such things

Unmark a checkbox “Auto save files while editing”

In conclusion:

Your Sketch will work a bit faster and you will get some free space. Some ... hundreds of GBs. This small trick is really precious for designers with 128GB SSD. But then I decided to return to autosaving. I would rather clean that folder once per month than miss an opportunity to use autosaving.

I have a lot of ideas to write and explain in next few weeks so follow me! Thanks for reading.

If you need a kick-ass UI/UX, I am open to new projects. Let’s get in touch alexkukharenko.com/contact/

Join us for more on Sketch and other prototyping tools.

I made my Sketch faster and got 120 GB of free disk space. How? was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Update from June 2018:

From recent updates Craft removed the this feature. Now it is a part of paid ‘Design System Manager :(

Once I was looking for a hot key which might help me to fold all the folders at the left artboard section. But pressing wrong keys I have found something more useful — the shortest possible way of generating style guides. And … that’s literally just a hotkey: SHIFT + COMMAND + c

You should have Craft plugin to run it. My environment is: Sketch 48.2 and Craft 1.0.45

So, basically, Craft plugin creates a new page which calls “Styles”. You can return to your ongoing design by choosing the top page from the list.

The styles page consists of 3 artboards:

• Color palette. It contains samples of all your colors (including fonts), their #HEX codes and RGBa Codes. Additionally, you may add a name for each color, e.g. “Magic blue”. Front-end developers will definitely respect you.

• Fonts. This is a list of typefaces which you use for this project.

• Text styles. Craft tries to do it the best way and puts your fonts in order of H1-H7 (but sometimes it needs more attention). Besides, it has these fields: typeface, font size, line height, text color.

In Conclusion:

We know that except of fonts and colors we need to put forms, buttons, lists and objects into the style guide. But this feature helps us to generate the general stuff in seconds. Thanks Craft for it.

How to create a design style guide in the sketch in 3 seconds was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.