标签：#figma

Over the last while I've built integrations for three places where people work with text and images: Obsidian , VS Code, and Figma. Doing a few of them back to back, I noticed something you don't see from a single one. They're all desktop apps. For your integration to exist at all, the person first installs a program on their machine, and then, inside it, your plugin. You're not writing for the web. You're writing code locked inside someone else's app — and each app has its own runtime, its own rules, and its own wall for you to walk into. The web trained us to think an HTTP request is one line. Inside someone else's sandbox, it turns out even that has to be earned. Figma was the strictest host of the three. I'll tell it through Figma, because it's locked down tighter than Obsidian or VS Code, and everything shows up on it at once. The task was almost comically simple: select a frame, write a caption, pick your social accounts, publish — without exporting the image and opening a second app. We already had the publishing API, so I expected the Figma side to be small. And it was: the main plugin file is 120 lines. The work wasn't in them. It was around them. Figma gives you bytes, not a file The first version came together easily. When the selection changes, the plugin checks whether there's one exportable node and tells the UI what it found. For the preview it exports a small copy; for publishing, separately, at 2×. const bytes = await nodes [ 0 ]. exportAsync ({ format : " PNG " , constraint : { type : " SCALE " , value : 2 }, }); 2× because the image still has a journey ahead of it: social networks recompress what you upload, and small text on a design goes noticeably softer by the time it lands in a feed. Then the first quirk of the foreign house. Figma hands the plugin not a file but raw PNG bytes — exportAsync() returns a Uint8Array . Our normal API won't eat that — it doesn't take a giant image stuffed into a JSON body. It creates a post first, hands the client

Screenshot prompting has a ceiling. You paste the design, the model makes a plausible approximation, you correct it, and on the next turn it drifts again. Nothing is anchored. The model has no source of truth to check itself against between turns. A context bundle changes the contract. Instead of a pixel reference the model has to interpret every time, you get a structured, referenceable set of files — design tokens, layout IR, component inventory, UI strings — that stay in the session and stay consistent. Claude Code can read them, implement from them, and check its own output against them on demand. This post walks the full pipeline, from bundle export to a reviewed, token-verified implementation, using figmascope , a browser tool that turns any Figma file into exactly that bundle. What makes this deterministic Three things make the bundle referenceable rather than interpretable: Tokens are typed and keyed. tokens.json maps semantic names ( spacing.16 , color.7f5cfe ) to exact values. The model can check its output against the file without re-processing the design. The IR is a tree, not pixels. screens/home.json describes the layout in terms of stack/overlay/absolute/leaf nodes — the same abstraction the implementation target (Compose, React, etc.) uses. There's no visual interpretation step. The bundle is stable across turns. Once it's in the repo, every prompt in the session can reference the same files. Token drift is detectable: ask the model to compare its output against tokens.json and it can do it mechanically. Step 1: Generate the bundle Open figmascope.dev in your browser. Paste your Figma file URL. The exporter runs client-side using the Figma REST API — your Figma personal access token is stored in localStorage and never sent to figmascope's servers. Click Export Agent Context . The page exports top-level frames, resolves design tokens, builds the IR, and downloads context-bundle.zip . Step 2: Unzip into your project # from your project root unzip ~/Dow

I asked an agent to swap one colour value across a file. It did. It also rewrote the line that defined the value in the first place, so the definition now pointed at itself. Nothing errored. Nothing warned. The instruction ran perfectly, which is the whole problem. Every one of these has the same shape A single condition matched more than I meant, and everything that matched got changed. The second one I still think about: hiding a set of shadow rectangles also hid a keyboard, because the keyboard's parts satisfied exactly the same single condition. Again no error, again a clean report of success. Once you see the pattern it's everywhere. It isn't a model being careless. It's an instruction that was less precise than it felt while writing it, executed with total literalness by something that has no idea what any of these objects are for. The rule: scope, and two conditions, never one Name the region it may touch. Not "the file" — this section, these frames, this layer group. Then give it two properties that must both be true. Not "everything with this colour" but "everything with this colour, inside this region, that is a fill rather than a definition". The second condition is doing the real work: it's what stops the match spreading into things that happen to share one attribute. It's a small amount of extra writing. It's the difference between a change and an incident. It cannot see the result — that's the fixed constraint An agent writes the change, the change renders somewhere it has no eyes on, and it reports success based on the instruction completing rather than the outcome being right. People treat that missing feedback loop as a tooling problem, something that will be solved in a future version. I don't think it is one. It's a sequencing problem, and sequencing is available today. The loop can't be closed by the agent. Fine. It can still be closed by a person — just not a hundred times. One, then all Run the operation on a single representative case. Render

