How every designer’s favorite app is turning design dreams into code nightmares.Image by authorIf you’re a Figma fanatic, you’ve probably heard about the launch of Figma Sites — a new tool that promises to let designers create and publish fully interactive websites directly from the platform.At first glance, it sounds revolutionary. No need to hand off Figma files to a developer or convert them into Framer or Webflow layouts. Just click a few buttons and — boom — instant websites. But if it sounds too good to be true, it probably is.Being the skeptic that I am, I decided to dig into the code it produces. And, not surprisingly, it’s a mess — a sea of <div> and <span> tags and random classes with zero regard for semantic structure.Screenshot of code generated by Figma Sites.For those who don’t know, semantics in code means using HTML elements that clearly describe their purpose — like <header> for page headers, <section> for content sections, and <article> for standalone content.Proper class structures are just as crucial — they should be meaningful, consistent, and follow naming conventions that make the code readable and maintainable.For example, instead of using class="css-z91rnx" which is the kind of autogenerated gibberish Figma Sites spits out, it should be something like class="header-main" or class="btn-primary" to clearly convey the element’s purpose and maintain consistency across the project.And good code isn’t just about neatness. It’s essential for accessibility. Semantic elements like <nav> and <button> aren’t just for show — they help screen readers and assistive technology navigate the page, making it usable for everyone.Then there’s SEO. Search engines rely on semantic structure to properly index content. If your site is a sea of <div> tags with meaningless classes, search engines struggle to understand the hierarchy and relevance of your content. That means your Figma site might look good but rank like garbage.But let’s be real — the biggest red flag here is how Figma Sites feels like another rushed-to-market product. It’s yet another low-code, no-code tool jumping on the “vibe coding” bandwagon — prioritizing drag-and-drop ease over actual code quality. It’s like they’re cashing in on the trend without caring about what’s under the hood.And that’s a problem. I get that a lot of new designers don’t know how to assess front-end code, but Figma should know better.This points to one of two things — either Figma is incompetent, or they’re deliberately misleading designers into thinking this is publishable code. And I’d like to believe a company like Figma isn’t incompetent, which leaves us with the second option — they’re selling a promise that doesn’t deliver.Don’t get me wrong — it does produce code, just in the most rudimentary way possible. By “deliver,” I mean quality code that actually aligns with the standards they claim to uphold.I’m willing to give Figma the benefit of the doubt and assume they have internal developers working on this tool who know what bad code looks like. So maybe Sites was rushed out the door to meet a deadline (cough, Config 2025), even though it wasn’t ready.To be fair, Figma does say Sites is in open beta, but there’s a big difference between a beta release and convincing people it’s nearly production-ready — and Sites is nowhere close to delivering quality websites.But if that’s the case, why not just admit it’s more of a work in progress than something shippable? Oh right, because that would hurt the bottom line. And at the end of the day, that’s what it’s always about.Figma Config 2025Figma Sites, as it stands, is nothing more than a glorified prototyping tool — because no one with an ounce of dignity would launch a site, even a basic landing page, using such atrocious code.But prototyping is what Figma already does best — it’s the platform’s core function. So unless they plan to overhaul Sites, it’s just another excuse to squeeze more money out thier users. Classic corporate move.But it’s not all doom and gloom— Figma just gave us a masterclass in what not to do. If they’re serious about empowering designers to create real websites, there’s a right way to do it.And here’s the kicker — we, as designers, have the power to push them to deliver a tool that actually lives up to the hype. But that means dropping the fanboy mentality and critiquing these features with the same scrutiny we’d apply to our own work.Instead of selling a half-baked solution, Figma could invest in making Sites a real, production-ready tool that generates semantic, accessible, and SEO-friendly code. That would be a game changer — a tool that not only simplifies the design-to-code workflow but actually upholds the standards that matter.Until then, if you care about how your work performs beyond the Figma canvas, it might be time to keep a developer on speed dial. Or better yet, learn some basic front-end code yourself. Because knowing how to spot bad code is the first step in demanding better from companies like Figma.Don’t miss out! Join my email list and receive the latest content.Figma Sites: innovation or exploitation? was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Editor’s note: This post is part of Into the Omniverse, a series focused on how developers, 3D practitioners and enterprises can transform their workflows using the latest advances in OpenUSD and NVIDIA Omniverse. Computer-aided engineering (CAE) is at the forefront of modern product development, enabling engineers to virtually test and refine designs before building physical prototypes. Among the powerful CAE methods, computational fluid dynamics (CFD) simulation plays a critical role in understanding and optimizing fluid flow for use cases, such as aerodynamic testing in aerospace and automotive engineering or thermal management for electronics. The NVIDIA Omniverse Blueprint for real-time digital twins provides a powerful framework for developers to build complex CFD simulation solutions with the combined power of NVIDIA CUDA-X acceleration libraries, NVIDIA PhysicsNeMo AI framework and NVIDIA Omniverse, and Universal Scene Description (OpenUSD). Multiphysics simulation generates a high diversity of data with optical, thermal, electromagnetic and mechanical applications, all requiring different inputs and outputs. OpenUSD provides a unified data model that connects the CAE ecosystem so digital twins can operate in real time with diverse data inputs. This seamless interoperability between tools is crucial for engineering efforts that rely on accurate, consistent CFD simulations. Industry Leaders Deliver 50x Faster Simulation  At NVIDIA GTC in March, NVIDIA announced that leading CAE software providers, including Ansys, Altair, Cadence, Siemens and Synopsys, are accelerating their simulation tools, including for CFD, by up to 50x with the NVIDIA Blackwell platform. Thanks to accelerated software, NVIDIA CUDA-X libraries and performance-optimization blueprints, industries like automotive, aerospace, energy, manufacturing and life sciences can greatly reduce product development time and costs while increasing design accuracy and remaining energy efficient. Ansys, a leader in simulation software, is harnessing the power of NVIDIA technologies for real-time physics and accelerated simulation with AI-driven digital twins. By integrating NVIDIA GPUs and tapping into Blackwell’s advanced accelerated computing capabilities, Ansys software enables engineers to run complex CFD simulations at unprecedented speed and scale. Real-Time Digital Twins for CFD Ansys is also adopting Omniverse and OpenUSD to create more connected, collaborative simulation environments for CFD. Ansys users can build real-time digital twins that integrate data from multiple sources, and now those multidisciplinary CFD simulations can be integrated into the visually rich Omniverse environment. Learn more about how Ansys is using NVIDIA technologies and OpenUSD to advance its CFD workflows in this livestream replay: Get Plugged Into the World of OpenUSD Join NVIDIA GTC Taipei at COMPUTEX, running May 19-23, to see how accelerated computing, Omniverse and OpenUSD advance 3D workflows. Watch NVIDIA founder and CEO Jensen Huang’s COMPUTEX keynote on Monday, May 19, at 11 a.m. Taiwan Time. Ansys Simulation World is a virtual and in-person global simulation experience. The virtual event takes place July 16-17, and includes a keynote from Huang that will provide a closer look at the transformative power of accelerated computing and AI to enable computational engineering breakthroughs – including CFD – across all industries. Until then, watch Ansys GTC sessions on demand to learn more. Discover why developers and 3D practitioners are using OpenUSD and learn how to optimize 3D workflows with the new self-paced “Learn OpenUSD” curriculum for 3D developers and practitioners, available for free through the NVIDIA Deep Learning Institute. For more resources on OpenUSD, explore the Alliance for OpenUSD forum and the AOUSD website. Stay up to date by subscribing to NVIDIA Omniverse news, joining the community and following NVIDIA Omniverse on Instagram, LinkedIn, Medium and X. Featured image courtesy of Ansys.

