Build by The Wall.
Streamlined Workflow
We created the Bricks Framework to have a production ready Figma to Webflow design and development workflow, that covers advanced needs and is based off best frond-end development practises.
Getting Started with with Bricks
We suggest getting started either in Webflow (Developer-First Mindset), by Cloning our Framework Starter Project or in Figma with our (yet in Beta Phase) Official Figma Style Guide.
Getting Started in Webflow
Let's clone the Framework Starter Project and adjust key Brand and Visual Design Parameters.
- Clone the Framework Starter Project
- Update Project Settings
- General Settings (set name, favicon, webclip and the language code)
- Publishing Settings (set your staging domain name, connect your custom domain, if you have one)
- Font Settings (upload your custom fonts, if you got the option always upload a variable font for optimal performance)
- Update Webflow Variables
- Custom Font Setup (first change the fonts primary-family, set available font weights (200-900) and setup your font preferences, text settings and headings)
- Define your Color Palette (brand colors, theme modes, button colors, darks, tints and system colors)
- If needed adapt any Structure or Component Settings (paddings, max-widths, border radiuses, etc., ...)
The Bricks PRO Variable Setup allows us to define most of our styling over the Variable Panel, which ensures a faster and more efficient workflow. Once setup, you only need to style Forms, Buttons and any Custom Classes, if needed. - Check the Style Guide (Core Configuration + Typography Setup)
- Get a better understanding of the classes inside the framework
- Change Form and Button Styling
- Custom Code -> Theme Color Setup
- Here you can connect variables from Webflow to either edit the already present Theme Modes (Light and Dark Mode) and Buttons or
- Create new custom Theme Modes
Getting Started in Figma
First let's define our brand and core style parameters by setting up our design tokens, which control parameters as typography (global headings, line height, text case, etc. ...), global colour, border radiuses, container types, max-widths, etc. ...
On how to use Design Tokens Plugin by Tokens Studio, check out their website, documentation and youtube channel or watch our video -> Bricks Framework - Seamless UI Design in Figma with Variables and Design Tokens.
Figma Variable Setup
One we've got our Design Tokens set up, let's translate them into Figma Variables, which later on translate to Webflow Variables and Custom Properties.
On how to use Figma Variables, check out Figma’s website, their documentation and youtube channel or watch our video -> Bricks Framework - Seamless UI Design in Figma with Variables and Design Tokens.
Get the Figma Style Guide
By sharing your email you support our work and we share with you our Exclusive Framework in Beta Phase.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Figma to Webflow Pipeline Workflow
When choosing a workflow, we need to think about what is better for the project long-term wise, as well as what best suits our team and particular use case.
Option 1) Figma to Webflow Conversion Plugin
The Figma to Webflow Plugin with the corresponding Webflow App, allows to either sync Style Systems + Components or translate Figma Design into a Webflow ready structure (already responsive, when using Bricks).
For more info on how to sync Style Systems + Components or translate Figma Design into a Webflow ready structure, check Webflow's Youtube Channel and their University.
Option 2) Figma DEV Mode to Webflow Development
By using Figma and learning our Framework, you're able to translate your designs manually into Webflow with ease and precision. Just clone the Webflow Framework Starter Project, which includes a library of classes and functionality, add needed custom classes and let Webflow Bricks do its Magic.
Always start with a new Webflow Project
Adapting existing projects is complex, can be done, but is not worth the time for what awaits you within a project from a different framework or without even one.
Adding Frameworks to Existing Project won’t import Variable Setups, but it’s also always better to recreate the project with Bricks from scratch, to ensure proper functionality.
By creating a new project, we also aren’t creating any unnecessary classes, that make our build heavier and more complex, than necessary.