Designing Apps using Webflow
Part 1 of 3
This essay is about app development and component prototyping using Webflow.
If you’re wondering how to create apps that not only work but feel and look good, Webflow might just be the perfect tool for you. Of course you could use standard component libraries, but in my experience they are not as versatile as the ones I built from scratch using Webflow.
Anyone who’s talked to me for more than a few minutes about website and app development knows I’m a big fan of Webflow. What used to take me hours to create using raw html, css, and javascript, now only takes me a fraction of the time using Webflow. If you develop websites for clients, the financial advantages to you quickly become obvious, since you spend far less time creating the same or more value for the client.
But this post isn’t a paid product placement (although I participate in Webflow’s affiliate program). I’m simply writing to share; I especially want to share with you one particular aspect I use Webflow for that few other people I know seem to be using it for: app prototyping and development. It’s one of those things I ask myself:
“Why isn’t everyone doing this?”
So maybe it’s time to write about it.
What if you have particular tastes in terms of how your app should look? What if you’re not quite ready to compromise on uniqueness and versatility? What if you’re developing an app that has to have that special “feel” that distinguishes it from other apps out there? I, for one, want complete control over how the app should look and feel, and what it should be able to do. Hence, the Webflow route.
Basics
Let me share with you by way of an example how we’re building apps at Conscious Apps using Webflow. For the app development code base, we use:
- React (developed by Facebook) for the front-end. Because components are the future of web development, and because you can share code between web apps and native apps. Lately, however, we’ve been using a much faster alternative to React called Preact. Highly recommend it.
- GraphQL (also developed by Facebook) for the back-end, because it is both simpler and more flexible than REST APIs.
- As our GraphQL interface we use graph.cool.
- And finally, as a domain and website provider, we use Netlify. Netlify provides easy to use yet highly customizable domains and websites.
Design Your Components
Now to component design. Clearly, styling components from hand using CSS is tough… and not necessary when you have Webflow. Instead, within Webflow, you design each component from scratch. Let’s say you want to create a series of buttons:
As you’re designing these individual components in Webflow, be sure to assign them unique classNames since you’ll later be using these classes inside your React component. For example, to create the first white button above, you might design a button called app-button (we prefix each style with app- but any unique identifier can do) and assign it all the general properties you want buttons to have. Then you design child component buttons by adding additional classes, for example: app-button dark (the dark red button at the bottom).
Export Your CSS
UPDATE: export your CSS via browser automation instead. The below approach still works, but isn’t efficient when you need to frequently prototype.
Once the components look exactly the way you want — and perform all the actions you want (such as on focus, hover, etc.) — simply export the code from within Webflow, like this:
Highlight and copy the CSS and paste it into a CSS file that’s called from your root index.html file:
<link rel="stylesheet" href="assets/css/index.css" />Use in Your App
Inside your react components, then, simply call the CSS styles using className, like this:
The button component itself is called from within other components such as this one:
You can even add nifty transitions inside Webflow! Run the app, and you get a button that looks and works exactly like the one you designed in Webflow.
Click here to sign up with Webflow (and pass on a few affiliate credits my way by doing so). I know you’ll love it:
To take a look at an app that’s been completely designed by us using Webflow, visit:
That’s it! Let me know anytime you have any questions. I can be reached via Twitter at @heyMartinAdams. #MadeInWebflow
