Free Webflow Project Kickstart Style Guide

The best way to kick start your Webflow project. Figma and Webflow files included

Clone to Webflow Watch Tutorial

The complete class naming system to use in Webflow

Kickstarting a Webflow project with a style guide can save you more than a day's of work if done right.

That's why we've created the most comprehensive kickoff style-guide to follow and deliver unique Webflow websites

The process starts in Figma, so follow along.

How to prepare a Figma file for Developers

We believe Webflow is a tool made for Visual Development. That's why, at Flow Ninja, we have designers and developers doing separate roles. In the video below, we'll take a look on how to prepare a Figma file for Webflow development.

‍

We recommend starting each Webflow project with this Webflow Style Guide to build faster, better, and more scalable Webflow Experiences!

Adding Attributes

In this specific example we have two swipers

Main Swiper

"{attr.name}"

"{attr.value}

this will trigger swiper script

ninja-swiper

"

enabled

"

this will trigger swiper script

Thumbnail Swiper

ninja-swiper

"

enabled

"

this will trigger swiper script

Optional Attributes

ninja-swiper

"

enabled

"

this will trigger swiper script

Use Webflow like a true Expert

I’m not going to say that we’ve invented this way of Development in Webflow. This is basically us taking small bits and pieces from many other places and putting them together into our workflow.

See Featured Example