Framer is a design first tool with a built-in code playground. Its strengths are in animation and the community-driven plugin marketplace.
For all of those desginers who develop -- & -- developers who design. A currated list and comparision of tools to bridge your workflow!
More tools, reviews and comparisions will be added soon enough!
UXpin is a user experience design software. Merge is a new release that allows your website or app repo (only react) to be imported and synced. UXpin's strength is in logic based actions.
Modulz is a component-based visual design tool. It looks like a traditional design tool with three separate views for design systems, components, and composing. The concepts are code based, even allowing for padding and margin to be defined. More coming soon...
Webflow is a visual coding app. To use it, you should have some knowledge of code. It is a robust tool that also includes a built-in content management system and hosting. It's a powerful tool, which makes designing in here slower than a vector tool. More coming soon...
Shots is in the no-code/low-code category focused on mobile applications. You start with a template, can visually customize and then export the HTML and CSS which does the job but is bloated.
Phase is an early stage startup that is focused on the start to finish in a designer's workflow. It is primarily for designers and currently is only capable of prototyping. More coming soon...
Uizard is a tool that allows you to freehand draw a screen, upload the image and output code. It is solely mobile based at the moment and is meant for boilerplate code, not production. More coming soon...
Clutch is a visual coding app built for frontend developers and designers alike. The current UI is very unopinionated and therefore far too complex for a sole designer to easily pick up. It is collaborative though like a Figma for coding and focused on making it easier for designers to pick up.
Studio is a visual website builder that follows code semantics. Those who like drag-and-drop builders will love this!
Teleport is a Front-End Development Platform for devs and designers to collaborate. It is a simple interface with functionality to build multipage websites as well as export or host them. You can view code in many syntaxes (straight HTML, React, etc) - but not directly edit the code. Components are limited.
Supernova is a mobile-focused platform that can convert Sketch and Adobe XD files into native frontend code. It is meant to be used by product teams continuously.
Based off of chakra-ui.com - this is a visual builder for an existing React component library. When you've built what you like (in the default chakra theme) you can export the code to CodeSandbox.
I'm passionate about frontend development, design, sailing, and electronic music! With several tools coming out claiming to bridge my two passions, I decided to start a running analysis of which tool has the best design to code workflow. Find me on twitter!