A free, ever-expanding UI library and design system for Figma.

A free, ever-expanding UI library and design system for Figma.

Design faster and smarter with Precode, based on Tailwind CSS.

Meet Precode

A UI library and design system for everyone at all levels

A UI library and design system for everyone at all levels

Precode is a free UI library and design system for designers, freelancers, startups, agencies, and organizations.

Precode will help you learn pro-level design principles and Figma best practices, save time, design consistently, deliver projects faster, earn more, and unite teams for seamless collaboration.

Precode is frequently updated. Get new UI components, patterns, and layouts and enjoy an ever-expanding UI library and design system that never stops evolving.

A growing

component library

A growing component library

A growing component library

Access a collection of UI components

perfect for professional product

design. Pixel-perfect and easily customizable as standard.

Access a collection of UI components perfect for professional product design. Pixel-perfect and easily customizable as standard.

An intelligent design system

An intelligent design system

Precode is built with the latest Figma features — Auto Layout, components, properties, variants, variables (design tokens), and modes (light/dark).

Customizable
to fit your brand

Customizable to fit your brand

Customizable to fit your brand

Customize Precode to fit your brand with a few clicks. Adjust typography, colors, effects, and variables just once to update the entire library.

Components

Components

Design faster with
a ready-made component library

Design faster with a ready-made component library

Design faster with a ready-made component library

Stop wasting your time reinventing the wheel by rebuilding the same UI components. Precode has everything you need to kickstart any product design project.

Collections

Collections

Production-ready components to speed up your design process. Skip the redundant work and go straight to problem-solving.

Variants

Component
variants

Variants

Use variants to style and configure your application. Customize your UI quickly and easily, and switch between variants in an instant.

Properties

Properties

Use properties to customize each component with simple toggles, switches, and overrides. Nested instances will make you feel like a pro.

Branding

Customizable to

your heart’s desire

Customizable to your
heart’s desire

Customizable to your heart’s desire

Quickly and easily customize Precode to match your brand — adjust typography, colors, and effects. This UI library and design system makes it easy to apply your brand styling to the entire library in seconds.

Take it one step further with variables (design tokens).

4px grid

4px grid

Designed to a 4px grid for consistent layout and spacing.

Accessible color

Accessible color

An accessible color palette with WCAG 2.1 compliance as standard.

Scalable type

Scalable type

A scalable typography system with editable fonts, sizes, and line heights.

Color styles

Color styles

Switch between color styles instantly for quick and easy customization.

Effects

Effects

Use shadows and other effects to enhance your designs.

Variables

Variables

Adjust variables (design tokens) for granular control.

Icons

Iconography for all occasions

Iconography for
all occasions

Stop wasting time looking for the perfect icons and use a best-in-class icon library.

Precode comes bundled with 1,100+ icons from the Heroicons icon library. Beautiful 24x24px icons designed by the best in the business.

1,100+ icons

1,100+ icons

A full range of consistent icons

spanning multiple categories.

A full range of consistent icons spanning multiple categories.

Pixel perfection

Pixel perfection

Skillfully designed with 1.5px strokes

on a 24x24px grid. Icon perfection.

Skillfully designed with 1.5px strokes on a 24x24px grid. Icon perfection.

Find & swap

Find & swap

Find and swap icons without leaving

Figma. Search less, design more.

Find and swap icons without leaving Figma. Search less, design more.

Modes

Dark mode, made simple

Dark mode, made simple

Enable dark mode with the flick of a switch. Easily switch your designs between light and dark modes. using powerful Figma variables.

Light and dark mode

components as standard

Light and dark mode

components as standard

All components are available in light and dark modes by default and can be switched anytime.

Use Figma variables to create brand modes beyond dark

Use Figma variables to create brand modes beyond dark

Create multi-brand themes and modes with Figma variables.

Switch between light and dark mode in an instant

Switch between light and dark mode in an instant

Quickly toggle between modes or set components to switch automatically based on their environment.

Up-to-date

A smart UI library
and design system

A smart UI library
and design system

A smart UI library and design system

Precode is built using the latest Figma features. Keep your knowledge and skills up to speed with best practices and deliver your best work.

As Figma evolves, you and your designs evolve.

Properties

Properties

Components and properties simplify maintenance and offer lightning-quick configuration and customization.

Auto Layout

Auto Layout

The latest Auto Layout version allows your designs to be fully responsive and shrink, grow, and wrap to fit their containers.

Variables

Variables

Figma variables store values that can be applied to different properties and combined to create modes.

elevate your Designs

Take your designs to

the next level with

Precode

Take your designs to the next level with Precode

Take your designs to the next level with Precode

© 2024 Precode

© 2024 Precode