Webflow x Figma #HackPalette2Colors

Tutorial
3 min
Published on Mar 20, 2023
Updated on
Overview of the Flowbase extension for Webflow
Use AI to summarize this article
Key points

You can import your color palette from Figma directly into your Webflow project in just 2 clicks!

How?

Thanks to the Flowbase tool! We'll guide you step by step!

Step-by-step guide

  1. Download the Flowbase Chrome extension
  2. Install the Flowbase Figma plugin
  3. Open the plugin on your Figma design by clicking on "Webflow Color Importer"
  4. Click the CTA "Export Color Swatches"
  5. Open the extension in your Webflow project
  6. Tool Bet → Color Swatch importer → import → upload your JSON file
  7. And there you have it!

Prefer video content?

Check out the hack in video format!

Helpful tutorial 👉 Add a gradient to text in Webflow

You can also learn more about the complementarity of Figma and Webflow

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.
News
Development

Webflow launches Source. Our take on this shift.

Webflow launches Source. Our take on this shift.
Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.
Documentation
AI

Make Your Website Visible in ChatGPT, Perplexity, and AI Answers

Make Your Website Visible in ChatGPT, Perplexity, and AI Answers
Florian Bodelot and Thomas Labonne from Digidop in front of a Webflow Conf 2026 visual announcing their trip to Boston.
Events
Webflow

Webflow Conf 2026: A Particularly Anticipated Edition

Webflow Conf 2026: A Particularly Anticipated Edition
Every great website  
starts with a conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.