Prototyping: Software
Tags: productivity, software, figma
Published: 2022-04-08 13:02:19

## Table of Contents
1. [Figma](#figma)
2. [Marvel](#marvel)
3. [Framer](#framer)
4. [Webflow](#webflow)
5. [Origami Studio](#origami-studio)
6. [JustinMind](#justin-mind)
7. [Wireframe.CS](#wireframecc)
8. [Micro](#micro)
9. [MockFlow](#mockflow)


### [Figma](https://www.figma.com/) (Mac, Windows, and Linux supported)
The one, the only Figma! Figma connects everyone together so teams can deliver better products faster. With [Figma plugins](https://www.figma.com/community/plugins) and the countless video tutorials out there, the possibilities are endless.

If you are interested in Figma, check out my series here:

{% embed https://dev.to/tmchuynh/figma-20-plugins-nh9 %}

![figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyrduceyb2ocemum4sym.png)

### [Marvel](https://marvelapp.com/) (Browser based)
No, it's not Marvel Studios. Marvel has everything you need to bring your digital ideas to life! You can sign up for free with your gmail. And it's built to scale; Marvel Enterprise 3 is built on blazing fast technology with features to help large teams make design more productive instead of time-consuming.

![marvel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiezhj9qgjgleubuh0b8.png) 

### [Framer](https://www.framer.com/) (Mac and Windows only**)
Design realistic websites and apps with pre-made interactive components, polished assets, and layout tools while having access to real-time collaboration with your whole team in order to design, critique, and test projects together. Get started for free!

![Framer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gte2wfns7w8ye7g1ud0a.png) 

### [Webflow](https://webflow.com/?utm_source=google&utm_medium=search&utm_campaign=general-paid-branded&utm_term=keyword-targeting&utm_content=branded-ads) (Browser based)
Webflow Designer lets you build any website with the full power of HTML/CSS and Javascript in a visual canvas for free. 

![webflow products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpuk9h0gs57raqmy27q5.png) 

### [Origami Studio](https://origami.design/) (Mac, Windows, and Linux supported) 
Components are comprised of layers, patches or both. Patch components are made up of patches while layer components are made up of both layers and patches. To make components accessible to others, you are able to create a shared Dropbox folder to add components into.

![Editing layer components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9s91pm0pnvvokzowf2u.png)

### [Justin Mind] (Mac and Windows only**)(https://www.justinmind.com/)
Liquid layouts, auto-resize UI components, advanced pinning, forms and data in motion, free UI kits for web and mobile, and so much more! Improve communication between teams by putting them all on the same page.

![JustinMind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeihqy3tqnfgmcgk8gmu.png)

### [Wireframe.CC
](https://wireframe.cc/docs/) (Browser based)
A simple wireframing website that allows you to quickly get your ideas onto the screen. Draw new elements by clicking and dragging your mouse cursor across the canvas and selecting a stencil from a pop-up menu that only presents stencils that fits the selected area. It's that easy!

![wireframecss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyz3iw5konqaqxpzikan.png)

### [Micro](https://miro.com/?utm_source=google&utm_medium=cpc&utm_campaign=S|GOO|BRN|US|EN-EN|Brand|Exact-Unknown&utm_adgroup=&utm_custom=15562968938&utm_content=569414581093&utm_term=miro&device=c&location=9031582) 
An online collaborative whiteboard platform to bring teams together. Meetings, workshops, brainstorming, research, design, agile workflows, strategy planning, mapping and diagramming can all be done with Micro.

![Where distributed teams get work done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk235jxj310scbnndzr8.png)

Do you have a favorite prototyping software? Let me know. I might be looking for a new one soon!

Happy coding!