4 ms·

Random question for anyone who uses InVision, as we're considering making it central to our process. Is it easy for frontend devs to recreate the designers' pro

Random question for anyone who uses InVision, as we're considering making it central to our process. Is it easy for frontend devs to recreate the designers' prototype in code? What pitfalls should we look out for?

ixtli 8y ago
Well currently their main application is inaccessible, so you have the issue of downtime making it impossible to see anything you've made. Collaboration is cool but even mature applications like GitHub have downtime sometimes that seriously interrupts operations at downstream companies. Always consider this before relying on a service for something core to the business.
etimberg 8y ago
If the designs are uploaded correctly, you can see CSS snippets for different UI elements. Definitely helps to recreate it faster.
- porker 8y ago
  Then none of the ones I've worked on have been uploaded correctly. They were always static PNGs of the design. Now I start to understand why people like InVision! I've always preferred Avocode
  - etimberg 8y ago
    I think the secret is uploading photoshop files directly
jdhn 8y ago
Kind of. My workflow is whiteboarding to Sketch to Invision, and you have to manually select assets for export in Sketch in order for it to show up in Invision. However, this is only or elements such as icons. For elements such as text, you can simply click on it in Inspect mode to view the font family, style, etc. You can also toggle whether you want to view the code in CSS, LESS, SASS, etc.
jbob2000 8y ago
> Is it easy for frontend devs to recreate the designers' prototype in code? No. The designers have to build the designs in a very particular way in order to get anything useful from invision. Good luck telling your design team that the way they build their sketch files is all wrong. I have used invision professionally for 2 years now, it is a glorified screenshot host. It's biggest pitfall is that you have to use it in a very particular way, otherwise it's totally useless.
- daleco 8y ago
  From UX perspective, it's one of the best tools for managing the design process. 1-click to update / push mockups from Sketch. Ability to do light interactive mockups, commenting, and CSS specs. We've been testing most of the tools on the market (Zeplin, UX Pin, Avocode...). InvisionApp beat all of them.
  - jbob2000 8y ago
    I am happy that you found some use for it. Have you asked your devs how they use it? I do understand that mockups aren't just for developers, but you might be going to all that expense and effort for nothing. When I joined my team, after 6 months the designers asked me for some feedback on how I was using invision and I said it's just a screenshot host and they were shocked. But all the design specs are in there!. Yeah great, I know what 3em padding and 16pt font looks like, I'm not spending 2 hours poking through a clunky web app to find that out. The CSS specs invision spits out aren't helpful. If you are developing with a framework like React or Angular, and use a CSS preprocessor like SASS, then you have to rework everything invision gives you. It would be far easier if my designer would just email me a list of hex codes and some basic rules for font sizing and whitespace.
    - daleco 8y ago
      The basic rules should be documented in the style guide, design system, and/or libraries. What would be interesting is to bridge the gap between the Invision Specs and what you expect. Indeed, I ran a survey on 8 devs, and I've been monitoring how they typically use it over the years (Invision, Zeplin, basic screenshot hosting...). Some Devs won't use the specs at all, sometimes delivering something off. Others, love it since it will reduce the back and forth during audits. You're right, specs will only be usefull to provide the dimensions and colors. However, this part is automated on the UX side, it prevents us from writing it down, which would be a waste of time: Mockups always change, we'd have to manually update the said specs so many times... This wouldn't scale well.
comis 8y ago
Invision is only okay. It's bloated and sluggish with a cramped UI. I think Zeplin and Avocode are both superior products. And that's just if you are required to use Sketch - if you have the freedom to make the swap to Figma you should just do that imo.
dharma1 8y ago
Invision is great for quick clickthroughs, and commenting on specific parts of designs. But for handover of Sketch designs, I think Figma works the best - it's cross platform and opens Sketch files well.

ixtli 8y ago

Well currently their main application is inaccessible, so you have the issue of downtime making it impossible to see anything you've made. Collaboration is cool but even mature applications like GitHub have downtime sometimes that seriously interrupts operations at downstream companies. Always consider this before relying on a service for something core to the business.

etimberg 8y ago

If the designs are uploaded correctly, you can see CSS snippets for different UI elements. Definitely helps to recreate it faster.

porker 8y ago
Then none of the ones I've worked on have been uploaded correctly. They were always static PNGs of the design. Now I start to understand why people like InVision! I've always preferred Avocode
- etimberg 8y ago
  I think the secret is uploading photoshop files directly

jdhn 8y ago

Kind of. My workflow is whiteboarding to Sketch to Invision, and you have to manually select assets for export in Sketch in order for it to show up in Invision. However, this is only or elements such as icons. For elements such as text, you can simply click on it in Inspect mode to view the font family, style, etc. You can also toggle whether you want to view the code in CSS, LESS, SASS, etc.

jbob2000 8y ago

> Is it easy for frontend devs to recreate the designers' prototype in code? No. The designers have to build the designs in a very particular way in order to get anything useful from invision. Good luck telling your design team that the way they build their sketch files is all wrong. I have used invision professionally for 2 years now, it is a glorified screenshot host. It's biggest pitfall is that you have to use it in a very particular way, otherwise it's totally useless.

daleco 8y ago
From UX perspective, it's one of the best tools for managing the design process. 1-click to update / push mockups from Sketch. Ability to do light interactive mockups, commenting, and CSS specs. We've been testing most of the tools on the market (Zeplin, UX Pin, Avocode...). InvisionApp beat all of them.
- jbob2000 8y ago
  I am happy that you found some use for it. Have you asked your devs how they use it? I do understand that mockups aren't just for developers, but you might be going to all that expense and effort for nothing. When I joined my team, after 6 months the designers asked me for some feedback on how I was using invision and I said it's just a screenshot host and they were shocked. But all the design specs are in there!. Yeah great, I know what 3em padding and 16pt font looks like, I'm not spending 2 hours poking through a clunky web app to find that out. The CSS specs invision spits out aren't helpful. If you are developing with a framework like React or Angular, and use a CSS preprocessor like SASS, then you have to rework everything invision gives you. It would be far easier if my designer would just email me a list of hex codes and some basic rules for font sizing and whitespace.
  - daleco 8y ago
    The basic rules should be documented in the style guide, design system, and/or libraries. What would be interesting is to bridge the gap between the Invision Specs and what you expect. Indeed, I ran a survey on 8 devs, and I've been monitoring how they typically use it over the years (Invision, Zeplin, basic screenshot hosting...). Some Devs won't use the specs at all, sometimes delivering something off. Others, love it since it will reduce the back and forth during audits. You're right, specs will only be usefull to provide the dimensions and colors. However, this part is automated on the UX side, it prevents us from writing it down, which would be a waste of time: Mockups always change, we'd have to manually update the said specs so many times... This wouldn't scale well.

comis 8y ago

Invision is only okay. It's bloated and sluggish with a cramped UI. I think Zeplin and Avocode are both superior products. And that's just if you are required to use Sketch - if you have the freedom to make the swap to Figma you should just do that imo.

dharma1 8y ago

Invision is great for quick clickthroughs, and commenting on specific parts of designs. But for handover of Sketch designs, I think Figma works the best - it's cross platform and opens Sketch files well.