Benefits + Requirements + Showcase + List of tools

It’s great to be part of this animated design tools landscape. InVision, Framer, Marvel, everyone starts to openly search for the answer to the burning problem of collaboration between designers and developers.

Finally, looks like the No Hand-off movement is getting some prime time! The wires are buzzing, people ask questions and dream of new features:

Designer News

In the meantime, prototyping in is already possible and should become more accessible quite soon (check out the list of tools below).

We call this new way of turning ideas into working interfaces Priming, and it’s mighty powerful!

Unlike in the classical prototyping, deliverables of Priming don’t end up in the garbage bin or the archive. They lay down the foundation for the final interface.

Primed interfaces become the base for the final product, hence the name => primary layer.

Here’s what happens when we replace traditional tools like InVision, Sketch, or Framer with Priming pipeline:

Observed during private beta pilots with HMH, Classuite, AXPM, and others

The ownership of the interface shifts in favour of designers who fully control the experiences they design. Engineers remain in control of the logic and back-end layers. State management is shared and becomes common ground for the product team (sometimes including the POs and QA).

Priming comes in two flavours

  • Low-fidelity — styling is very generic, functionality matters the most
  • High-fidelity — easier in some tools than in others, usually comes as a next phase after Low-fidelity Priming, but I tend to jump right to it because I get to wow everyone in the office with the speed and quality of the results

The final deliverable of Priming is code

  • In low-fidelity — less styled components offer the flexibility of taking the interface design in any direction.
  • In high-fidelity — fully styled and ready to hit the app stores front-end, like this beautiful, mobile on-boarding screen (inspired by work of Jenson Z.):
On the left, the original image; on the right, the implemented interface

What’s required to get started?

  1. Collaborative mindset (you will work with engineers)
  2. Tools (more reliable tools should be available soon)
  3. Basic knowledge of CSS and flex-box (a bit of learning is good, right?)

List of tools that let you Prime interfaces today (or soon 🙄):

  • AirBnB Lona Studio — code export, mobile only and experimental, open source, requires compilation and some level of JS knowledge
  • Anima Launchpad — hosted or code export, templated, available for websites, Sketch import
  • Blocks — hosted or code export, templated, available for websites, tested
  • BuilderX — code export, available, tested, mobile only, Sketch import
  • Compositor — apparently live, not enough info
  • Design from Code — not available, not enough info
  • FramerX — code import, not enough info, private beta
  • Froont — hosted or code export, templated, available for websites, tested, CSS-HTML knowledge optional
  • Kite Compositor — code export, available, mobile only, animations, Sketch import, Swift knowledge optional
  • Modulz — not available, not enough info
  • PageDraw — code export, React DOM (web) only, Sketch import
  • Phase — via code export, private beta
  • Relate — not available, idea stage
  • Sketch2React — code export, experimental early Alpha, Sketch import, requires coding
  • Subform — private beta or not available (no updates, looks dead)
  • SuperNova — code export, available, tested, mobile only, converts from Sketch, uses custom layout abstraction, flows and animations available, JS-Swift knowledge optional
  • TeleportHQ — early stage, not enough info, open source, based on JSON protocol between design tools and dev frameworks
  • Webflow — hosted or code export, available for websites, tested, CSS-HTML-JS knowledge required
  • Views — one code base, available (open source) for apps, tested, coding in a simplified syntax required (simple CSS only, NO! classes, ids, and HTML), cross-platform (React DOM, React Native)
  • Views Tools —one code base, private beta, CSS knowledge required, JS optional (mostly to make flows and manage state/routes), cross-platform components with animations, version control integration

Subscribe here to be notified when the Views Tools beta is out (summer 2018). Join our Slack team to meet the contributors. Follow me on Twitter not to miss news about new alternatives to the hand-off process.

How to prototype in production? 🤔😏🤑 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here