On one build I found 127 places bound to a raw colour instead of a named role. Every single one had passed visual review. They all surfaced the moment someone asked for dark mode. That number is the whole argument. Not because 127 is large, but because none of them looked wrong. A value that was typed in and a value that came from the system are visually identical. The difference only exists in what happens next. The failure isn't that the agent breaks the rules It's that it extends them. Give an agent a design system and ask it to build. When it reaches something the system covers, it uses the system — genuinely, reliably. When it reaches something the system doesn't cover, it does not stop and ask. It invents. And what it invents is a name that sounds exactly like one of yours, sitting right next to the real ones, reading as though someone chose it on purpose. That's why this is so hard to catch by eye. A fabricated token isn't a glaring error. It's a plausible one. Six months later nobody can tell you whether it was a deliberate exception or a hallucination, and by then five components depend on it. Readable is not the same as closed Making a library available to an agent gets you components it will reuse. It does not get you a closed set. A closed set means: these values exist, everything else does not, and anything outside them fails loudly rather than passing quietly. The distinction sounds pedantic and it decides everything. A readable system produces output that mostly matches. A closed system produces output you can audit. Which is the real test I'd apply to any AI design setup: not how much of your system it covers, but what happens to the things it doesn't cover. If those slip through silently, coverage is irrelevant — you've just made the drift harder to spot. Layers, and not reaching past them Tokens have layers for a reason. Base values underneath — the raw material. Named roles on top — what a value is for. And the product interface binds to the role,

This is the stretch nobody films. The demo ends at the screenshot; the job ends about a week later, in a Figma file that someone else has to be able to open without you in the room. It's also where roughly 40% of the work lives, and where most AI-assisted design quietly falls over — not because the screens are bad, but because nothing in them is addressable. Import destroys the names Bring generated markup into Figma and everything arrives as a frame inside a frame inside a frame, with names that mean nothing. The structure survives. The meaning doesn't. The instinct at this point is to start componentising from what's on the canvas — find a button in a screen, make it a component, move on. Don't. That tree is a rendering artefact. Build your library from it and you inherit every accident in it: wrapper divs promoted to components, layout containers baked into masters, the same element modelled three different ways because it appeared in three different screens. The source markup is the specification. It knows what each thing is. So the first move is reading it and producing a record of what should exist and what it should be called — then renaming against that record, then componentising. Rename first, componentise second. Reversing those two costs more than any other ordering mistake in this stage. Library first, screens second Masters get built in a clean library section, not harvested from inside screens. The difference shows up in what ends up inside the component. Harvested masters carry their surroundings — a padding wrapper that belonged to the screen, a demo label, a background that existed to make it visible on a dark canvas. Those things then travel into every instance, and six months later somebody is asking why every card has eight pixels of phantom padding. Same-structure things get grouped into a variant set rather than left as separate components. A button that arrives as five unrelated components instead of one set is the single most common breakage

The Y Combinator-backed company started a vibe-coding platform and later built an agent-creation product.

Figma shipped native Motion. A real animation timeline, right inside the file. When that landed, a lot of people emailed me some version of the same question: "is MotionKit dead now?" Fair question. My honest first reaction was a quiet "...maybe." But the more I used native Motion, the clearer it got — it's genuinely good, and it's not trying to be everything. No physics. No frame-by-frame. No Lottie export. No morphing. So the move was never to compete with it. The move was to bridge to it — let the two tools hand work back and forth, and let MotionKit be the power layer that does the stuff native Motion can't. So that's what this update is. A two-way bridge between MotionKit and Figma's native Motion. Here's everything it does, and exactly how to use it. The short version Four moves, one little control in the header: Import native Motion into MotionKit as real, editable keyframes Live sync (read-only by default) so changes in Figma Motion flow into MotionKit as you work Link for export so your native Motion renders inside a Lottie without duplicating anything Push MotionKit keyframes back into native Motion — including motion you baked from the physics engine And the headline trick: bake a real physics drop in MotionKit, then push it into Figma Motion as native keyframes. Native Motion has no physics engine. Now it kind of does. First, find the bridge Look at the top-right of the toolbar, next to the Pro star. There's a small badge: the MotionKit diamond, an arrow, and the Figma logo . That little arrow is the status. You don't have to open anything to read it: faint dotted line → not connected arrow pointing into MotionKit → reading from Figma, live, read-only arrows on both ends → two-way, MotionKit also writes back If there's native Motion sitting on the current frame but you haven't connected, you'll see a small purple dot on the Figma side — that's "hey, there's something here to import." Click the badge to open the bridge. That's the whole mental model. Dire

