Intranets Today

I tried “Figma vibe coding” for a month — here’s how it actually felt

I kept hearing folks say, “Match the vibe, not just the pixels.” Cute line. But could I code the same calm, airy feel I saw in Figma? I gave myself one month to live that idea. I called it “Figma vibe coding.”
If you want the blow-by-blow diary of that 30-day sprint, my extended write-up lives here.

Short version? It works. Most days. But it takes care and a few small tricks.

Let me explain.

What I mean by “Figma vibe coding”

It’s not only copying sizes. It’s catching the mood. The rhythm. The tiny motion. The soft shadow with a hint of blue. The space that lets text breathe. I used Figma files with Variables, Dev Mode, and Auto Layout. Then I matched that feel in code.

Design isn’t the only arena where “vibe” matters. Regional culture has its own texture—picture the salty breeze and unhurried afternoons along France’s Atlantic coast. If you’re curious how that ambience shapes dating and intimacy, the deep-dive on sexe en Bretagne unpacks local attitudes, best meeting spots, and practical tips, offering a cultural crash course as nuanced as any style guide. Likewise, if you're designing for audiences along the Gulf Coast, it helps to understand how smaller Texas towns cultivate their own laid-back social rhythms; browsing the classifieds on the Doublelist Lake Jackson board offers a candid snapshot of local interests and conversation styles, which can inspire UI copy and ensure your product voice feels native.

My setup:

  • Figma with Variables, Dev Mode, and Tokens Studio
  • Next.js + React + Tailwind CSS
  • Framer Motion for micro moves
  • Style Dictionary to turn tokens into CSS
  • I also tested Locofy and Anima on two screens, just to compare

You know what? The handoff felt kinder when the tokens matched.

The simple workflow that actually clicked

  • In Figma, I set color, type, and spacing as Variables. Names like color.bg, color.primary.600, space.16.
  • I synced them with Tokens Studio. I exported JSON.
  • I ran Style Dictionary to make CSS variables.
  • Tailwind read those variables, so classes still felt natural.

Here’s the tiny core that made things sing:

/* tokens.css (built by Style Dictionary) */
:root {
  --color-bg: #0b0b0c;
  --color-surface: #101114;
  --color-primary-600: #3b82f6;
  --color-text: #e5e7eb;

  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;

  --radius-4: 4px;
  --radius-8: 8px;

  --shadow-soft: 0 8px 24px rgba(0,0,0,0.2);
}
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: "var(--color-bg)",
        surface: "var(--color-surface)",
        primary: {
          600: "var(--color-primary-600)",
        },
        text: "var(--color-text)",
      },
      spacing: {
        4: "var(--space-4)",
        8: "var(--space-8)",
        16: "var(--space-16)",
        24: "var(--space-24)",
      },
      borderRadius: {
        4: "var(--radius-4)",
        8: "var(--radius-8)",
      },
      boxShadow: {
        soft: "var(--shadow-soft)",
      },
    },
  },
};

Tiny thing. Big mood shift.
For a step-by-step breakdown with even more real code snippets, check out this vibe-coding guide I published.

Real example 1: The pricing card that kept the vibe

The Figma spec:

  • 8-pt grid; space steps 8, 16, 24
  • Surface: slightly warm gray
  • Corner: 8px
  • Shadow: y=8, blur=24, 20% black
  • Button: primary-600 with a gentle hover scale
  • Type: Inter 16/24 body, 28/34 title (Figma called it “title.md”)

Here’s the React piece I shipped. It looked like the Figma shot on my second monitor. Close enough that our PM grinned.

import { motion } from "framer-motion";

export function PricingCard() {
  return (
    <div className="bg-surface text-text rounded-8 shadow-soft p-24 w-full max-w-md">
      <h3 className="text-[28px] leading-[34px] mb-8">Starter</h3>
      <p className="text-[16px] leading-[24px] mb-16 opacity-80">
        Good for a small project. No stress.
      </p>
      <div className="flex items-end gap-8 mb-24">
        <span className="text-[34px] leading-[40px]">$12</span>
        <span className="opacity-70">per month</span>
      </div>
      <motion.button
        whileHover={{ scale: 1.02 }}
        transition={{ type: "spring", stiffness: 300, damping: 24 }}
        className="bg-primary-600 text-white rounded-8 px-16 py-8"
      >
        Get started
      </motion.button>
    </div>
  );
}

That spring felt like the little Figma prototype we passed around. Soft. Not bouncy.

Real example 2: The “quiet form” that didn’t shout

The Figma file had “quiet” fields. Thin border. Calm focus ring. Almost no shadow. My code kept that hush.

function QuietInput(props) {
  return (
    <input
      {...props}
      className="
        w-full bg-surface text-text rounded-4 px-16 py-8
        border border-[#1f2937] focus:outline-none
        focus:ring-2 focus:ring-offset-0
        focus:ring-[color:var(--color-primary-600)]
        placeholder:opacity-60
      "
      placeholder="Email"
    />
  );
}

Tip I learned the hard way: don’t overdo the ring. 2px was enough. Figma’s shadow there was more mood than math.

Real example 3: Dark mode that matched Figma Variables

The Figma file had two modes: light and dark. Variables flipped. I did the same with a data attribute. No drama.

export function ThemeToggle() {
  function toggle() {
    const root = document.documentElement;
    const light = root.getAttribute("data-theme") === "light";
    root.setAttribute("data-theme", light ? "dark" : "light");
  }
  return (
    <button onClick={toggle} className="px-16 py-8 rounded-4 border">
      Toggle theme
    </button>
  );
}

Because the tokens sat on CSS vars, the whole app changed tone with one flip. That felt like magic, but simple.

Where it felt great

  • Auto Layout → Flexbox mapping made sense. Gap in Figma turned into gap-16 in code. Clear.
  • Dev Mode specs were solid. I used the “Copy as CSS” button more than I want to admit.
  • Tokens Studio kept names steady. color.primary.600 in Figma matched my code. Less guessing.
  • Motion matched when I used custom curves. I pulled cubic-bezier values right from the design note.

Small aside: I worked late with lo-fi beats one night. This sounds silly, but matching space and tone made the build feel calm. Like tidying a room. You feel it.

Where it tripped me up

  • Shadows. Figma’s blur felt softer than CSS box-shadow on dark surfaces. I had to lower alpha or stack two shadows. One wide, one faint.
  • Border radii on nested frames. Sometimes Figma showed 8px, but the inner mask made it look 6px. In code, it looked off by a hair. I bumped it to 10px to trick the eye.
  • Timing curves. Framer Motion’s default isn’t Figma’s default. I used a custom cubic-bezier for hover to match the prototype note: cubic-bezier(0.2, 0.8, 0.2, 1).

I know, tiny things. But vibe is tiny things.

A quick test I run on every build

I made a “vibe check” page. Just a plain route with:

  • Type ramp samples: H1 to small body
  • Space scale blocks: 4, 8, 16, 24
  • Buttons with hover and focus

zielkeguptill