Logo
flag

Figma design system - Figma UI kit and style variables

Logo

Please rate the course

0.0
Category:
Language:
English
Duration:
00:00:00
Number of lessons:
0
Added date:
09/08/2024
Rating:
0.0

Course short description

This is not a video course!!!

A lightweight and powerful design system, Figma, and a UI kit will help you develop virtually any website or application you can imagine.

Create designs 10 times faster with pre-assembled components and styles. Predefined styles for colors, typography, and spacing, plus hundreds of component variants.

Built using the latest Figma features and best practices of 2024. Easily and quickly customize components using optimized auto-layout, variables, properties, and variants.

The design is intuitive, accessible, and beautiful. Every component is designed with usability in mind and fully complies with the WCAG 2.1 AA standard.


Customizable Styles

Utilize the power of variables to quickly and easily change color and typography styles to match your brand.

  • Color variables
  • Light and dark modes
  • Spacing variables
  • Typography variables
  • Layer shadows
  • 4px grid layout

Simple yet Powerful Color System

A compact set of color variables, named and organized by their usage. Easy to learn but flexible enough to scale in complex design systems.

Predefined color variables allow for automatic switching between light and dark modes instantly.

Proper Depth

Shadows work great to indicate various elevation levels in light mode but are hard to distinguish in dark mode. Therefore, gradually lighter backgrounds are used to denote elevation in dark mode.

Intuitive Components

Access a vast collection of powerful components developed through years of research.

  • Hundreds of variants
  • Powerful properties
  • Best practices design
  • Ease of use and customization
  • Interaction states for prototyping
  • Auto layout included

Interaction States

To speed up prototyping, interactive elements change their appearance upon interaction.

Transparent State Layers

Hover and press states are indicated by a transparent overlay placed on interactive elements.

This systematic approach works for all types of components, from buttons to dropdown menus, and doesn't require adding extra color variations to the palette.

Perfectly Crafted Icons

Use the beautiful, neutral, and open Feather icon set or add your own.

  • 300+ open-source icons
  • 2px stroke width
  • 24px x 24px grid

Created with Practical UI

You will be amazed at how quickly and easily you can create almost any website or application you can imagine.

Based on Design Principles from the Book

Explore a logical approach to designing intuitive, accessible, and beautiful interfaces using quick and practical guides.

Show more