ion

The first platform to generate clean code from its design components. Overlay is a plugin to convert Figma or Sketch components into React/Vue.js/HTML clean code components. Overlay instantly creates dev-friendly web components from designer tools. This documentation assists designers and developers in accelerating their web design integration process. We’ve developed Overlay so that designers can be autonomous in building pixel-perfect components without knowing the modern JavaScript framework. Moreover, We think front-end developers must spend their time on high-value tasks (performance, SEO, business logic)and not on translating UX work to code. Overlay Playgrounds are design files with a lot of component examples, ready for Overlay, and all the explanations to make them by yourself and become an expert. It's still possible to use Overlay with other setups, this adds a little work overhead after getting components code. In the future, we will add more and more setups.

Once UI is an open source design system and component library built for Next.js (and paired with a matching design system in Figma), offering a flexible style system, 100+ ready-to-use UI components, and more than 75 copy-paste blocks to rapidly assemble web apps. It supports both simple static sites and more complex applications, thanks to pre-built, deployment-ready templates for portfolios, documentation sites, blogs, ecommerce stores, and dashboards (free and Pro versions). Once UI emphasizes “component-first” development, meaning developers don’t need to manually write utility-class-heavy styling (like with some CSS frameworks); instead, they use semantic variables and components that integrate design tokens for visual consistency. For creators used to tools like utility-class frameworks or component libraries, but who want faster development with fewer dependencies, Once UI simplifies building UIs without sacrificing design quality or accessibility.