标签：#Figma

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