I have a general question for the Webflow community.
I work as a UX designer at our company and over the past few months I have started using Webflow for Enterprise prototypes (mainly banking/financial). I’ve figured out how to run the page designs through CMS databases and how to use Android and Apple specific wrappers to change the output screens for demos. It works very well. But setting everything up does take a little time. I am not a programmer/coder.
I am trying to figure out the best (and easiest) workflow for handing things off to our company’s programming team.
My current workflow looks something like this:
Early stage pen/paper drawings and simple text outlines.
Then I create small working prototypes with a UX drawing tool. I currently use Adobe XD (but I have also used Sketch / Photoshop etc…). For early stage designs these apps do a great job (not to slight Webflow, but I don’t think it was ever created to be an early stage design tool).
As my prototypes grow in size and complexity, the UX drawing tools start to max-out (the hyperlinks and transitions are too hard to manage when there are hundreds of screens). It’s at this point that I port everything over to Webflow and its CMS. Although this takes considerable time, it makes everything easier to mange from that point on.
As of yet, I haven’t exported Webflow code out for our programming team …. but I have showed it to them and they say it looks clean and useable. So that is my handoff option #1.
Today I discovered another handoff tool that might quickly and easily generate HTML/CSS and native code directly from my drawing files (Adobe XD / Photoshop / and soon for Sketch). It is called Yotako. I showed the sample code to our programmers and they were impressed by it as well (especially the native app code).
So what I am to do?
I like working with Webflow — but from a “handoff” point of view is it worth my time to re-work all of my XD layouts in Webflow? Or should I skip Webflow and handoff Yotako HTML/CSS and native code instead?
I don’t think there is an easy answer to this question.
I just have a quick question to pose before I share my thoughts, because you are a UX designer and make that clear. Second you stated you mostly work for enterprise companies or at least design prototypes for enterprise companies. – Now are these programmers that you’re referring to expecting UX designers to hand them actual code to use in a production ready site or app?
So I think I will reply going from bottom to top here. Yotako seems pretty cool and outputs clean code overall judging by the resource files on their Github. Few problems I see here, one being the code is technically useable but I don’t think it is desired for production ready sites or apps. Webflow for example outputs much more complex code at different breakpoints as well. Responsive applications. Yotako seems very static.
For example, with naming alone on Yotako you have element classes in the stylesheet named “.container-73, .container-74 etc.”, which is typical for something like this but it gets messy real fast and to make it useable in any production application you would have to sift through all that and rename everything just to know what you’re even working with.
Now for straight visual prototyping, sure that would work. But then again there are amazing prototyping tools out there for things like this such as Webflow (which you already know), but more specific Framer-X and InVision Studio. Invision’s sharing possibilities for developer handoffs are incredible and super intuitive. Watch this video here.
Now Webflow has the most clean and production ready code hands down in my opinion. So if you need to hand off code that can actually be used in a production app then, I suggest sticking with Webflow. It truly is the perfect combination for designer meets developer.
With Webflow you can name your classes accordingly or use a naming convention that works for you and your team so the handoff is super easy for developers and so on. Anyhow, those are my thoughts. I would consider the position you’re in and ask yourself what the tasks require from you.
To answer your question – No. The coders aren’t expecting me to hand over working code. They currently write everything from scratch (using my XD screens as visual guides).
You have given me good advice. Since Webflow is working for me I will continue on that path. However, I will continue to research and try out other options. It’s always good to stay current.
I tried Framer – but because I am not a coder, I found it a little too daunting. I also tried Invision Studio, but they seem to have stalled (and maybe lost their way??) Adobe XD got off to very slow start, but have picked up their pace and have opened things up with a large and growing Plugin community. So I will stick with Adobe XD (for now).