The whole industry seems to have agreed on a standard for design tokens. The shift it sets up is still on its way. Design tokens are not new. The term was coined in 2014, at Salesforce, by Jina Anne and Jon Levine. 1 By 2017, Amazon had open-sourced Style Dictionary and the idea had spread well past Salesforce. We have been shipping design tokens for over a decade. What we never did, in all that time, was agree on a format. Every tool and every team rolled its own shape. There was never one neutral way to write a token down, its value and its meaning, so that any other tool could read it. Have you heard of DTCG? I hadn't, until recently. It is the Design Tokens Community Group, a W3C effort to finally settle that format. 2 The repo is quiet, but that is because the spec reached its first stable version in late 2025, not because anyone walked away. The quiet is a thing being finished, not abandoned. The list of who is backing it is not quiet at all. Adobe. Google. Microsoft. Meta. Amazon. Shopify. Salesforce. Sony. Pinterest. The New York Times. Disney. Framer. Penpot. Figma. Plus a dozen more. 2 That is not a side project. That is most of the industry quietly agreeing on something. One of those names, Figma , is the reason for the title of this piece. We will get to it, because the irony is the whole point. Here is my bet, and I will say up front that it is a bet. I think a storm is coming for design tooling. You do not have to believe me about the storm, because the bet does not depend on it. If you are wiring your tokens straight into one vendor's format, you are exposed. Anchor them to the open standard instead and you are not. The downside is lopsided. If I am wrong, you have lost almost nothing. If I am even half right, everyone hard-coded to a single tool is facing a rewrite. The format is young and already fragmenting. That is the point. The obvious objection is that the standard is too new to bet on, and already splintering. It is splintering. Google's DESIG

Figma's update adds a new code layer, support for motion and shaders, and the ability to create custom plug-ins for various tasks using AI.

A beautiful interface isn't created by random colors. The right color palette can increase usability, improve brand recognition, and guide users toward important actions. Here's a simple process I follow when designing products: ✅ 1. Start with Your Brand Personality Ask yourself: • Professional or playful? • Premium or affordable? • Modern or traditional? Examples: 🔵 Blue = Trust, security, professionalism 🟢 Green = Growth, health, sustainability 🟣 Purple = Creativity, innovation 🔴 Red = Energy, urgency, excitement Your primary color should reflect your brand's personality. ━━━━━━━━━━━━━━ ✅ 2. Use the 60-30-10 Rule A balanced interface often follows: • 60% Primary Background Color • 30% Secondary Color • 10% Accent Color This creates visual harmony and prevents color overload. ━━━━━━━━━━━━━━ ✅ 3. Limit Your Palette Many beginners use too many colors. A professional UI usually needs: • 1 Primary Color • 1 Secondary Color • 1 Accent Color • Neutral Colors (White, Gray, Black) Less is often more. ━━━━━━━━━━━━━━ ✅ 4. Think About Accessibility Your design should work for everyone. Check: ✔ Text contrast ✔ Button visibility ✔ Readability on mobile screens If users struggle to read content, even the most beautiful design fails. ━━━━━━━━━━━━━━ ✅ 5. Create a Consistent Color System Instead of random shades: Primary: • 50 • 100 • 200 • 300 • 400 • 500 Secondary: • 50 • 100 • 200 • 300 • 400 • 500 This makes scaling your product much easier. ━━━━━━━━━━━━━━ ✅ 6. Analyze Successful Products Study platforms like: • Airbnb • Spotify • Stripe • Notion Notice how they use color intentionally to guide user attention. ━━━━━━━━━━━━━━ 💡 Quick Formula Primary Color → Brand Identity Secondary Color → Support Content Accent Color → Call-To-Action Buttons Neutral Colors → Layout & Typography Good UI isn't about using more colors. It's about using the right colors in the right places. What's your favorite color palette for modern web applications? UIUX #UIDesign #UXDesign #WebDesign #Produc