Join our daily and weekly newsletters for the latest updates and exclusive content on industry-leading AI coverage. Learn More UK-based chip designer Arm offers the architecture for systems-on-a-chip (SoCs) that are used by some of the world’s largest tech brands, from Nvidia to Amazon to Google parent company Alphabet and beyond, all without ever manufacturing any hardware of its own — though that’s reportedly due to change this year. And you’d think with a record setting last quarter of $1.24 billion in total revenue, it might want to just keep things steady and keep raking in the cash. But Arm sees how fast AI has taken off in the enterprise, and with some of its customers delivering record revenue of their own by offering AI graphics processing units that incorporate Arm’s tech, Arm wants a piece of the action. Today, the company announced a new product naming strategy that underscores its shift from a supplier of component IP to a platform-first company. “It’s about showing customers that we have much more to offer than just hardware and chip designs. specifically — we have a whole ecosystem that can help them scale AI and do so at lower cost with greater efficiency,” said Arm’s chief marketing officer Ami Badani, in an exclusive interview with VentureBeat over Zoom yesterday. Indeed, as Arm CEO Rene Haas told the tech news outlet Next Platform back in February, Arm’s history of creating lower-power chips than the competition (cough cough, Intel) has set it up extremely well to serve as the basis for power-hungry AI training and inference jobs. According to his comments in that article, today’s data center consume approximately 460 terawatt hours of electricity per year, but that is expected to triple by the end of this decade, and could jump from being 4 percent of all of the world’s energy usage to 25 percent — unless more Arm power-saving chip designs and their accompanying optimized software and firmware are used in the infrastructure for these centers. From IP to platform: a significant shift As AI workloads scale in complexity and power requirements, Arm is reorganizing its offerings around complete compute platforms. These platforms allow for faster integration, more efficient scaling, and lower complexity for partners building AI-capable chips. To reflect this shift, Arm is retiring its prior naming conventions and introducing new product families that are organized by market: Neoverse for infrastructure Niva for PCs Lumex for mobile Zena for automotive Orbis for IoT and edge AI The Mali brand will continue to represent GPU offerings, integrated as components within these new platforms. Alongside the renaming, Arm is overhauling its product numbering system. IP identifiers will now correspond to platform generations and performance tiers labeled Ultra, Premium, Pro, Nano, and Pico. This structure is aimed at making the roadmap more transparent to customers and developers. Emboldened by strong results The rebranding follows Arm’s strong Q4 fiscal year 2025 (ended March 31), where the company crossed the $1 billion mark in quarterly revenue for the first time. Total revenue hit $1.24 billion, up 34% year-over-year, driven by both record licensing revenue ($634 million, up 53%) and royalty revenue ($607 million, up 18%). Notably, this royalty growth was driven by increasing deployment of the Armv9 architecture and adoption of Arm Compute Subsystems (CSS) across smartphones, cloud infrastructure, and edge AI. The mobile market was a standout: while global smartphone shipments grew less than 2%, Arm’s smartphone royalty revenue rose roughly 30%. The company also entered its first automotive CSS agreement with a leading global EV manufacturer, furthering its penetration into the high-growth automotive market. While Arm hasn’t disclosed the EV manufacturer’s precise name yet, Badani told VentureBeat that it sees automotive as a major growth area in addition to AI model providers and cloud hyperscalers such as Google and Amazon. “We’re looking at automotive as a major growth area and we believe that AI and other advances like self-driving are going to be standard, which our designs are perfect for,” the CMO told VentureBeat. Meanwhile, cloud providers like AWS, Google Cloud, and Microsoft Azure continued expanding their use of Arm-based silicon to run AI workloads, affirming Arm’s growing influence in data center compute. Growing a new platform ecosystem with software and vertically integrated products Arm is complementing its hardware platforms with expanded software tools and ecosystem support. Its extension for GitHub Copilot, now free for all developers, lets users optimize code using Arm’s architecture. More than 22 million developers now build on Arm, and its Kleidi AI software layer has surpassed 8 billion cumulative installs across devices. Arm’s leadership sees the rebrand as a natural step in its long-term strategy. By providing vertically integrated platforms with performance and naming clarity, the company aims to meet increasing demand for energy-efficient AI compute from device to data center. As Haas wrote in Arm’s blog post, Arm’s compute platforms are foundational to a future where AI is everywhere—and Arm is poised to deliver that foundation at scale. What it means for AI and data decision makers This strategic repositioning is likely to reshape how technical decision makers across AI, data, and security roles approach their day-to-day work and future planning. For those managing large language model lifecycles, the clearer platform structure offers a more streamlined path for selecting compute architectures optimized for AI workloads. As model deployment timelines tighten and the bar for efficiency rises, having predefined compute systems like Neoverse or Lumex could reduce the overhead required to evaluate raw IP blocks and allow faster execution in iterative development cycles. For engineers orchestrating AI pipelines across environments, the modularity and performance tiering within Arm’s new architecture could help simplify pipeline standardization. It introduces a practical way to align compute capabilities with varying workload requirements—whether that’s running inference at the edge or managing resource-intensive training jobs in the cloud. These engineers, often juggling system uptime and cost-performance tradeoffs, may find more clarity in mapping their orchestration logic to predefined Arm platform tiers. Data infrastructure leaders tasked with maintaining high-throughput pipelines and ensuring data integrity may also benefit. The naming update and system-level integration signal a deeper commitment from Arm to support scalable designs that work well with AI-enabled pipelines. The compute subsystems may also accelerate time-to-market for custom silicon that supports next-gen data platforms—important for teams that operate under budget constraints and limited engineering bandwidth. Security leaders, meanwhile, will likely see implications in how embedded security features and system-level compatibility evolve within these platforms. With Arm aiming to offer consistent architecture across edge and cloud, security teams can more easily plan for and enforce end-to-end protections, especially when integrating AI workloads that demand both performance and strict access controls. The broader effect of this branding shift is a signal to enterprise architects and engineers: Arm is no longer just a component provider—it’s offering full-stack foundations for how AI systems are built and scaled. Daily insights on business use cases with VB Daily If you want to impress your boss, VB Daily has you covered. We give you the inside scoop on what companies are doing with generative AI, from regulatory shifts to practical deployments, so you can share insights for maximum ROI. Read our Privacy Policy Thanks for subscribing. Check out more VB newsletters here. An error occured.

