I’ve been intrigued by the potential endgame of a single environment that could satisfy the needs and modes of operation for both visual UI designers and developers. Convergence of tools has been a theme of my “Looking Ahead” new year blog entries for 2017 and 2018.
Typical UI Design tools still offer an excellent working model for quickly manifesting design ideas at any level of fidelity. Many of us know of situations where a well-executed mockup that took 30 minutes to render in a design tool (drawing pictures of screens) might get a dev estimate of many hours or days to execute (QA’d production code).
As long as that dynamic exists, many designers will continue to prefer WYSIWYG drawing tool interfaces over working directly in code – especially when they are early in the ideation process.
Popular tools like Figma, Sketch and AdobeXD continue to make moves toward exporting out to React and potentially other libraries. However, as of now, these are one-way, and the real deal will be bi-directional or zero-conversion options.
Here’s a roundup of new tools looking to shorten or even eliminate the distance between drawings of screens and production-ready code (in alphabetical order).
Alva
Alva – “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.”
Beta is live: “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.” https://t.co/PjaPI4qqGh via @meetalva pic.twitter.com/xj68ktnhaf
— James Young (@jydesign) September 24, 2018
Haiku
Haiku – “Design components that snap into any codebase: Unlock your creativity with the world’s most expressive UI builder”
Anybody have any cool creations to share that were made with the new Haiku app? https://t.co/KeKpvJo8IN by @HaikuForTeams pic.twitter.com/286oMevjHZ
— James Young (@jydesign) February 3, 2018
Interplay
Interplay – Fast prototyping that combines the power of design systems, production code components and live collaboration.”
Interplay announces early sign up: “Create delightful, responsive experiences. Fast prototyping that combines the power of design systems, production code components and live collaboration.” (React, Angular and Vue) https://t.co/5k4LExgxuJ via @interplayapp pic.twitter.com/v0TEW5Rz27
— James Young (@jydesign) October 18, 2018
Iterative.ly
Iterative.ly – “Iterate on top of your live app using your design system. Launch an experiment in under 10 minutes. Continuously improve your product.”
Hi Mark, take a look at what @patrickt010 and @ondrej421 are working on: https://t.co/RIuLtHZt9S
— James Young (@jydesign) April 30, 2018
Modulz
Modulz – “The visual code editor for designing and building digital products—without writing code.”
Check out the Kickstarter for @Modulz (due winter) “The visual code editor for designing and building digital products—without writing code.” https://t.co/G7MhmmNKcb via @colmtuite https://t.co/ywDAPtKhgU
— James Young (@jydesign) October 20, 2018
Supernova
Supernova – “Design and development tool unlike anything you’ve experienced. #nomoresnippets – always a production-ready code.”
Supernova Studio launched a few months ago, anyone used in production yet? It aims to be the mobile design to front end code platform – across iOS, Android & React Native https://t.co/G1tCO2yq26 via @appsupernova pic.twitter.com/8btlJryAPE
— James Young (@jydesign) May 30, 2018