AI design system output is approximate by default. Wrong border radii, raw hex values, inconsistent tokens across 60 components. The fix isn't better prompts. Here's the structural change that made it exact using Figma's REST API. The fourth time I manually corrected the same border radius mistake in an AI-generated component, I stopped and asked why this kept happening. Not "what prompt would fix this?" The deeper question: why does every AI tool I tried get the structure right and the values wrong? The button was correct. The variants were there. The layout matched the Figma spec. But borderRadius: 8 when it should be borderRadius: '8px' . A spacing gap of 8 when the spec said 6 . The color #3B82F6 sitting in the file where semantic.button.primary should be. None of it wrong in a way that breaks the build. All of it wrong in a way that breaks the design system. After hitting this wall enough times, I realized the problem wasn't the AI. It was the question I was asking it. Why AI keeps generating the wrong Figma design tokens When you give an AI tool a Figma screenshot and ask it to produce a component, it does something reasonable: it interprets what it sees. The structure, the layout, the hierarchy - it gets most of that right. What it cannot get right is the token mapping. The AI doesn't know your semantic token file. It doesn't know that #3B82F6 maps to semantic.button.primary in your codebase. It doesn't know that your MUI setup multiplies numeric border radii by 4, which means borderRadius: 8 renders at 32px instead of 8px . So it approximates. Here's what that looks like in practice: What AI produces What the spec requires Why it's wrong borderRadius: 8 borderRadius: '8px' MUI multiplies numeric values by 4 gap: 8 gap: 6 Spacing value not extracted from Figma color: '#3B82F6' semantic.button.primary Raw hex instead of semantic token fontSize: 14 variant="MD_Medium" Typography token not resolved Across one component, these deviations are small. Across 60 comp

Introduction Since I started publishing articles on Dev.to, I've been working on a personal project to transform my old blog website—which is no longer actively maintained—into a portfolio site ♻️ As part of that project, I recently started learning Figma and UI design🎨 When I discovered Figma MCP , I imagined a future where generative AI could automatically create polished, modern, and visually appealing designs for me with minimal effort 😎 Unfortunately, reality turned out to be quite different . This article is a reflection on that experience and a reminder to my future self about what I learned along the way📝 TL;DR I wanted to design a portfolio website in Figma , but quickly realized that UI design was more difficult than I expected. I wondered whether using Codex and Figma MCP would allow me to outsource the design process to AI , so I decided to try it. I couldn't magically generate the polished design I had imagined while also maintaining a well-structured Figma file with globally managed variants and reusable components. I learned that defining design rules first and building components step by step helped produce results that were much closer to my original vision. Even then, the process was not dramatically easier than expected, so I eventually decided to keep things simple and build my portfolio around the design principles already provided by shadcn/ui . What I Tried with Figma MCP🎨 While planning the UI design for my portfolio website , I initially created simple wireframe-like layouts in Figma to explore the overall page structure and component placement before working on detailed designs. At first, I wanted to keep things simple. However, as I continued working on the project, I found myself wanting something more polished, more modern, and ultimately more impressive . The problem was that I have very little confidence in my design skills. I'm an in-house IT engineer, not a professional developer or designer, so I often struggle to judge what makes a

PixToCode is a new Figma plugin that turns the frames you've already designed into production-ready code with AI — React, Angular, Vue, or HTML, all Tailwind-first. Just published on the Figma Community: figma.com/community/plugin/1641790551381890223/pixtocode What it does Select one or more frames in Figma, pick a framework, click Generate. About 10 seconds later you have clean code that uses the exact colors, spacing, typography, and layout from your file — not generic Tailwind utility soup. Highlights: 4 frameworks — React (TypeScript), Angular (standalone + Signals), Vue 3, or semantic HTML5. All Tailwind-first. UI library presets — shadcn/ui, Material UI, Chakra, Ant Design on React, Angular Material on Angular. Output uses the real components , not generic divs. Refine with plain English — type "make the button rounded" or "use green for the active tab" and the AI rewrites the component in place. Multi-frame batch — select up to 5 frames, get them all in one pass. Variants → typed props — a Figma Component Set with Primary / Secondary / Disabled becomes one typed prop-driven component, not three duplicate files. Live browser preview — see the generated component rendered in a sandboxed tab before pasting it into your project. Cloud history — every generation saved to your account, synced across devices. How it works Get a free license key at pixtocode.com (5 free generations, no credit card). Install the plugin from the Figma Community. Paste the key into the plugin's license field. Select a frame, choose a framework, click Generate. Copy the code straight into your project. That's the whole flow. Pricing Free — 5 generations on signup Pro — $20/month for 100 generations Power — $39/month for 250 generations Team — $99/month, 5 seats, 600 shared generations (scales to 10 seats) All paid plans have a 7-day refund guarantee. Tips for best results Frames with auto-layout , named layers , and consistent design tokens produce the cleanest output. For huge dashboard