On an unremarkable Monday last February, Andrej Karpathy fired off a tweet that gave the internet its new favorite buzz-phrase: vibe coding.Within hours, people watched tools like Bolt, v0, and Lovable conjure apps from mock-ups never designed or developed.The internet cheered—speed looks spectacular in demo reels—but more senior groups were quietly wincing as AI began to add technical debt to large codebases at previously impossible rates.Why demo-first AI fails mature teamsHere’s how senior designers, developers, and marketers feel the pain.Designers: Prefab design systems ≠ your design systemToday’s one-click generators choose their own colors, border-radii, and fonts. The instant they collide with a house style they don’t recognize, they hard-code new hex values that overwrite your brand tokens, throw off the grid, and leave designers sending screenshots of mismatched styles to the bug tracker.When you draw a picture, you spend your time carefully crafting the shapes and lines. Great design comes from consistency of intention.Today’s AI designers give you a page full of chicken scratches, an eraser, and a “good luck.”Developers: One-shot codegen ≠ production code.A “fully-working” React page arrives as a single 1,200-line component—no tests, no accessibility tags, no separation of concerns. The diff looks like a CVS receipt.The dev who merges it now basically owns a tarball that will resist every future refactor. Code feels like inheriting a junior’s side project, but the junior in this case is an LLM that never sleeps and can’t be taught.Clean, maintainable code is measured by how many lines you can still cut. Without context of your existing codebase or a lot of fine-tuning, AI’s tendency is to be too verbose.Marketers: Fake data ≠ live experiments.Marketing can now crank out a landing page in fifteen minutes, but every testimonial, price, and CTA is still lorem ipsum.Wiring the page to the CMS—and to analytics—means rewriting half the markup by hand. Every 10x sprint lands on an engineering backlog.You can generate pages, sure, but you’re gonna have to wait on the revenue.What’s left for us?Call it all the 80/20 hangover: AI generates the first 80% of the job in 20% of the time… then teams grind through the next 80% of the time patching the final 20% of the work.It’s the perfect inversion of healthy collaboration. Humans drown in drudgery and plead with the machine to handle the craft. But here’s the thing: The lesson isn’t that AI is snake oil; it’s that big team problems aren’t solved by fast AI alone.Sure, “Make me a meal-planning app” is a fun toy, but as we’ve seen, speed without fidelity just moves the bottleneck downstream.What we need is to respect the craft already living in your components, tokens, data, and tests. We need AI for grown-ups.The two-sided contract of AI for grown-upsHere’s the proposal: what if we started building AI with competent teams in mind?For that kind of tooling, two mindset shifts need to happen, both from the builders of AI software and the professionals that use it.Builders need to…Respect the stack. Every pixel, prop, token, schema, and test that already lives in a repo becomes the rails, not a suggestion. Professionals should be able to easily predict what AI outputs will look like. Stay in their lane. Instead of inventing Yet-Another-Canvas, the tooling embeds itself in the software the best teams already use: Figma, IDEs, headless CMSes, etc. Professionals work hard to choose their tools, and AI alone is not a compelling enough reason to switch. Expose control. Codegen happens in daylight—via CLI hooks, readable diffs, and human review gates—so senior engineers can keep the quality bar where it belongs. Professionals are smart enough to handle the machine, so long as it shows them what it’s doing.It’s not up to the professional world to keep perfect pace with the runaway train of AI. It’s the tool builders’ responsibility to stop breaking so much stuff.Professionals need to…Feed the context. Put in the work to document processes, map prototypes to real components, hand over design tokens, and write the first round of tests. Give the model a fighting chance at fidelity. Builders will use this to make AI generations far more deterministic.Stay accountable. A merged PR is still a human name on the line for the most intricate of crafts: UX polish, performance budgets, sparkling copy, etc. Builders don’t have to design all-star AI; they can focus on making it consistent at the grunt-work.Recognize AI limits. Designers, developers, and marketers use AI primarily as the translation layer between deeply skillful fields. Builders don’t need to make AI that replaces teams, but rather AI that fosters communication in the handoffs.It’s not up to the Builders to anticipate every team’s exact use case. Instead, they can trust that professionals will rise to the challenge of adapting AI to their needs. How AI for grown-ups works on a given MondayWell, that’s all great: People focus on people things; AI focuses on AI things. But what does it look like in practice?Let’s take the perspective of our three personas again—designers, developers, and marketers—and see what an ideal world looks like for them.Designers, still in FigmaA designer adjusts the corner radius on the hero card and watches the live hand-off panel flag the exact React prop it will touch.A token audit bot pings him only if the value breaks the design system—no more screenshot spreadsheets.Freed from red-lining, he spends the afternoon nudging micro-interactions and pairing with motion design, really making everything sing.Way more time on polish. No more token-drift bugs filed.Developers, still in the IDEA developer pulls the latest “design-to-code” PR: it’s already split into sensible components, test stubs green-lit, and the diff is small enough to review over coffee.She runs the performance benchmark—numbers hold, thanks to preset budgets the generator never crosses.With boilerplate gone, she dives into accessible keyboard flows and edge-case logic that actually moves the product forward.Review cycles on layout bugs drop by half with AI taking over scaffolding.Marketers, still in the CMSA marketer duplicates last week’s landing page variant, swaps headline copy, and clicks “Stage Experiment.”The AI wires analytics, snapshots the control, and opens a PR tagged for growth-team review—no Jira ticket, no dev backlog delay.They schedule the A/B test in the same dashboard and spend their saved hour crafting social hooks for the launch.Campaign velocity doubles, while engineering time spent on “tiny copy changes” shrinks to near-zero.Same tools, less tedium, deeper ownership. Each role feeds context to the system, stays accountable, and lets the AI do the grunt work—that’s the contract in action.Keep your Cursor, keep your ChatGPT—the glue-layer AI just has to play nice with them while sitting squarely in the team’s shared stack. How we’re building toward AI for grown-upsSo, how close are we to that perfect Monday?At Builder, we find ourselves in a unique position to help, and we’ve been pivoting to meet the demand, especially for large teams.A tiny history lessonBuilder launched in 2019 as a headless CMS plus visual editor whose goal was simple: let developers surface their own JavaScript framework components, and then let non-developers arrange those components without touching code.To pull that off, we built our editor on Mitosis, an open-source layer that describes components once and compiles them to whatever JS framework a team already runs.Because of that early direction, three “grown-up parts” of our product were firmly in place before the generative-AI wave arrived:Fully-featured visual editing: Our Webflow-like editor creates space for designers and marketers to tweak components and pages that compile to any JS framework. Deterministic component mapping: Every Figma frame and its design tokens can round-trip with a real, version-controlled component—not a look-alike snippet. A data source with real content: The CMS holds marketing content, sure, but also all the data engineers need for accurate UI states.So when large language models became practical, we didn’t bolt AI onto a blank slate; we layered it onto an editor, a mapper, and a CMS that were already respecting the stack.That head-start is why our current AI features can focus on removing drudgery instead of reinventing fundamentals.What we’ve made so farOur product works as a bunch of incrementally adoptable layers. No big bang rewrites needed.Visual Editor → Code. Think Bolt or v0, but with Webflow-level tweakability. Prompt the AI to draft a page—or paste any URL for an instant, editable clone—then fine-tune any class, token, or breakpoint by hand. Drop in production-ready components from 21st.dev (or your own repo) and ship designs that respect your CSS, not ours.Figma → Visual Editor (and Code). Install the free Figma Visual Copilot plug-in, draw your frame, and click Export. Copilot converts the frame’s exact Auto-Layout geometry into clean, responsive framework code that can drop straight into the repo or open in Builder’s visual editor for tweaks. Designers still hand over a Figma link; developers run one CLI command to scaffold production-ready code—no guessing, no style drift.Repo → Visual Editor → Repo PR [coming soon]. We’ll be announcing a product shortly that allows anyone to import any GitHub repo to the Visual Editor and make changes that get auto-sent as a PR. Marketers and designers can file engineering tickets with the code already in nice shape.Component Mapping. Tell Builder which Figma button matches which code button once, click “Publish,” and you’re set. From then on, every design export that uses that component drops the real one from your repo into the generated diff—props, tokens, everything—so code reviews focus on ideas, not mismatched styles.Builder Publish: It’s not just a patch for lorem ipsum; it’s your entire headless CMS. Wire any page to real-time content and analytics so marketing can run A/B tests without tapping devs—and get the full schema, versioning, and single-source-of-truth perks that come with a modern CMS, all under the same roof.Where we’re still workingWe’re close, not finished. Next on our list:Less manual context. Auto-detect more tokens and components so mapping feels like autocomplete, not data entry. Deeper control. Let power users crack open every AI draft—props, tests, perf budgets—without leaving the editor. Broader design-system support. Shadcn today, your bespoke kit tomorrow. Mapping should be one click, not a weekend.That “perfect Monday” vision is where we’re headed, and our roadmap will get us there one feature at a time.We’re definitely interested in your feedback: What gaps do you still feel between design, code, and marketing, and where could an “AI for grown-ups” save you the most pain?Drop your thoughts in the comments or tag us on our socials (see footer for links).Turning the 80/20 right-side-upIf Software 2.0 taught us that networks can write code, and the Software 3.0 hype reminds us they can write whole interfaces, then the middle road we’ve walked today—call it Software 2.5—insists that learned programs still deserve linting, budgeting, and daylight.Boring constraints create extraordinary freedom.Speed is intoxicating, but alone it flips the 80/20 rule on its head, leaving humans elbow-deep in cleanup. AI for grown-ups reverses that trade.Tool builders promise rails, not rabbit holes. Professionals promise context and accountability. Every mapped component, every token lock, every human review makes the next generation more predictable—and predictability is what compounds into real velocity.We don’t need to be dragged kicking and screaming into the new world. We’re perfectly capable of walking there at our own pace, spending our hours on craft no model can fake. Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

