In this article I’ll quickly roundup some tools which will help you communicate your designs to the developers tasked with bringing them to life. I’ll be listing some tutorials to help you get started too–so let’s get stuck in!
Chalk and Cheese
Developers arguably focus on calculation and logic, whereas designers lean far more on creative processes. As you might imagine this can create communication problems between two parties which are actually trying to work together. Ultimately, the ideal communication channel to bridge this gap should be a tool that takes both hemispheres, allowing them to communicate in their own language, while maintaining project fidelity.
Happily, there are solutions to this problem, many solutions actually, and I’ve selected a few popular choices with thoughts on their best features.
InVision (Sketch & Photoshop Integrations)
InVision is one of the industry’s most popular prototyping tools.
Sign up and you’ll get started with one project for free, with paid subscriptions currently starting at $15/month for three projects. The number of plugins and integrations with InVision is mind-boggling, so outside of our goal (better communications), you can find a few extra features to improve your workflow.
Core features include:
- InVision leads the pack with tons of prototyping features such as direct mobile testing and the possibility to embed your prototype anywhere for user testing.
- Integration with so many other tools I can’t name them all here. The industry has accepted it as a standard and therefore many plugins have been created to work with InVision.
- Version control syncing with your files in Sketch or Adobe Products.
- Although in private beta (and where Zeplin/Avocode are currently strong) InVision also has an export tool for stylesheet creation and code generation for any element. It’s too early to tell how well this feature performs in relation to their competitors.
- PrototypingRapid Prototyping Using Sketch Symbols and TemplatesDamir Kotorić
- UXShip Better Experiences with a Lightning-Fast UX WorkflowDamir Kotorić
Avocode (Sketch and Photoshop Integrations)
We’ve covered Avocode on Envato Tuts+ several times in the past; it acts as a way of exporting designs for the purposes of web development.
Avocode offers a 14-day trial, after which it charges $7 per month for unlimited projects, per user. If you want to share your work (which is the idea) with others you have to upgrade to the $10/month subscription plan, which is still cheaper than other options mentioned in this article.
Avocode comes with full Sketch and Photoshop integrations and the following features:
- Developers can pick and choose what they need–no need to create any style guides on the designer’s side. Full specs, colors (HEX, RGBA, HSLA), fonts, styles and sizes available on any elements pulled.
- CSS code exports and multiple images exporting (SVG files supported). The styles can also be exported to SASS, Stylus and Less; a big win for frontend developers across the board.
- A neat copy and paste text feature where you can paste text from the design into a code editor with HTML heading markup (H1 for example).
- All plans come with unlimited projects. Upgrade when you need more users participating in a project.
- Version control and collaboration with email notifications. Slack integration is available starting with the business ($10) subscription plan.
- AvocodeHow to Use Avocode to Inspect Your Photoshop and Sketch FilesAdi Purdila
- SketchHow to Collaborate With Your Team Using SketchArmando Sotoca
Zeplin (for Sketch)
Zeplin is something we introduced you to recently in Andreia’s beginner tutorials.
Similar to InVision, monthly subscriptions start at $15/month for 3 projects (you can get started with one project for free). This Mac/Windows/Web tool’s functions mainly focus on resolving the problem at hand here: designer-developer hand off. You don’t get all the extra bells and whistles as with InVision, but it is really effective for collaboration purposes.
Some of the main features:
- Works exclusively with Sketch.
- It provides specific HEX and RGB values for all your designs.
- Automatically generates assets (buttons, icons or anything you select as an asset).
- Platform specific (iOS, Android or web) information (PT, DP/SP, PX) offered to the developer. This way the developer can code your assets with the measures they’re familiar with in their SDK. It even offers color code snippets so the developer can just copy and paste.
- Full integration with Slack available, so all the members of the team are aware of any design updates.
- SketchSketch and Zeplin: Helping Designers and Developers CollaborateAndreia Paralta Carqueija
- Style GuidesQuick Tip: How to Use Zeplin to Generate Style GuidesAndreia Paralta Carqueija
Sketch/Photoshop Extended With Plugins
It barely needs mentioning that both Sketch and Photoshop have a healthy list of plugins to export your designs and create detailed style guides for developers. A few examples with their pricing:
- Ink (Photoshop, Free): a style guide generator.
- Markly (Sketch/Photoshop, $49.99): a UI/Spec style guide generator. Used by Netflix, Google, Facebook and many others.
The tools suggested in the article are the most common, tested and reviewed in the industry for web/mobile team collaboration. Let’s look at a few others which we won’t be covering in great detail.
Framer (pictured below) is another tool worth mentioning if you are designing for mobile. However, its approach may not be a great fit if you’d prefer to focus on the designs or programming, but not both. Framer is a great example of using creative and logical processes at the same time.
Adobe XD (Adobe Experience Design CC, formerly Project Comet) is a relatively new player on the market, but with the industry’s number one app company behind it you can be sure it will make an impact. Whilst it offers a brilliant set of tools for designing prototypes, its focus is on UX, not on designer-developer deliverables. It offers “production-ready artwork”, but you won’t find code snippets and detailed exportable assets on the menu.
We recently covered Sympli in a designer-perspective tutorial. It works specifically with Photoshop and Sketch–take a look!
If you don’t already have any of those tools integrated into your workflow, and you face an ongoing issue with website development from your designs, I strongly suggest you take a look at the above-mentioned tools. At the very least, get going with a trial! In the end, the small monthly fee (or purchase) will save you a considerable amount of time spent going back and forth with members of your team.