Thursday, November 5, 2026 New tutorials published every day
About Contact
Subscribe
Home
Tutorials
Core PHP PHP Course JavaScript React & Next.js Python WordPress Artificial Intelligence
Free Tools
JSON Formatter Base64 Encoder / Decoder Password Generator Text to QR Code Generator Word Counter Case Converter Age Calculator Color Converter Number to Words All Free Tools
Projects
PHP Projects — all projects
Students
Webflow Course Course Registration Download Syllabus Verify Certificate Student Leaderboard
Resources
WordPress Plugins Search tutorials About CodingCush Contact
More
Login
Lesson 07 · CMS & Figma · 5:33

Figma to Webflow: Official Plugin, Step by Step

Prepare a Figma file (Auto Layout, layer names, variables), sync with the official plugin, import into Webflow, clean up and make it responsive.

✓ Free plan Cheat sheet Quiz · 4 questions
Figma to Webflow: Official Plugin, Step by Step video

💡Key ideas

Prepare a Figma file (Auto Layout, layer names, variables), sync with the official plugin, import into Webflow, clean up and make it responsive.

Two ways

Manual rebuild gives full control but takes time. The official Figma to Webflow plugin copies layout, styles and colours for you.

Auto Layout → Flexbox

Auto Layout in Figma becomes Flexbox in Webflow, so direction, gap and padding come across.

Layer names → class names

A layer called contact card becomes a class called contact card. Name every layer clearly.

Variables → Variables

Save colours as Figma variables; after sync they appear in Webflow's Variables panel for the whole site.

🍳
REAL-WORLD EXAMPLEA messy kitchen slows even a great cook. A clean Figma file (Auto Layout, named layers, variables) makes the plugin fast and accurate.

⏱️Chapters

Click a chapter to jump to that moment in the video.

📋Step-by-step

Tick each step as you build it in your own site. Your ticks are saved.

In Figma

In Webflow

⚙️What maps to what

FigmaWebflow
Auto LayoutFlexbox (direction, gap, padding)
Layer nameClass name
Colour variableSite variable
FrameSection / div
Text layerText block or paragraph (set the Heading tag yourself)

⚠️Common mistakes

✕No Auto Layout: elements import with fixed positions and don't flex.
✕Fonts not added to the Webflow site, so text falls back to a default font.
✕Leaving the Figma frame's max-width, so backgrounds stop before the edge of the screen.
✕Headings imported as paragraphs. Use a real Heading element for the main title.

🧠Recap & quiz

First the recap question from the video, then the quiz. Your best score is saved.

Recap: Why does Auto Layout matter so much in Figma?

Auto Layout becomes Flexbox in Webflow, so spacing, direction and alignment come across correctly and the layout stays flexible.

Q1 of 4 · In Figma you name a layer 'contact card'. After import it becomes…

Good layer names give clean class names.

Q2 of 4 · Auto Layout in Figma becomes what in Webflow?

That is why spacing and direction survive the import.

Q3 of 4 · Your imported text uses the wrong font. Fix?

Otherwise Webflow uses a fallback font.

Q4 of 4 · Which should you import first?

Import colours first so the layers can use them.
Your score 0 / 4 Answer all questions to save your score

🏠Homework

Do this on your own site before the next lesson.

Next lesson →
← PREVIOUS

Webflow CMS

❓FAQ & key terms

Is the Figma to Webflow plugin free?

Yes, it is the official plugin made by Webflow.

Do Figma colours import?

Yes, when saved as variables and synced.

Should I always use the plugin?

Use it for clean, Auto Layout designs. For a rough mock-up, rebuilding by hand can be faster.

Auto LayoutVariablesMax width

Lesson 07 of 11 · All cheat sheets · Watch on YouTube