How do you prototype your web designs and mobile apps?

Do you use a dedicated tool or have you shifted your to a primary design tool like Adobe (maybe you even voice-prototype? 🔊), , or ?

Based on the feedback from our users we found out, that more than 50% have already made the shift — for example from inVision to Sketch.

So we got curious: Are other designers also embarking on prototyping in primary design tools? To find out, we shared a little survey on Designer News a month ago.

So far, we have collected 162 answers. These are the results:

While these results surely don’t represent the whole design community, it’s evident that Sketch, XD, and Figma have recently gained traction in the UI design prototyping market and have become direct competitors to dedicated prototyping tools.

Just like designers, developers also prefer using fewer tools that can most of their workflow. Who doesn’t right?

Some design tools are even stepping into the design hand-off game, by providing a sharing link to design specs. However, in this workflow the front-end developer still ends up with:

  • One link to the design prototype,
  • One link to specs,
  • A lot of hand-coding — e.g. because design tools currently don’t generate customizable code output
  • A lot of miss-communication — e.g. when the designer forgets to mark some layers for export in the design tool, the developer has to ask for it, the designer has to correct it in the design tool, update the link and send it again. If they lose their patience, developers ask for the entire design file, and have to open it in the design tool.

So instead of making multiple tedious steps in the design to code workflow, we wanted to offer ONE LINK — that would cover everything.

We wanted to extend the amount of work that you can cover in Avocode.

Avocode could already read and import all the design file data so the developer wouldn’t need an extra design tool. The only information that we were missing, were the relations between screens. While it’s handy to get specs and assets without design tools, the developers were still missing the context — especially when it came to more complex files — like a Sketch design with 30 connected screens.

Finally, we have added the information about connections between screens and hotspots for Sketch, Adobe XD, and Figma files.

Today, we’re proud to introduce to you the re-imagined design-prototype-to-code workflow with Avocode.

  • It still doesn’t matter who imports the design prototype — it can the designer, developer, or someone else in the process.
  • You don’t need design tools to open design prototypes in Avocode.
  • You can share ONE LINK that leads developers (or anyone else) straight to the preview of the prototype. By clicking through connected screens and hotspots everyone understands the flow first. And because Avocode generates a unique link for any artboard, you can navigate your colleagues to any point in the flow.
  • Developers can switch straight to specs in the Inspect mode from any artboard of the flow… or straight to the Comment mode, where they can discuss feedback and clarify things about the design.

Here’s how it works:

Along with the whole Sketch file, Avocode imports also the relations between screens, both connections between hotspots and also entire screens (currently only Adobe XD and Figma have this feature).

Additionally, when you set some artboard as the Home screen (Sketch and XD) or the Starting frame (Figma) you can play the flow from the start, even when you have more of them (currently only Sketch has this feature).

👉🏼Just click on the image below, to click through a demo.

Audit UI Kit — courtesy of Yogesh Rajendhiran

This update is our first step to cover prototyping as the essential part of your workflow. We plan to improve it over time but to do it right, we need to know what feature you need the most. If you’d like to help us make Avocode even better, please share your feedback regarding prototype hand-off in the comments.



Source link https://blog.avocode.com/cover-your-sketch-xd-and-figma-prototyping-workflow-in-one--2c6e5629f930?source=rss—-3d381deaf83—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here