What are /r/sketchapp's favorite Products & Services?

From 3.5 billion Reddit comments

I use Abstract and honestly I don't know how I ever got by without it. Basically GitHub for sketch files: Version control and collaboration. Sketch files are saved locally while working and then on the cloud once you save changes. I manage the design of an app with well over 20 unique screens and keep things organized by having one sketch file for the component library & styleguide, one for screens splits into many pages, and one for mapping user flows. As far as performance issues, you need to reduce the use of high res images in the sketch files as much as possible to keep file size down. For handoffs Zeplin is a lifesaver, let's developers view sketch files, export assets if need, grab color pallets, even generates css styles.

I honestly couldn't imagine using life without it at this point. Here's a little video I made a few days ago showing another team member how I use it for our design system — https://www.loom.com/share/214aa958d9ee4ca3b0e7a7cb028c49dd

I realize how silly it is to even need to hack this together, but its not currently possible to do with simply a background shape or symbol background color.

The technique uses Sketch's "feature" where it will adjust the placement of an element directly proceeding a text layer set to auto size, along with a really wide drop shadow and a mask.

I used it to accomplish this library (https://dribbble.com/shots/4441335-Redline-Helper-Symbols-sketch) which wouldn't be possible otherwise.

Direct link to example file: https://dribbble.com/shots/4549814-Label-symbol-with-dynamic-background-technique-sketch/attachments/1029381

First, I would say that a prototype is an impermanent thing that you make to answer a question like "do people know to click on this button when it is in the left corner." So the design you use should be to solve that question. Your developer probably won't care about the layout of your prototype as you will usually need to update your designs based on the feedback of the prototype. I design for the device I will be using for the testing. No need to overcomplicate the designs by making them scale to different sizes.

But if you are building mocks and a design system to give to the developer then you should sit down with them and any other key stakeholders and discuss what you are building first. Are you going to build for Android and iOS, or just iOS? Then determine what os you will support and what phones. iOS is great for backwards compatibility so I would design for the smallest phone possible at the beginning. Make sure all of your content can fit in the least amount of screen size. For iOS, this is 320dp. That means in sketch create artboards that are 320 pixels wide. Do not make artboards at native screen resolutions. Its way simpler to design at 1pt = 1 pixel and then export everything bigger later. When you start to build out the components of a view, a header for example, think about how the elements of that component relate to each other and how their position would change if the screen got wider. Don't worry about taller since everything is usually in a scroll view. Decide whether things should be absolutely positions to corners, or move based on percentages, or scale as the component scales to fill the view.

Here is a link to how sketch allows you to build a constraint based layout:

https://sketchapp.com/docs/layer-basics/constraints/

Where are other user stories documented for the devs?

We use TargetProcess for user stories and tasks. In the stories, I place links out to Invision for the mockups / prototypes.

Sorry I don't know of any great videos / tutorials but I'll try to help a little.

> If I align things to the left-most column's leftmost edge, won't that be right next to the viewport's edge then?

It depends on the project, but in Layout Settings I typically check the box that says "Gutter on outside". This prevents that issue you pointed out about slamming content right on the left wall.

To address some of your other questions about generally designing on a grid, there are some resources I'd recommend reading to get started with an idea of how people (specifically developers) tend to think about content in columns.

https://material.io/guidelines/layout/responsive-ui.html# http://foundation.zurb.com/grid.html

These are 2 examples, there are obviously many more.

Are you doing a responsive web design? Mobile app? Desktop app? Are you designing on a 12 column grid or something different? There are no hard a fast rules, but consistency is key.

I don't think Sketch prototyping is that far along yet. I would recommend a dedicated prototyping tool for that, like Principle or Invision

It sounds like you want to build an interactive prototype maybe? I'd try InVision if you haven't already. It integrates with Sketch so you can hook it up to a .sketch file and have it sync automatically.

https://www.invisionapp.com/

https://gumroad.com/l/sketch-symbols-manager

​

10 bucks but it'll legit change your Sketch life. Tells you which symbols are unused and shows your whole symbol structure as folders like in Finder. Now I don't have to rename a million symbols if I've changed naming convention, or I want them under a different category. It's an awesome quality of life plugin, and really really should be a feature of Sketch by default.

So I did look into it a little further, and Mailchimp does allow for an HTML export of any templates you save.

Not sure how well that code would translate if I were to use it as the "programmed version" in another client. I don't have the ability to test that currently.

https://mailchimp.com/help/export-template-html/

Interesting... I did some poking around and tried disabling SmoothMouse (http://smoothmouse.com) and the problem went away. There's still a tiny bit of jank while dragging objects, but it's at least around 40-50 FPS now.

I think this is what you need: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

EDIT: you can eighter design in 414x739 and then render at @2x and @3x or you can design at 1242 × 2208 adn reverse the export. But the proportions are different, so you might need to re-align few things

There are plugins for this. Sketch Measure is one of the more popular ones.

https://github.com/utom/sketch-measure

Zeplin is also designed for showing specs. It's in beta right now, but product hunt users can get in through this link

https://zeplin.io/product-hunt.html

I opened your file and seen to be all ok with your setup. I resized it and everything was working without distorting the check mark.

​

I saved a copy of your original file, try it and see if will work: https://monosnap.com/file/KOBRqS3Yx8reieTzdpvzk4wqWVQCaC

Hi, I tried here creating a symbol and pinning a element to the right, just like you did, and i work for me, are you running the latest version of Sketch?

​

Here is the file I created for the test: https://monosnap.com/file/FHKuJtZOO7Fcf8gcq9tW9KYpbATeFD

Teehan+Lax typically have some good tools. The only Sketch components they have right now are for iOS 7, but that should cover a decent amount of the controls you need.

And here is another iOS 7 Kit from Dribbble. Hope these help!

When you open up Mirror on your device the option to connect to the device will be prompted in the upper right corner of the window, such as Library or Plugin updates.

See: https://sketchapp.com/docs/mirror/

I recently released a series called The Sketch Course

https://www.youtube.com/playlist?list=PLLnpHn493BHHUaj6JcNbGC9_7dM8Utf9W

Other than that, I'd recommend the official docs if you are looking to read.

https://sketchapp.com/learn/documentation/

Lol that’s not the first time I’ve been called that. Here’s some word vomit:

Being web-based means you finally have a single source of truth for your designers, copywriters, developers, and vendors. There is no saving files. There is version control built in. You can view Figma from any browser (Mac, PC, Linux). Multiple people can work on the same file at once, much like google docs. You can connect your files to create a team library of components (like symbols, but better). You can even embed your files into websites. Performance is somehow better (remote compute power?). You can prototype. You can generate basic code.

One of my favorite time saving features is Smart Selection. https://www.figma.com/blog/organize-photo-galleries-presentation-slides-and-more-with-smart-selection/

I probably wouldn't recommend Sketch for drawing comics. Sketch is more geared towards UI design. I've heard great things about Affinity Designer and would be a good low cost alternative to Adobe Illustrator. https://affinity.serif.com/en-us/designer/

I personally enjoy using Principle for animations. I'm not the biggest fan of having animations being done in Sketch because it often does not perform well. Principle is nice because you can export your animated prototype as a Mac .app file for other teams to play with.

I already gave it away. But actually, it's pretty simple to get one yourself. This way definitely worked for me, although it does take a few days.

1. Sign up for a trial at https://teamtreehouse.com. You will have to put in a credit card, PayPal, etc. but they will not charge you until after your free trial ends (1 week I believe). Check your My Account section to see when it ends. Just cancel before then.

2. Once you have signed up for a trial, go to Treehouse's Perks page (https://teamtreehouse.com/perks) and request the Sketch discount there. All you have to do is put in your email address in the Sketch section.

3. Treehouse will email you in 3-5 days with the code you can use on the Sketch purchasing page.

That's all you have to do. Just make sure to cancel that Treehouse trial in your My Account section after you get that discount code to not get charged for a subscription!

Invision includes UI documentation automatically through their Inspect tool.

If your devs are already used to JIRA, and you're in an Agile environment, I'd probably create user stories there as well - right along side their bugs and stuff (not in Confluence).

If you're in a waterfall environment, then I'd just document things however works best for you. Confluence might be best, or it might be Word documents.

The first two screenshots here are what I was describing: https://play.google.com/store/apps/details?id=org.mozilla.focus&hl=en&referrer=utm_source%3Dgoogle%26utm_medium%3Dorganic%26utm_term%3Dfirefox+focus&pcampaignid=APPU_1_Fc23WfH-OYSMmQGB47WABw

Try these plugins https://gumroad.com/peerjollux

If you buy all three (symbols, layer styles, and text styles managers) it becomes pricey, but for me it was totally worth it!

The guy is working on an all-in-one plugin which is currently in beta. You will be able to reuse your existing licences for it.

It’s a pain but once you’ve done clean ui kit, it’s no more a problem. I use styles master : https://github.com/aparajita/sketch-style-master.

I would like try style manager before buying it. https://gumroad.com/l/sketch-shared-styles-manager

Hey, I'm working on a small project that looks at this (https://www.producthunt.com/upcoming/tugboat-app). I'm curious, what are you hoping to achieve and what have been your pain points that prompted you to look for solutions?

As for Sketch to React workflows — I've worked in product teams (I'm a React dev) where you'd design in Sketch, export to InVision/Zeplin, hand over to development and visual QA. Of course, my reason for investigating this area is because I feel we can continuously make this better.

Reinstalling the Roboto fonts from here resolved the issue on my end.

Source

Update: I got help from Sketch Support and had to perform a clean uninstallation of Sketch. They asked me to use the free App Cleaner software (https://freemacsoft.net/appcleaner/) to do that.

IT WORKS NOW, no more bug.

Before doing that however, ensure your problem does not come from any of your plugins: starting Sketch while holding SHIFT will run it in safe mode i.e. will turn off all plugins temporarily. If your problem persists, then try App Cleaner...

I went a few steps further and cleaned all the files associated with Sketch and used appcleaner to do that. App now works fine and I don't have that annoying problem.

https://freemacsoft.net/appcleaner/

I've used an app quite often in the past for the same purpose, but with PSD files : https://www.pagelayers.com/. Maybe HTML -> PSD -> Sketch could work out well by adding Avocode to the mix : https://avocode.com/convert-psd-to-sketch.

The iPhone 6 Plus is a bit weird. It uses @3x assets and has a resolution of 2208x1242, however that resolution is scaled down to 1920x1080. This website explains it: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

The best way is to design at 1x and then export the other sizes. The main reason for that is that you're getting rid of the half pixels since everything scales up perfectly. Then you can use tools such as Zeplin or Sympli to deliver assets to the developers and not worrying about other densities since these tools export that automatically.

I personally start designing for iPhone 6 at 1x. I'm constantly testing the design on a device while designing. Sometimes you'll have to design a screen for smaller devices as well (iPhone 4/5) since the content may get a bit squeezed. Usually it depends on what size are you targeting. So if you're targeting iPhone 6 then you should start by designing iPhone 6 and optimize for other screens.

In my experience, this is not a bug, this is more of a color contrast limitation and it will happen in other apps like Illustrator or Photoshop too.

A way to make it look better is adding noise to the dark background or toning the shadow, making it darker.

On the macOS x for example, Apple use some kind of effect that add noise to the shadows, but I'm not sure how to make this effect with Sketch.

​

Here is a screenshot from Finder shadow with the noise: https://monosnap.com/file/KBSp3yf8i6VWeElEP0E377W0qFgCOa

​

Hi.

You can turn the pixel snapping in the Vector tool settings, to do so, do the following steps:

1 - Select the Vector tool in [+] button in your toolbar

2 - on the inspector panel (far right of the Sketch UI) you'll see a dropdown button with the snapping options (see in the screenshot)

https://monosnap.com/direct/80b3GFuAtJTQAaWo5TtFCzUa0pkm0S

This will affect all tools, not only the Vector tool, so no matter what you use, the snapping will be off

As long as they can see the designs and resources I don't understand what their problem is. If you use Sketch Cloud you can even give them access to inspect the Sketch files so they can get that 1:1 detail they want.

They could also use a Windows app like https://icons8.com/lunacy which apparently fully supports Sketch files.

Pixelmator may be more up your alley. I've been using it since near its release and I wouldn't ever go back to Photoshop.

Pixelmator is to Photoshop as Sketch is to Illustrator (both better than).

What layers are you referring to? Is this about the Sketch Mirror companion app, or something else?

Forgive me if I misunderstood, but this subreddit is for the macOS vector/UI Design tool Sketch

Yes, artboards and symbols are actually pretty much the same thing in Sketch, except for the special symbol functionality.

Artboards are used to represent a page or screen of your project. They act as a container for these screen elements (text, shapes, symbols, etc). They are also used in sketch for prototyping, and will let you link from an element in an artboard to another artboard. Definitely take a look at the Sketch docs for more info.

​

We use Invision and haven't taken the time to explore some of the newer prototyping features but I think you can accomplish what you want with Sketch now. https://sketchapp.com/docs/prototyping/fixed-elements

apparently there's some plugin you need to download to run on your existing sketch files to 'fix' the ghost images. that seems to be hit or miss too, though.

https://sketchapp.com/support/troubleshooting/gamma-fix-high-sierra

If you are already used to adobe programs, the only thing that took me a bit is that there is not distinct selection tool in sketch. Other than that, I would say its just other shortcuts ... but they are fairly easy to remember once you get going.

This might also be helpful. https://sketchapp.com/learn/documentation/shortcuts/shortcuts/

Hey, I know the question was Sketch specific, but if anyone is looking for a solution that's Figma based, we've just released a plugin called Emailify that helps you design and automatically export responsive HTML emails. Hope it helps someone stuck in the endless nightmare of dealing with Outlook bugs!

Hi everyone, if you prefer using a Figma plugin, we've just released Convertify, which exports your Figma designs to Sketch files with one click. I hope you find it useful 😊

Hey all, for anyone after a Figma plugin for this, we've just released Convertify, which allows you to export your designs from Figma to Sketch files with one click. I hope it helps someone stumbling across this!

I wonder what-if "save points" problem could be solved in similar way as this figma plugin does: https://www.figma.com/c/plugin/734492262527930956/Time-Machine

WDYT?

Your example should be easily achievable in Sketch.

I've found that Sketch struggles a bit when it comes to vectoring things, so it may not be a complete replacement for Illustrator. I find myself jumping back into Illustrator to make designs and then exporting them to use in my Sketch designs. That said, maybe give Affinity Designer a shot, it's really starting to flex some muscles as an Illustrator replacement.

https://tutsplus.com/authors/nikola-lazarevic Last 4 tutorials from this guy are for sketch 3 illustrations. Try to go in chronological order as they start from beginner to intermediate stage. I'm hoping the guy starts uploading advanced illustration tutorials soon :)

Also, you can learn about vector drawing on a program like illustrator and affinity designer and transfer some of those skills onto sketch since a few of the tools available of sketch are the same on those other programs.

The easiest way of doing this would be to use Craft plugin by InVision. At our agency we are trying to distance ourselves from InVision since the platform has its own problems, but what you are trying to accomplish (no sign in, public sharable url, interactive etc...)

Create a free account on InVision, install the sketch plugin Craft, and create links between artboards / buttons using the Craft's linking (blue arrows) (shortcut C) that works exactly the same as sketch links (yellow arrows) (shortcut W).

When you are done use the craft plugins publish feature. (The first icon on the plugins panel, upward arrow) It will ask you to login to craft with your invision account and publish the prototype to your invision account. Then use the share function on Invision and choose Public share. It will generate a public url for your prototype.

Hope this helps!

Sketch already does this natively.

https://www.invisionapp.com/inside-design/grabbing-lost-design-elements-sketch/

TL;DR: Wait a few months.

Long answer: For now there isn't much you can do. Yes, there are workarounds like the Craft Library plugin https://www.invisionapp.com/craft#library but I never really liked these kinds of plugins. Seem hacky, their future support ambivalent and I don't care for putting all my productivity eggs in their basket.

The good news is that the Sketch team seems very aware of the necessity and they have shown some fairly promising stuff, which don't add complexity: http://sketchhunt.com/2017/03/30/tweets-hint-sketch-libraries-visual-diffs/

Maybe in v45 or v46 we will have that. But let's cross our collective fingers for 44!

That is a solution if you need to copy all the properties of an object, not only the color. Craft plugin does what I need, even if it has a cumbersome implementation for some features. I even tried Open Color Tools which is a really nice way to create and manage color palettes, but has a really weird way to assign colors to object to make the global color change work.

What do you think about this colour palette tool that will supposedly integrate nicely with Sketch? Personally, I did find the old way to manage swatches a bit poor, since colour plays such an important role in modern UIs. Take a look at this great article, for example, where colour is described as one of the primary parts of a gorgeous UI.

Also, I frequent Colour Lovers occasionally and I think it would be neat to be able to pull in some palettes from there into Sketch.

Get a vertical mouse. Try the ones that are around 30-$40 don't bother going too expensive. You will notice a big diff. I think this jtech mouse is the best value for quality.

https://www.amazon.com/dp/B07K4VTMW9/ref=cm_sw_r_cp_apa_i_HPKlFbBJYK135