Figma announced 'Sites' at Config 2025, which lets users create simple static websites from designs. Imagine a website generator like Framer or Webflow, but embedded inside Figma.The buzz is serious. Sites could become the de facto tool for quick marketing campaigns or small personal websites. But what if you need Sites to integrate with your existing design systems, custom components, and production code?Figma SitesFigma Sites is a visual developer tool similar to Webflow or Framer. It's focused on letting designers build websites without coding or leaving Figma.Its greatest strength is its integration with the Figma ecosystem. For designers already comfortable with the platform, Sites offers a path to deploy a design as a live website quickly.Easy interactivity and AI-enhanced codeFigma Sites includes numerous presets for everyday website interactions and effects. For instance, you can add a hover effect to a button or a typewriter effect to a text block.A future version of Sites will also include an AI tool for generating code.Responsive design and hands-off infrastructureFigma Sites can also display your design in desktop, tablet, and mobile layouts side by side. The preview version (press shift + space) and the published version are both fully responsive websites.Press the Publish button in the top-left corner once you’re ready to deploy the design into a working website. After some quick validations (it can even help with auto layout), Figma Sites will deploy your project to a generated URL. For a fee, you can wire up a custom domain.Coming soon: CMS and Code LayersRight now, Figma Sites translates your design into HTML and CSS. The team's future improvement, "Code Layers,” will take a user prompt and transform it into React and Tailwind CSS.Another future improvement is a CMS feature inside Figma Sites. This would allow users to manage their website content more efficiently. The idea of a fully integrated design-to-publish tool with an internal CMS is very appealing.Going from Figma to website to complete applicationSimple site builders are great for getting something online, but aren’t great at creating fully integrated applications that mesh with an existing codebase. This is a familiar problem.The challenge lies in moving beyond a static page built with HTML and CSS. What happens if you need this new site to use the Next.js framework and the App Router patterns that your team has adopted? Can you leverage your company's custom components? Is there a way to add complex user interactions? These limitations become significant hurdles for any product beyond a basic landing page or marketing campaign.Visual Editor: stepping beyond simple sitesBuilder.io's Visual Editor satisfies this larger need. Figma Sites gets you something fast without ever leaving the Figma ecosystem. Visual Editor gets you something nearly as fast, but it connects designs directly to your production codebase on one canvas.The core idea is different. Visual Editor is for feature-rich applications where your existing production codebase and design systems are first-class citizens.Figma Sites was engineered to transform a Figma design into a static site using no third-party tools and the most minimal toolchain possible. Visual Editor was engineered to transform designs into production applications at the enterprise scale:Figma-like precisionVisual Editor gives you a familiar, precise visual editing experience, but you're building interactive applications, not just static mockups. Use prompts to generate UI, then fine-tune it visually. The output isn't just a picture; it's code that works.Solving handoffsImport Figma designs with a click, and Builder translates them into interactive code using your component library. The CLI deeply integrates with your specific framework and codebase patterns, generating clean, maintainable code that developers want to work with. It respects your tech stack.On-brand generation, every timeStop worrying about brand drift. Because Builder understands your codebase, it uses your actual design system context—your colors, typography, spacing, and components—automatically ensuring everything generated is consistent and on-brand. No more manual checking.Dual workflows (develop & publish)Builder offers flexibility. Developers can use it to build new UIs that integrate directly with application code. Marketers or designers can use the 'Publish' workflow to create and update content visually using pre-built components, without needing a developer or a new deployment. This addresses the content bottleneck, too.Smashing workflow silosVisual Editor provides a unified canvas for design, development, and content updates. It fits into existing developer workflows (like Git) rather than trying to replace them, enabling better collaboration across the entire digital team.Getting started with Visual EditorReady to see the difference? You can try Visual Editor and experience how it connects to a real codebase.Open the Visual Copilot Figma plugin. Install it from the Figma Community if you haven't already.Select a layer or design in your Figma file that you want to bring into Builder.io.Click the "Export Design" button within the plugin.Click the "View Code in Builder" button. This will open your design directly in the Builder.io Visual Editor.(Optional) Enhance in the Visual Editor: Use AI prompts or manual controls to add interactivity, connect data, or refine the design within Builder.Generate code with the CLI: Copy the provided CLI command from Builder.io and run it in your local project's terminal. The CLI will analyze your codebase and generate the integrated, production-ready code components.The best way to understand the power of Visual Editor is to experience how it generates code that uses your components and fits your workflow.ConclusionFigma Sites is a big step forward for Figma. If you already work with the platform, you get all your favorite Figma features and a near-frictionless path to simple, real websites.Sites fills an essential market need. But you might find the tool underpowered if your team faces the challenges of integrating designs with a complex codebase, maintaining brand consistency across an extensive application, or enabling collaboration between large, diverse teams. In those cases, Builder's Visual Editor is the enterprise-grade solution. It provides a robust, integrated visual development environment that respects your code and scales with your product.Further reading Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo

Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in Part 1, they remind me of the 1960s Hanna-Barbera animated series I grew up watching on TV. Shows like Dastardly and Muttley in Their Flying Machines, Scooby-Doo, The Perils of Penelope Pitstop, Wacky Races, and, of course, Yogi Bear. Mike loves ’90s animation — especially Disney’s Duck Tales). So, that is the aesthetic applied throughout the design. I used animations throughout and have recently added an extra dimension to them using masking. So, to explain how this era of animation relates to masking in CSS, I’ve chosen an episode of The Yogi Bear Show, “Disguise and Gals,” first broadcast in May 1961. In this story, two bank robbers, disguised as little old ladies, hide their loot in a “pic-a-nic” basket in Yogi and Boo-Boo’s cave! What could possibly go wrong? What’s A Mask? One simple masking example comes at the end of “Disguise and Gals” and countless other cartoons. Here, an animated vignette gradually hides more of Yogi’s face. The content behind the mask isn’t erased; it’s hidden. In CSS, masking controls visibility using a bitmap, vector, or gradient mask image. When a mask’s filled pixels cover an element, its content will be visible. When they are transparent, it will be hidden, which makes sense. Filled pixels can be any colour, but I always make mine hot pink so that it’s clear to me which areas will be visible. A clip-path functions similarly to a mask but uses paths to create hard-edged clipping areas. If you want to be picky, masks and clipping paths are technically different, but the goal for using them is usually the same. So, for this article, I’ll refer to them as two entrances to the same cave and call using either “masking.” In this sequence from “Disguise and Gals,” one of the robbers rushes the picnic basket containing their loot into Yogi’s cave. Masking defines the visible area, creating the illusion that the robber is entering the cave. How do I choose when to use clip path and when to choose mask? I’ll explain my reasons in each example. When Mike Worth and I discussed working together, we knew we would neither have the budget nor the time to create a short animated cartoon for his website. However, we were keen to explore how animations could bring to life what would’ve otherwise been static images. Masking Using A Clipping Path On Mike’s biography page, his character also enters a cave. The SVG illustration I created contains two groups, one for the background and the other for the orangutan in the foreground: <figure> <svg viewBox="0 0 1400 960" id="cave"> <g class="background">…</g> <g class="foreground">…</g> </svg> </figure> I defined a keyframe animation that moves the character from 2000px on the right to its natural position in the center of the frame by altering its translate value: @keyframes foreground { 0% { opacity: .75; translate: 2000px 0; } 60% { opacity: 1; translate: 0 0; } 80% { opacity: 1; translate: 50px 0; } 100% { opacity: 1; translate: 0 0; } } Then, I applied that animation to the foreground group: .foreground { opacity: 0; animation: foreground 5s 2s ease-in-out infinite; } Try this yourself: I wanted him to become visible at the edge of the illustration instead. As the edges of the cave walls are hard, I chose a clip-path. There are several ways to define a clip-path in CSS. I could use a primitive shape like a rectangle, where each of the first four values specifies its corner positions. The round keyword and the value that follows define any rounded corners: clip-path: rect(0px 150px 150px 0px round 5px); Or xywh (x, y, width, height) values, which I find easier to read: clip-path: xywh(0 0 150px 150px round 5px); I could use a circle: clip-path: circle(60px at center); Or an ellipse: clip-path: ellipse(50% 40% at 50% 50%); I could use a polygon shape: clip-path: polygon(...); Or even the points from a path I created in a graphics app like Sketch: clip-path: path("M ..."); Finally — and my choice for this example — I might use a mask that I defined using paths from an SVG file: clip-path: url(#mask-cave); To make the character visible from the edge of the illustration, I added a second SVG. To prevent a browser from displaying it, set both its dimensions to zero: <figure> <svg viewBox="0 0 1400 960" id="cave">...</svg> <svg height="0" width="0" id="mask">...</svg> </figure> This contains a single SVG clipPath. By placing this inside the defs element, this path isn’t rendered, but it will be available to create my CSS clip-path: <svg height="0" width="0" id="mask"> <defs> <clipPath id="mask-cave">...</clipPath> </defs> </svg> I applied the clipPath URL to my illustration, and now Mike’s mascot only becomes visible when he enters the cave: #cave { clip-path: url(#mask-cave); } Try this yourself: While a clipPath will give me the result I’m looking for, the complexity and size of these paths can sometimes negatively affect performance. That’s when I choose a CSS mask as its properties have been baseline and highly usable since 2023. The mask property is a shorthand and can include values for mask-clip, mask-mode, mask-origin, mask-position, mask-repeat, mask-size, and mask-type. I find it’s best to learn these properties individually to grasp the concept of masks more easily. Masks control visibility using bitmap, vector, or gradient mask images. Again, when a mask’s filled pixels cover an element, its content will be visible. When they‘re transparent, the content will be hidden. And when parts of a mask are semi-transparent, some of the content will show through. I can use a bitmap format that includes an alpha channel, such as PNG or WebP: mask-image: url(mask.webp); I could apply a mask using a vector graphic: mask-image: url(mask.svg); Or generate an image using a conical, linear, or radial gradient: mask-image: linear-gradient(#000, transparent); …or: mask-image: radial-gradient(circle, #ff104c 0%, transparent 100%); I might apply more than one mask to an element and mix several image types using what should be a familiar syntax: mask-image: image(url(mask.webp)), linear-gradient(#000, transparent); mask shares the same syntax as CSS backgrounds, which makes remembering its properties much easier. To apply a background-image, add its URL value: background-image: url("background.webp"); To apply a mask, swap the background-image property for mask-image: mask-image: url("mask.webp"); The mask property also shares the same browser styles as CSS backgrounds, so by default, a mask will repeat horizontally and vertically unless I specify otherwise: /* Options: repeat, repeat-x, repeat-y, round, space, no-repeat */ mask-repeat: no-repeat; It will be placed at the top-left corner unless I alter its position: /* Options: Keywords, units, percentages */ mask-position: center; Plus, I can specify mask-size in the same way as background-size: /* Options: Keywords (auto, contain, cover), units, percentages */ mask-size: cover; Finally, I can define where a mask starts: mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; Using A Mask Image Mike’s FAQs page includes an animated illustration of his hero standing at a crossroads. My goal was to separate the shape from its content, allowing me to change the illustration throughout the hero’s journey. So, I created a scalable mask-image which defines the visible area and applied it to the figure element: figure { mask-image: url(mask.svg); } To ensure the mask matched the illustration’s dimensions, I also set the mask-size to always cover its content: figure { mask-size: cover; } Try this yourself: figure { clip-path: ellipse(45% 35% at 50% 50%); } However, the hard edges of a clip clip-path don’t create the effect I was aiming to achieve: Try this yourself: Finally, to add an extra touch of realism, I added a keyframe animation — which changes the mask-size and creates the effect that the lamp light is flickering — and applied it to the figure: @keyframes lamp-flicker { 0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% { mask-size: 90%, auto; } 20%, 21.9%, 63%, 63.9%, 65%, 69.9% { mask-size: 90%, 0px; } } figure { animation: lamp-flicker 3s 3s linear infinite; } Try this yourself: I started by creating the binocular shape, complete with some viewfinder markers. Then, I applied that image as a mask, setting its position, repeat, and size values to place it in the center of the figure element: figure { mask-image: url(mask.svg); mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: 85%; } Try this yourself: To let someone know they might’ve reached the end of their adventure, I wanted to ape the zooming-in effect I started this article with: <figure> <svg>…</svg> </figure> I created a circular clip-path and set its default size to 75%. Then, I defined the animation keyframes to resize the circle from 75% to 15% before attaching it to my figure with a one-second duration and a three-second delay: @keyframes error { 0% { clip-path: circle(75%); } 100% { clip-path: circle(15%); } } figure { clip-path: circle(75%); animation: error 1s 3s ease-in forwards; } The animation now focuses someone’s attention on the hapless hero, before he sinks lower and lower into the bubblingly hot lava. Try this yourself: See the Pen Mike Worth’s error page [forked] by Andy Clarke. Bringing It All To Life Masking adds an extra dimension to web animation and makes stories more engaging and someone’s experience more compelling — all while keeping animations efficiently lightweight. Whether you’re revealing content, guiding focus, or adding more depth to a design, masks offer endless creative possibilities. So why not experiment with them in your next project? You might uncover a whole new way to bring your animations to life. The end. Or is it? … Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen now.

Few decorative pieces possess the power to elevate a yardscape quite like the best outdoor rugs. In fact, more often than not, they tend to effortlessly tie the whole space together by grounding your furniture and lending the area a sense of scale.Outdoor rugs are designed specifically for high-traffic areas like outdoor spaces, mudrooms, and kitchens, so you can expect some serious durability. We’ve selected a list of handwoven, low-maintenance, and design-forward picks for giving your patio, porch, or poolside oasis a facelift. Ahead, discover the best outdoor rugs that will ground your space in style.Our top picks for the best outdoor rugsBest jute rug: The Citizenry Sabina Area Rug, $699 $560Best pattern: Lulu and Georgia Crawford Indoor/Outdoor Rug, $498Best indoor/outdoor rug: Ruggable Outdoor Halo Diamond Rug, $349Best moroccan design: Jonathan Y Textured Weave Indoor/Outdoor Area Rug, $72Best Southwestern design: Article Kristoff Indoor/Outdoor Rug, $349Editor’s Note: For the sake of consistency, we listed the 5x7' or 6x9' prices throughout. If you’re looking for something smaller or larger, though, most of these rugs are available in a variety of sizes and/or shapes.Browse by CategoryThe best outdoor rugs, overallThe Citizenry Sabina Area RugSpecsSizes: 5x8', 6x9', 8x10', 9x12', 10x14'Materials: 75% jute, 25% cottonJute is one of the most budget-friendly natural fibers out there. It also makes a great indoor-outdoor area rug option, since it offers some fun texture inside the house. This handwoven design is stain-, water-, and fade-resistant, plus made from eco-friendly materials like jute and cotton. Looking for a styling recommendation? If you have a multicolor scenario happening—brightly hued chairs or a funky bistro set—use this rug as an anchor of sorts.Lulu and Georgia Crawford Indoor/Outdoor RugSpecsSizes: 3x5', 4x6', 5x8', 6x9', 8x10', 9x12', 10x14'Materials: 75% jute, 25% cottonImitating Mediterranean villa tiles, this piece from Lulu & Georgia makes a charming statement in your outdoor space, but paired with some more minimal outdoor furniture pieces can form a mellow, European-inspired backdrop. Or go full Italian palatial with travertine details, pedestal planters, and a Cupid fountain.Ruggable Outdoor Halo Diamond RugSpecsSizes: 3x5', 4x6', 5x8', 6x9', 8x10', 9x12', 10x14'Materials: Recycled polyesterThis rug is contemporary but still grounding, and it delivers a certain upscale resort look worthy of a well-designed outdoor space. It merges bohemian style with modern design and we especially like that it’s—as Ruggable always is—machine-washable. It’s also made to be extra durable, and it works just as well indoors.Jonathan Y Textured Weave Indoor/Outdoor Area RugSpecsSizes: Refer to chartMaterial: PolypropyleneAmazon has achieved the antique Moroccan rug look for under $130, as well as made it suitable for high-traffic areas and outdoor spaces. The pattern and weave on this piece looks about as authentic as it gets for under $200, and it will look all the more legitimate underneath a few gorgeous pieces of teak furniture. This outdoor rug comes in quite literally every size, so you’re sure to find just the right dimensions, whether you’re looking for an outdoor dining pad or an entryway design lift.Article Kristoff Indoor/Outdoor RugSpecsSizes: 5x8', 8x10'Materials: PolyesterWith a traditional Southwestern design, this rug is flatweave and made from 100% polyester, making it perfect for high-traffic areas. It’s fade-resistant and offers a subtle pattern that would pair well with lots of different decor styles. It also comes in two other colorways, including gray and cream, but this one strikes the perfect balance of light and dark.Joss & Main Sesena Indoor/Outdoor Area RugSpecsSizes: 3'3"x4'11", 4'10"x7'6", 6'6”x9'4", 7'10"x9'10", 1'11"x7'6"Materials: PolypropyleneThis rug is made of synthetic materials and features a super interesting color combination of olive green and black, which makes it the perfect option if you’re looking to add an earthy feel to your porch. At 12-inches in height, the low-pile design won’t get in the way. It’s also completely stain-resistant, so you don’t have to worry about it wearing over time.West Elm Ombre Pop Outdoor RugSpecsSizes: 2.5x7' 2.5x9', 3x5', 5x8', 6x9', 8x10', 9x12', 10x14'Materials: Recycled polyesterSomething about the color combo in this reversible rug reminds us of a beach sunset, and we’re into it. It’s made of recycled polyester and designed to stand up to anything, including spills and heavy foot traffic. Seen here in cobalt, it’s also available in a black, yellow, and terra-cotta combo.Sundays Seawall RugSpecsSizes: 5x8', 8x10', 9x12'Materials: Recycled polyesterSuitable for both indoor and outdoor, this unique rug from Sundays plays with an unexpected color palette—a dusty, pastel teal against jute—and pattern, dueling stripes. This feels Scandinavian and minimalist without leaning so stark—it still maintains a sense of personality and playfulness for making your poolside setup feel more fun than strictly professional.What are outdoor rugs made of?There are some obvious differences between an indoor rug and one used for outdoor living—you won’t see the same type of rug you’d pick for your dining room or living space on your outdoor patio too often. Indoor rugs can be more plush, allowing your feet to sink in a bit. But that’s not always the case—after all, an outdoor rug can easily make the transition indoors (once cleaned, of course; more on that below).Common materials for outdoor rugs include polyester, jute, olefin, nylon, sisal, and polypropylene. All of these are sturdier fibers that are mildew-resistant and can withstand many different climates—wool is beautiful, but it wouldn’t last two minutes in an unexpected rainstorm. Most also have a latex backing or rug pad built into the back to keep things from sliding around.How to care for an outdoor rugIt’s easy to drop a patio rug off in its new home and then completely forget about it. But weather is wild, weather is unpredictable, and direct sunlight can do a number on your new textile. There are ways to ward off mildew and keep your rug soft for bare feet.And no matter where you buy your outdoor rug from, it will come with care instructions. The first and easiest way to lengthen the life and vibrancy of your new rug is to follow those guidelines. Your rug care plan will depend on what it’s made of—sturdier jute rugs will require less spot cleaning. There are designs out there that can be tossed in the washing machine (a great perk!). Anything that even leans toward “plush” will need a more involved cleaning regime. For most designs, plan to shake it out every couple of weeks followed by a good vacuum.