/figma-to-webflow

CSS And Build Rules

Read this before creating Webflow variables, classes, styles, or responsive overrides.

Native Styling Gate

• Apply styles with data_style_tool, never with the data_whtml_builder css param. WHTML CSS lands in Designer Custom properties, so the result is hard to edit and does not map to native Style-panel controls.
• Bind Webflow variables with variable_as_value: "<variable-id>" from data_variable_tool. Do not use raw var(--collection---token) strings; they do not render the native variable pill.
• Only truly non-native CSS belongs in Custom properties: backdrop-filter, aspect-ratio, repeating-linear-gradient backgrounds, parent-state selectors, custom mobile-toggle selectors, and similar CSS Webflow cannot model.
• Do not use embed <style> blocks for normal layout, typography, spacing, backgrounds, dividers, grids, cards, or section styling. That hides styling from the Designer style panel.
• Do not use ::before or ::after. Pseudo-elements are invisible in the Navigator and unselectable in Designer. Build decorative lines, grids, badges, and backgrounds as real elements with native classes.

Webflow-Compatible CSS

• Use longhand properties. Expand padding, margin, border, border-radius, font, background, transition, and flex.
• Use class selectors only. No tag, ID, descendant, or attribute selectors. :hover is the only safe pseudo-class in native styles.
• Emit grid-row-gap and grid-column-gap even on flex; Webflow stores gaps under those keys.
• Build desktop-first: base styles apply to all devices, then override downward.
  • main: base desktop
  • medium: 991px and below
  • small: 767px and below
  • tiny: 479px and below
• Prefer flexbox. Use grid only for true two-dimensional layouts.
• Avoid unsupported/dropped values: calc(), clamp(), min(), max(), @keyframes, @font-face, multi-layer box-shadow, logical props, vendor prefixes.
• Put inheritable typography once on .page-wrapper: font family, color, base size, line height. Use single font names, no fallback stacks.

Design System And Units

• Follow the selected variable strategy before building sections.
• Prefer Webflow variables for repeated colors, typography, spacing, and radii unless the user explicitly selected hard-coded output.
• Follow the selected naming strategy. If using FlowKit, read/reference webflow-mcp:flowkit-naming; otherwise use layout/structure-based kebab-case names and never page-prefixed names.
• Follow the selected unit preference. Default to px; convert to rem or em only when the user chooses that strategy.

Element Construction

• Use data_whtml_builder for DOM/structure only: one root element per action, markup, semantic tags, text, nesting, and class names.
• To insert multiple sibling sections, use multiple WHTML actions.
• If a class does not exist, create it with data_style_tool create_style; do not define it through WHTML CSS.
• Create classes before referencing them in WHTML or element class lists. If a custom class exists only as a string in WHTML and no Webflow style exists yet, Webflow can silently drop it, leaving unstyled full-width text or broken layout.
• set_style replaces all classes on an element. Include all intended classes when applying it.
• query_elements style filters are case-insensitive substring matches. Filter results by exact class/type before acting.
• Capture returned element ids from every insert. Re-find later by exact style/type when possible.
• Element ids are {component, element}, where component is the page id. Use the matching top-level pageId.
• Combo classes can be ambiguous. When in doubt, prefer one standalone class with full styling.

Layout Patterns

• Use repeating-linear-gradient, not border-style:dashed, for dashed accents/dividers/underlines so dash length, gap, opacity, and direction match the design.
• Decorative overlays must sit behind content. Make .page-wrapper a stacking context (position:relative; z-index:0) and place overlays at z-index:-1.
• Never use a fixed overlay width wider than the viewport. Prefer left:0; right:0; width:auto; max-width:<design-width>; margin-left:auto; margin-right:auto.
• Replicate interior grid lines too, not just outer edges; check Figma for distributed columns.
• A fixed nav lets the first section sit under the bar; add top-padding to clear it. Sticky nav reserves space.
• Suppress Designer-only .wf-empty affordances on decorative empty normal DivBlocks with a dimension-giving style in the active breakpoint. For custom-tag empty elements, add a child or use a normal DivBlock.