30

Startup Design Flow (Jira + Sketch + InVision + Zeplin)

over 5 years ago from , User Experience Designer at Amazon

How do you work with developers? I'm working in a project where I'm the only designer and we are using Jira to do the sprints and track our tasks.

I design everything using Sketch and I do it like this:

  • Create a Page for each "section" that we are going to have (ie. Home, Products, Detail, etc)

  • Create an Artboard for each "state" (Dashboard, Element hover, Element selected, etc) and each "size" (1.25x, Desktop, Tablet, Mobile)

Then I want to share everything using InVision but here's where I get to the first problem. To do the Sketch + InVision integration I will need to have a file for each "size" that I want (right?). I think that with Sketch Libraries this is going to be "easy", but still, not sure if this is the best approach.

I send all the views to Zeplin so developers could have the specs and I post the link to Zeplin on Jira.

This is my current flow, do you do something similar or there's something I'm doing different?

25 comments

  • Joe CJoe C, over 5 years ago

    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!

    5 points
    • Serguei Orozco, over 5 years ago

      It seems like you have a solid workflow! I think I will try to sync InVision using Craft. Do you use something to follow your tasks?

      0 points
      • Joe CJoe C, over 5 years ago

        Yeah, that's the internal tool I mentioned. It's a lot like Asana, and each screen/block of screens in Invision is linked by a URL to each task

        0 points
    • Rocky SerateRocky Serate, over 5 years ago

      Very solid workflow! The only thing I'd add for mine is that we have several rounds of refinements when sharing it with the stakeholders, so we use the comments and dev notes a lot to keep track of tasks.

      1 point
      • Prabin Silwal, over 5 years ago

        Hi Joe, I'm doing exactly like you except one difference, for client communication I am using Atomic. One more + point with atomic is that i can load data from google drive files (where all project files QAs are stored). You can sync sketch files with Atomic(sketch plugin) to client and Invision(carft) to devs at the same time. I usually share Atomic url to devs on slack so that they see all the communications, changes, logic and stuff. Yea sometimes its brutal.

        0 points
  • Adam KalinAdam Kalin, over 5 years ago

    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.

    4 points
    • Serguei Orozco, over 5 years ago

      Wow, I really liked your style guides. Did you see InVision announcement? InVision Design System Manager is going to help a lot.

      0 points
    • Lucian .esLucian .es, over 5 years ago

      I do the same thing. + And even though Zeplin is such a nice tool.. Sometimes I still manually annotate my designs for the following reasons:

      1. I'm making sure I'm consistent with colors, margins, fonts, etc...
      2. I can explain better what was the design thinking behind the UI.
      3. Annotating the css code for a better outcome with less headaches.

      Also, on bigger projects I have hand-off meeting, a mid-sprint meeting to see everything is going fine and a polish session where I take a look at the final design and give feedback.

      Having prototypes makes the hand-off much better, so thats why I'm investing time in coffeescript and framer (:

      Usually I don't have a lot of breakpoints to discuss and if you use some sketch plugins (Launchpad by Anima) everything becomes very smooth.

      Yes, Product designers should understand code

      Hope it helps.

      Best, Lucian.es

      1 point
  • Matt Anderson, over 5 years ago

    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.

    4 points
    • Antoine Lord, over 5 years ago

      We do the same thing in the company I work for, but we include de design docs directly in the task/user story description in Jira. This way the developer doesn't have to open multiple tabs to have access to the relevant information.

      0 points
  • Jonathan SimcoeJonathan Simcoe, over 5 years ago

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

    2 points
  • Filipe GonçalvesFilipe Gonçalves, over 5 years ago

    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!

    2 points
  • Giulio MichelonGiulio Michelon, over 5 years ago

    Same here!

    2 points
  • Stefan Lee, over 5 years ago

    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.

    2 points
  • Dino ParavandisDino Paravandis, over 5 years ago

    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.

    1 point
  • James FutheyJames Futhey, over 5 years ago

    Exactly the same in theory, in practice I prefer:

    1. Anything but Jira
    2. Sketch
    3. Marvel
    4. Zeplin
    1 point
  • Jon EzellJon Ezell, over 5 years ago

    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)

    1 point
  • Gurdev Sambali, over 5 years ago

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

    1 point
  • Tobias HaasTobias Haas, over 5 years ago

    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

    0 points
  • Harper Lieblich, over 5 years ago

    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.

    0 points
  • Ohsik Park, over 5 years ago

    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.

    0 points
  • dh .dh ., over 5 years ago

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

    0 points
    • Kristjan Gomboc, over 5 years ago

      Much more accurate. We also use Invision and I insisted on Inspect but my team convinced me that it‘s not mature enough and we ended up buying another year of Zeplin. Wonder if they can keep the lead for much longer...

      1 point
  • Serguei Orozco, over 5 years ago

    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?

    0 points