back arrow

Building UI Kits, Style Guides, & Design Systems With Webflow

After reigniting my love for Webflow, I have come to see its potential to designers, design teams, and organizations at large.

For designers (or anyone) not familiar with Webflow, it is a responsive, visual/UI-centric tool for designing custom websites. It gives designers the ability to "code" without having to jot down a single line of HTML or CSS. It adopts Squarespace's wysiwyg drag and drop approach for HTML elements and a Sketch-like panel for customizing with CSS. Additionally, behavioral interactions (JS) are controlled via a pane somewhat similar to a timeline one may see in Keynote.

Webflow is brilliant because it bridges the gap between designers and coding. Web languages like HTML, CSS, JS, et cetera are just that–languages. They may not be as vast as Mandarin or German, but require a fluent understanding so they may be wielded powerfully. For me, I understand how the front end works. However, asking me to write beautiful, hygienic script would be useless. I barely get my way around my Mac's Terminal and don't quite know how to write tidy script. Webflow does that for me.

What else Webflow does is provide me a playground to create and test design systems. Any UI elements I create in Sketch can be completely replicated within Webflow with relative ease. Designers should be validating their UI decisions in Webflow. This is especially true when creating the underpinnings of a style guide or design system. What is designed in Sketch works, of course, in its fixed, immovable media. This is because the variables are tightly controlled. But what happens when the screen size changes, the screen type changes, or put up against an edge case? Webflow can provide designers the feedback they need to test against these unknowns.

Designers should be validating their UI decisions in Webflow

Another benefit of designing in Webflow is that devs can see in their browser window (not an Invision link) what and how an element is supposed to exist and behave. For anyone that has tried to mouth to a front end dev how a button interaction or toast is to appear, you know the cold, judging stare of disapproval burned into your ego. Perhaps you tried to actually build the animation in an animation tool like After Effects. However, that script may not be usable to the dev (unless it's leveraging Lottie). Building interactions into your elements in Webflow provides to stakeholders and developers a literal expression. There's no need to explain with poor words how something will interact.

UI kit example from the Panels UI Kit
Ui kit example from the Panels UI Kit

In a recent project, I was able to test and validate with stakeholders some minor IX treatments. If It had it my way, I would build the design system and documentation just in Webflow. However, we have other designers at Praxent that may come aboard so we must use a Sketch or a Figma to maintain a utilitarian library. Since the project was rather small, it made less sense to build twice. If I was on an enterprise team, I would say Webflow is a much more valid option. A design team could feasibly move away from design applications all together and only use Webflow. Interesting thought. No more files. Version control is easy. Just no working offline (for now).

Prediction: we will see in the coming years other design apps integrating more functionality that Webflow offers for the very reasons I mentioned above. No one wants to maintain two design systems. That's profoundly paradoxical. However, designers will be wanting more and more to work with the real thing. We've been trending this direction for the past 10 years or so. We used to design in Photoshop or Illustrator and have to slice out our designs and upload them to our servers to render online. We then moved to Dreamweaver which was sort of a predecessor to Webflow. It had visual web design capabilities, but was too weak of a tool to be valid. We now have Invision Inspect and Zeplin to create style guides and inspection offerings to developers to snag styling. We have plug-ins like Anima that allow you to launch websites from Sketch itself (though, it's buggy and not very powerful). It makes sense that eventually, we will be able to design elements, components, screens, and entire applications within one tool that is not exclusive to the browser or native files. The tool would provide both.

Anyhoo, take a look at Webflow if you haven't. If you've made it this far disagreeing with me, then perhaps take away the rational outlook on the futurescape of our tools. If you're encouraged to try to build UI kits and design systems in Webflow, just go for it. There is plenty of great educational material online. Most notably, I really dig Webflow University for basics, Pixel Geek for design alongs, Jose Ocando for advanced/technical details, and Joseph Berry (for animation wizardry).

Please hit me up if you have found Webflow to benefit your practice! I'm still learning and would love to see how you tackled problems.



back arrow