I use a very similar workflow, with some differences:

• I create a Page for each size (Desktop, Tablet, Mobile)
• I create artboards for each screen in that size. I manually organise screens on the Page, with text labels as titles etc. This is not ideal, but it's worked for projects with 500+ screens.

I then export everything to Invision. It's possible to sync one sketch file with multiple different Invision projects (for example, if you need mobile prototype and desktop), you just have to remember to switch projects in the Craft Sync plugin window. Or, I maintain all the screen sizes in one Invision project (Sections come in handy, but we really need folders here Invision)

I used to use Zeplin, but Invision has similar functionality with "Inspect" mode. I manually create and maintain style guides, so I wasn't really gaining anything unique from Zeplin. Sketch text styles were too tiresome to maintain and keep in sync with Zeplin, manual style guides give me more control, for now. I also just have to sync one time now, instead of in multiple places.

I share the Invision project with all developers, stakeholders and clients. Developers have permission to comment so we can discuss any potential problems. I am not using the "screen status" feature in Invision yet, but I plan to utilise this in future so developers know when a screen is approved by the client and ready to build.

In terms of client communication, I use an internal tool specific to our consultantcy, but it basically consists of posting Invision links for each screen that needs to be approved. It's nice to use Invision links because I can update them at the same URL, no need for uploading screenshots.

Always open to cleaning up my workflow, hit me with any tips or ideas!

Exactly the same here.

Additionally, I create one more page for style guides including color palette, typography, assets and UI components like here: https://goo.gl/v65rrX

Developers based on this set scss variables and code reusable components.

Overall it looks like a pretty solid flow.

I've found just sending a link to Zeplin or Invision leaves a lot open for interpretation. Instead I create design docs. Whilst it's a little more up front work I find it saves a lot of time if you can preemptively answer questions, document edge cases, detail animations etc.

The content depending largely on the specific project, but typically include: An outline for the project goals, relevant research and then a deep dive into specs. This usually involves images (gifs or videos are even better), notes and links out to prototypes etc.

With InVision Inspect, why do you even need Zeplin? Inspect has asset export and speccing built in.

I also do something very similar. The only difference is that I keep all artboards in the same page IF (and only if) the project is not very complex.

Nice topic. Following!

Same here!

Had the same workflow. Sometimes without invision, instead having all the dimensions in sketch with plugins. Now we are trying figma and until now it's really good. The frontend developers can open the files and have code for shadows etc.

We used to have a process like this. There was a lot of back and forth between file syncing (gdrive, invision, Zeplin, jira). We switched to Figma/Jira and have not looked back.

Exactly the same in theory, in practice I prefer:

1. Anything but Jira
2. Sketch
3. Marvel
4. Zeplin

I generally have the same workflow as you, but we use inVision inspect over Zeplin. If your syncing to inVision already, curious why do you use Zeplin instead of inVision's Inspect feature?

With inVision Studio coming soon, it would be interesting if in the future we can have the entire design flow in inVision instead of multiple apps/services. Instead of (Jira -> Sketch -> Prototype -> Zeplin) it could be (Task management in InVision Workflow -> Design and prototyping in InVision Studio -> dev hand off in inVision Inspect)

I'm having the same workflow actually. Any inputs on this would be much appreciated.

Hi, InVision, Marvel and Zeplin.io are great but most of the time I have to create designs only for parts of existing products not a whole new design for a new project. That’s why it was a bit too much for my workflow. Additional tools add some complexity. That’s why we started using the Sketch Measure plugin and we really liked it. It’s pretty handy and you can handover specifications easily. And the best thing in my opinion is to add comments to your design right in your Sketch file!

But our sprints are all managed in Jira and it was always tricky how to handover those Sketch Measure files to developers. You can just attach those files to a ticket or add it to a dropbox folder but most solutions were kind of complicated. Thats why we came up with the idea of a Jira plugin which is now called Inspector Sketch which allows you to attach those Sketch Measure files easily to a single ticket. With this approach it’s possible for me to just handover the dedicated screens which are relevant for a single task/ticket.

For bigger or new concepts and designs we are using Marvel. I like InVision as well but sometimes creating hotspots was a bit laggy and buggy. That was the main reason why we switched to Marvel and it’s also cheaper though. :)

So if Sketch Measure and Inspector Sketch might be a solution for you as well here are some related links:

Sketch Measure Plugin: http://utom.design/measure/

A blog article about Inspector Sketch: https://www.k15t.com/blog/2017/01/delivering-design-specifications-to-developers-with-sketch-jira

Looking forward to your feedback

Jira has years of cruft built into it from when everyone used a waterfall process. Both Trello and Asana are better alternatives for small startups. That choice should ultimately be up to your engineers though.

InVision is a fantastic tool for communicating designs and user-testing but InVision Inspect and InVision Library don't work so great with Sketch. They don't respect Sketch text or object styles, so I don't recommend using them for developer handoff.

Right now, Zeplin is the best option for handoff with your developers. It respects all of Sketch's style libraries and makes linking to specific screens much easier.

As for defining responsive layouts, I recommend you define each component's responsive behavior separately. Work with your developers to make sure each component behaves as expected using a tool like Storybook.

Once you've defined your components, you can be a lot less specific when building overall layouts.

Of course, once InVision Studio is mature enough, I may drop Sketch entirely.

We use Sketch and Invision for pretty much everything. https://fabfitfun.github.io/fabfitfun-theme-style-guide/designer.html

Since you are already using InVision, you should checkout InVision Inspect mode. It essentially does the same thing as Zeplin and allows you to have everything at one place including design mockups, prototype, assets, and Inspect mode.

Also, Craft offers a smooth workflow between Sketch and InVision.

Is there a reason why people are still using Zeplin instead of invision inspect?

I don't know if there's such a thing as Best Practices for Sketch like Use Pages for sizes or Use Artboards for states. Does anyone know if something like this exists?