Kilian Valkhof

More design tools for 2018

After my earlier post on design tools for 2018 I have a ton more cool suggestions, and even full categories I skipped over in the original post. Here’s more cool apps that I didn’t know, or that got released since the previous article.

Design tools based on code components

This is becoming a larger and larger category and that’s great, I really feel this is the future for UI design. Some of these tools autogenerate code, which is contentious, but others base their design on your own components.

Lona
Lona is a design tool that can generate components based on a set of JSON files that specify colors, text styles and the components that use them. It then lets you export it to React Native code. Setting it up involves compiling it using xcode so is a fair bit of work, but the ‘(human) readable design specification to real code’ part is intriguing.

Alva
Alva takes your existing set of components and lets you use them to drag-and-drop designs and pages in a clean way. The amount of customisation for these components is limited to what the component creator specified and that can be (too) minimal, but I can see this work really well with a mature enough design system.

React Studio
In React Studio you create applications by designing your components and screens right in the tool, then filling them with data from external sources, also from within the tool, and then stringing your different screens together using a node-based tool to define interactions and application flow, also in the tool. It’s a little overwhelming but it’s cool seeing a tool doing it all.

Pagedraw
If you really want to keep designing things in Sketch (which I understand), then Pagedraw might be more up your alley: It takes your Sketch designs and lets you define behaviour and components. Then it exports it all to React (with other frameworks coming soon). It works nicely for smaller components, though in its current state it might become a little overwhelming for larger applications.

Lunacy
Lunacy is a Sketch file viewer and editor, but for Windows. Sketch is awesome, but it’s major downside (for me, YMMV) is that it’s mac-only. Lunacy lets you open and edit Sketch files on Windows. It’s obviously more limited than Sketch itself, with no support for vector drawing, symbols and plugins but hey, something’s better than nothing, I guess!

Ceros
Ceros looks like a very good competitor to webflow. It does a good job of merging “design mode” and “website creation mode”, making it easy to design layouts but also easy to add interactivity and animations. In my testing, the interface itself could use a little work, with floating panels overlapping each other.

Supernova Studio
Supernova Studio is geared towards app development instead of web development. You can import Sketch files in it, and add animations and events to your different layers, exportable to a native application for iOS, Android, or with React Native. The app is easy to use and make prototypes in, but it does seem to lack the ability to hook up external data/api’s, which limits the types of applications you can make with it.

Phase
Except for a cool video, some little glimpses of a UI and a ton of promises (Timeline animation! Code export! Responsive components! Adaptive layouts!) not much is known currently. We’ll have to wait until the summer before we get to see more.

Icons

This doesn’t really need a full category, but I left an app out in the previous post that I use all the time when designing:

Iconjar
What Fontbase does for fonts, Iconjar does for icons. You can collect your icon sets in this program and easily drag them onto Sketch or any other app. It does this really well, highly recommended. Mac only.

Nucleo
Nucleo looks like a strong competitor to Iconjar with a major benefit: it’s cross-platform. It supports the same drag-and-drop interaction and has some neat icon customisation options.

Animation

I’m not big into animating UI for the web yet, but I wish I were. The tools below are interesting new apps that I hope will get me started.

Haiku
Haiku works with Sketch files and adds a timeline to them. The animation is versioned and you can continue working on your Sketch file (within reason, I assume). Haiku also supports adding interactivity and exports as SVG animations. It looks a little complex, especially when your animation/prototype has many states (as all layers need to be present) but at the same time, pretty powerful!

Timeline for Sketch
More strictly an animation tool: Timeline sits directly in Sketch and lets you create animations using, indeed, a timeline. It then exports it to Gif or video, so is more interesting for illustrative animations/videos.

Diya
Another timeline-in-sketch contender is Diya, which has two additional features: exporting to HTML5 and creating an animation spec for developers containing all the easing curves and states.

Mitya
This is Diya’s big brother. It has more features and additionally works with Framer to let you add interactivity. Like Flash before it, Mitya supports keyframing: Define a begin and end state, and Mitya will take care of the rest.

VR/AR design

VR and AR are pretty cool. Even though there is already tons of (great) tooling for ‘traditional 3D’, there are also a bunch of new tools focussed more on bringing VR and AR to the web/react native.

I’m still waiting for a good excuse to develop something in either VR or AR so I don’t have a ton of experience with these.

Ottifox
Ottifox has support for both VR and AR scenes and has a nice natural-language style interface for adding interactivity/prototyping. It exports straight to WebVR.

Hologram
When I first tried this the sign-up didn’t work, but I have it running now and it looks like a straightforward tool to build VR scenes, animate them and add event-based triggers for interactivity. You can do this both via a drag-and-drop designer or by using Coffeescript. Pretty powerful!

Mirra
Mirra is a web-based AR scene creator that is very impressive both in execution and output. Start your scene with a skybox and then add your elements to it from a host of different sources: 3D models, videos, text, charts and interaction hot spots are all included. The output is high quality 3D (shaders, soft lightning and more) and you can see your own creations easily in the mobile app they have. This would probably be my go-to for an AR project.

Small image tools

Not everyone knows Illustrator, Sketch, SVG or Photoshop by heart, so “small” effects might take you a long time. Instead, check out these tools that do one thing and one thing well.

Coördinator
Import an SVG and replace all paths with dots. This gives you a fun little effect, and you can customise the size, amount and color of the dots.

Duotone
Duotone images are a great way to have both images and a limited color palette. Upload your image, select your two colors, and you’re done.

Halftone Pro
Similarly, Halftone is also a great way to simplify an image as well as give it its own style. Halftone Pro is a web app that takes your (raster) images and transforms it into a different halftone-style vectors. I especially like the wavy style.

That’s the list of more design tools. If you didn’t check out the first one, I recommend doing so: Design tools for 2018. If you have any suggestions for me, let me know on Twitter!