www.once-ui.com
Open in
urlscan Pro
52.223.52.2
Public Scan
Submitted URL: http://www.once-ui.com/
Effective URL: https://www.once-ui.com/
Submission: On February 27 via api from US — Scanned from DE
Effective URL: https://www.once-ui.com/
Submission: On February 27 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
POST
<form style="width:100%;display:grid;gap:16px;grid-template-columns:1fr max-content;grid-template-rows:1fr" method="POST">
<div style="position:absolute;visibility:hidden" aria-hidden="true"><input type="text" name="b_1487cc549a49109c00fe60a80_93cd7be172" tabindex="-1"></div><input type="email" name="email" placeholder="email@gmail.com" class="framer-mailchimp-input"
style="-webkit-appearance:none;width:100%;line-height:1.4em;outline:none;border:none;padding:12px 16px 12px 16px;border-radius:12px;font-family:"Inter Medium", "Inter", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:500;font-size:14px;background:var(--token-c6312455-a802-4f17-a11a-3ffe8c977422, rgb(250, 250, 250)) /* {"name":"neutral/background/medium"} */;color:var(--token-b99b622e-0072-4685-b4d1-66d347f031ce, rgb(16, 16, 18)) /* {"name":"neutral/on-background/strong"} */;box-shadow:inset 0 0 0 1px transparent"
value="">
<div style="position:relative"><input type="submit"
style="-webkit-appearance:none;width:100%;line-height:1.4em;outline:none;border:none;cursor:pointer;border-radius:12px;padding:12px 16px 12px 16px;font-family:"Inter Medium", "Inter", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:600;font-size:14px;background:var(--token-8a232d03-012f-41a5-b647-b7b0327a4bef, rgb(45, 105, 250)) /* {"name":"neutral/solid/medium"} */;color:var(--token-01c29e73-422b-47b6-8a57-dd77c480df0c, rgb(255, 255, 255)) /* {"name":"neutral/on-solid/strong"} */;z-index:1"
value="Sign Up"></div>
</form>Text Content
Home
About
Learn
Blog
Pricing
Sign in
Start for free
ADVANCED DESIGN SYSTEM FOR FIGMA
High fidelity. Low effort.
FOCUS ON DESIGN WHILE ONCE UI HANDLES PROTOTYPES, DOCUMENTATION AND HANDOFF.
from 15+ reviews
PREVIEW IN FIGMA
SIGN UP FOR FREE
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
TRUSTED BY FREELANCERS, STARTUPS AND BUSINESSES
Ryan Ward
Founder, Confinity AI
We have saved a lot of investment on design in the early days of our startup,
Confinity AI. Once UI has set us on grounds with solid foundations and a unique
branding.
Mary Blabaum
Director of Design, Acquia
Once UI is an excellent design system that offers flexibility and scalability,
making it perfect for small to mid-sized teams. One of the standout features is
the emphasis on accessibility.
Csaba Panacz
Freelance designer
Relying on a compact and intuitive variable system that's easy to customize is a
huge benefit to freelancers like myself. The components are very well crafted.
DESIGN SYSTEM FRAMEWORK FOR FIGMA
DESIGN PRODUCTS, NOT DRIBBBLE SHOTS
Most design systems focus on creating aesthetic mockups but fall short in
real-world projects with shifting requirements, complex products, and looming
deadlines. Explore a framework designed for these challenges, craft 'wow-worthy'
prototypes, and hand off to developers without a glitch.
Signature token system. Scale complex projects with ease.
Theme management. Switch between themes with a single click.
Prototyping ready. Bring ideas to life with interactive prototypes.
Accessible. Meet the highest WCAG standards out of the box.
Responsive. Use the built-in variants for desktop, tablet and mobile.
CSS variables. The same token system you use in Figma, for CSS.
DOCUMENTATION
EVERYTHING YOU NEED
TO GET STARTED IN MINUTES
Say goodbye to the hassle of creating documentation. Once UI comes fully
documented, making it easy to learn and tailor to your needs. Now, your team can
concentrate on what truly matters: developing your product.
Open prototype
primary / background
strong
function/primary/800
function/primary/300
medium
function/primary/1000
function/primary/200
weak
static/white
function/primary/100
primary / on-background
strong
function/primary/100
static/white
medium
function/primary/300
function/primary/1000
weak
function/primary/500
function/primary/800
primary / solid
strong
function/primary/600
function/primary/500
medium
function/primary/500
function/primary/400
weak
function/primary/400
function/primary/300
:root {
/* primary */
--primary-background-strong:
--primary-background-medium:
--primary-background-weak:
--primary-on-background-strong:
--primary-on-background-medium:
--primary-on-background-weak:
--primary-solid-strong:
--primary-solid-medium:
--primary-solid-weak:
--primary-on-solid-strong:
--primary-on-solid-weak:
var(--function-primary-300);
var(--function-primary-200);
var(--function-primary-100);
var(--static-white);
var(--function-primary-1000);
var(--function-primary-800);
var(--function-primary-500);
var(--function-primary-400);
var(--function-primary-300);
var(--static-white);
var(--function-primary-900);
A DESIGN SYSTEM FOR YOUR WHOLE TEAM
TRANSFORM DESIGNS INTO CODE FASTER THAN EVER BEFORE
Cut the back and forth and get rid of inconsistencies between your designs and
live applications. Once UI is inspired by frameworks like React and Vue, letting
you benefit from modern coding paradigms in Figma.
CSS variables. Use the same
token system in Figma and CSS.
Responsive layouts. Use breakpoints to
define layouts and display elements conditionally.
Component settings. Use the same variables
in Figma and code for component configuration.
OUR SIGNATURE TOKEN SYSTEM
START WITH ONCE UI FOR FREE
Discover the system at the heart of Once UI. Adopt a powerful and flexible token
system for your next project—no need to start from scratch. Manage themes,
colors, responsive layouts, loading and empty states, and more.
Guide to building a powerful token system
Ready-to-go token system for Figma
CSS variables
Start for free
FULLY RESPONSIVE
CREATE FLAWLESS, RESPONSIVE
DESIGNS FOR EVERY SCREEN
Ensure your brand resonates on any device. Say goodbye to the hassle of
duplicating designs for different resolutions. Design fully responsive screens
in Figma and switch between devices with just one click.
Flexible layouts. Benefit from a ready-to-go breakpoint system.
Responsive components. Select desktop, tablet or mobiles mode.
Simplify your files. Create a single design and resize for any resolution.
UI KIT FOR FIGMA
BUILD PRODUCTION QUALITY UI
LIGHTNING FAST AND STRESS-FREE
Design beautiful interfaces and leave the crunch behind. Impress your customers
and give breathtaking demos with a UI kit for Figma that's equipped with all the
components you’ll need.
TEMPLATE GALLERY
Draw inspiration from full-page designs.
CHART LIBRARY
Design compelling analytics dashboards and data-heavy applications.
Screen time
Range
Last week
Label:
Value
Label:
Value
Label:
Value
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
3,000
2,000
1,000
Productivity:
22h
Social:
15.6h
Finance:
4.3h
LAYOUT BLOCKS
Build layouts from ready-made components like headers, menus, and footers,
available for every screen size.
All systems operational
Product
Home
Solutions
Pricing
Company
Blog
Vision
About
Careers
Hiring!
Resources
Terms of Use
Privacy Policy
Contact
FAQ
© 2023
Once UI
-
All rights reserved.
Language
English (US)
SOCIAL INTERACTIONS
Bring social elements into your designs, including comments, notifications, and
profiles.
Notifications
Sarah Walker shared a new photo
Just now
Tom Parker shared a new photo
3 minutes ago
Ingrid Eriksson sent you a message
2 hours ago
Priya Desai sent you a friend request
yesterday
Accept
Decline
Tom Parker shared a new photo
2 days ago
Name shared a new photo
Last week
Name shared a new photo
Last month
Name shared a new photo
3 months ago
DATA VIZ MODULE
TRANSFORM COMPLEX
DATA INTO MEANINGFUL INSIGHTS
Craft beautiful visualizations with Once UI’s responsive, customizable data viz
module. It’s compatible with D3 and VisX,
the most popular visualization libraries among developers.
CHART TYPES
Drag and drop commonly used chart types: Line, Bezier, Bar, Pie, Distribution
STACK & MIX
Easily create stacked & mixed charts with an intuitive component system.
CUSTOMIZE COLORS
Set the range and switch between categorical, sequential and diverging color
schemes.
Coming soon
BUILD REACT APPS
KICK OFF PROJECTS WITH ONCE UI'S REACT LIBRARY
Empower your designers and developers to collaborate effectively from the
get-go. Create React apps using a robust component library that aligns perfectly
with the your design system for Figma.
GET ONCE UI
FREE
Get the system at the core of Once Ul, with regular updates and access to
exclusive content.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Get started
Most popular
PRO
20% off
$160
/year
Access to Once Ul's full platform, for individual use. Great for freelancers and
solo designers.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation
Get started
This plan is backed by our
180-day money-back guarantee
TEAM
20% off
$560
/year
Access to Once Ul's full platform, for 4 users. Perfect for teams and agencies
focused on quality.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation
Get started
ONCE UI
Once UI is a design system & framework created for Figma that helps your team in
creating world class products, faster.
Preview
Blog
Reviews
Sign in
Start for free
COMMUNITY
Join our community and share your work with us! We provide guidance, feedback
and a welcoming atmosphere for designers at any stage of their career.
Join Discord
NEWSLETTER
Sign up to our weekly newsletter!
LEARN
Our practical guide to crafting design systems will help you navigate through
modern product design.
Design systems
SUPPORT
Need help or assistance?
We're always here to help.
Terms of Use
Privacy Policy
License Agreement
Contact us
© 2024 Once UI - All rights reserved.