Figma creator fund winner

Functional UI Kit

FUI

Storybook

GitHub

A unified UI-Kit

Figma & React united

Precise Figma & React components. Packed with best practices, unified prop names & consistent design and code.

View In Figma

Quality design and code

WCAG accessibility standards

Light and dark themes

UX best practices

A design system your devs will love

An essential toolkit that's built to simplify communication between designers and developers, ensuring your product gets built quickly and accurately

Frontend Developer

Working with your designs? Pure developer's joy.

A design system your devs will love

An essential toolkit that's built to simplify communication between designers and developers, ensuring your product gets built quickly and accurately

Frontend Developer

Working with your designs? Pure developer's joy.

A design system your devs will love

An essential toolkit that's built to simplify communication between designers and developers, ensuring your product gets built quickly and accurately

Frontend Developer

Working with your designs? Pure developer's joy.

A design system your devs will love

An essential toolkit that's built to simplify communication between designers and developers, ensuring your product gets built quickly and accurately

Frontend Developer

Working with your designs? Pure developer's joy.

Dev Mode is the foundation

Production-ready from the get-go

Every component and its variations come hand-in-hand with a dedicated story in Storybook. Each prop is meticulously matched in terminology to React, and correlated props are clearly marked.

This lets designers and developers speak the same language, clearing up any confusion and keeping everyone on the same page. With common terms and practices, product teams can speed up their work, making Functional UI Kit your go-to for smooth teamwork.

Figma

CSS

Figma variables match CSS variables

We've made sure that Figma variables and CSS variables work together effortlessly. They share the same names, usage and inheritance structure. This isn't just an extra feature; it's the core approach.

Each Figma variable has a direct counterpart in CSS, so there's no confusion. Your design ideas stay crystal clear as you move into the development phase.

Accessible Best Practices

All the essentials, meticulously built

Our kit covers all the fundamental components you need, available in both light and dark modes. These components are designed with precision and adhere to WCAG accessibility guidelines.

Every component is crafted with a deep understanding of UX principles and best practices. Colors and sizes are chosen with accessibility in mind. You can be confident that your designs will not only be visually appealing but also usable by a wide range of users.

Harmony in Design and Code

Our toolkit shields you from style side effects, maintains typographic consistency, mirrors CSS structure with Auto Layout, simplifies copy-pasting, eliminates guesswork and efficiently organizes colors.

Style collision damage waiver

Style side effects that can drive teams crazy. Our CSS architecture shields you from these pesky inconsistencies. Intentional overrides are welcomed but side-effects are not.

Correlated type system

Your fonts, line heights and letter spacings stay the same whether you're designing or coding. Wave goodbye to typographic inconsistencies between design and code.

Rock-solid

layouts

Rock-solid layouts

Auto Layout is mirroring the same box model structure in CSS using best practices & ensuring reliability.

Consistent Prop Names

Consistent Prop

Names

Copy-paste props with zero to none code naming adjustments.

Scoped color system

Cut out the guesswork when designing.

We used Figma's latest features to scope and organize colors efficiently.

Cut out the guesswork when designing. We used Figma's latest features to scope and organize colors efficiently.

We stick to simple & fundamental design rules

Our components follow the functional guidelines for creating intuitive, accessible, and stunning interfaces outlined in Practical UI book.

This UI kit is independent of Adham Dannaway's book

Why I built this

I want to make both sides happy with a design system so i built one. I've seen systems that shine in Figma but fall short in code, and vice versa.

While working on design systems in large teams I've felt the pain. Disagreements pop up, demanding a careful balance of compromise. Instead of focusing on building the product, teams often end up wasting time on maintaining a design system and arguing over terminologies and minor inconsistencies, which don't contribute to the product's growth or the business's success.

If that sounds familiar, I want to make things easier for you. I know exactly what can be compromised, so you don't have to worry about it. This is my solution, born from my experiences and my commitment to solving this problem.

And guess what? It's completely free, thanks to the support from the Figma Creators Fund. They believe in this project, and because of their support, I can work on it without any cost to you.

Thanks for considering Functional UI Kit for your design and development needs. Cheers!

I want to make both sides happy with a design system so i built one. I've seen systems that shine in Figma but fall short in code, and vice versa.

And guess what? It's completely free, thanks to the support from the Figma Creators Fund. They believe in this project, and because of their support, I can work on it without any cost to you.

Thanks for considering Functional UI Kit for your design and development needs. Cheers!

Alex Yakir

Designer 🖤 Developer

Follow me on

FREE

p/month

Seamless collaboration

Quality design and code

Consistent components

WCAG accessibility standards

Minimise style side effects

Light and Dark Modes

Utilizing Figma's latest features

Figma Annotations

Copy-paste simplicity

Responsive components

Customizable theme

Built by experienced designers & developers

Scoped color system

Typographic harmony

New auto layout features

Min/max size features

Shape & size unit variables

Frequently Asked Questions

What is Functional UI Kit?

How does Functional UI Kit maintain consistency between design and code?

Is Functional UI Kit free to use?

What sets Functional UI Kit apart from other design systems?

Do I need a developer to start using this kit?

Do I need a designer to use this kit?

View In Figma