CF

Figma design system - Figma UI kit and style variables

0h 0m 0s
English
Paid

This design system helps you build clear and flexible layouts in Figma. You can use ready components and styles to design pages fast. The setup is simple, and you can change it to fit your brand.

Fast Design Workflow

You get many pre-built parts that you can drag into your file. This helps you design pages in less time. You also get color, text, and spacing styles that stay the same across your work.

The system uses new Figma features like auto layout, variables, and component properties. You can update parts in one place and see changes across your file.

Accessible and Clear Design

Each component follows good design rules. The system supports WCAG 2.1 AA, so your layouts stay accessible for all users.

Customizable Styles

You can change colors, spacing, and text styles without breaking your layout. Variables make updates fast and safe.

  • Color variables
  • Light and dark modes
  • Spacing variables
  • Typography variables
  • Shadow styles
  • 4px grid layout

Color System

The color set is small and easy to learn. Names follow a clear pattern, so you know when to use each color. The system also switches between light and dark modes with no extra work.

Depth and Elevation

In light mode, shadows show depth. In dark mode, lighter background layers do the same job. This keeps the design clear in both themes.

Components

You get a wide set of components that work for many screen types. Each one is built with auto layout and follows best practices.

  • Many variants
  • Clear properties
  • Easy to update
  • Interaction states
  • Auto layout support

Interaction States

Interactive parts respond to hover and press states. This helps you build better prototypes without extra steps.

State Layers

Hover and press styles use a clear overlay. This works for buttons, inputs, menus, and more. You do not need extra colors to show these states.

Icon Set

You get a set of clean Feather icons, or you can add your own.

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

Built with Practical UI

This system uses lessons from Practical UI and common design patterns. You can build pages fast and keep them easy to read and use.

Design Principles

You learn a simple method to design clear and accessible interfaces. The guides help you grow your design skills with real examples.

About the Author: Adham Dannaway

Adham Dannaway thumbnail

Adham Dannaway is an Australian UI/UX designer and one of the most widely cited independent voices on Figma design-system construction. He runs adhamdannaway.com and publishes detailed Figma kits and educational material on building production-grade design systems.

His CourseFlix listing carries the Figma Design System — Figma UI Kit and Style Variables course. Material is paid and aimed at product designers building or maintaining design systems for real product teams.

Related courses

  • Pixel Perfect Figma to Tailwind thumbnailUpdated 2y ago

    Pixel Perfect Figma to Tailwind

    By: Pro Tailwind (Simon Vrachliotis), Simon Vrachliotis
    This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development.
    2h 40m
  • Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more thumbnailUpdated 1y ago

    Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

    By: Udemy, Zero To Mastery
    Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
    20h 31m
  • Mastering Figma thumbnailUpdated 2y ago

    Mastering Figma

    By: Level Up Tutorials (Scott Tolinski)
    This video is about Mastering Figma Introduction. Figma has similar uses to adobe XD and I'll be bringing you more videos to go more in-depth on how to use.
    3h 37m

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course does not specify any prerequisites, but a foundational understanding of Figma and design principles would be beneficial. Familiarity with UI/UX design concepts and how to navigate the Figma interface will help you make the most of the design system.
What will I be able to build after completing this course?
Upon completing the course, you will be able to create cohesive and accessible design layouts using a Figma design system. You'll have experience with components, auto layout, and style variables, enabling you to efficiently design pages that maintain consistency in color, typography, and spacing.
Who is the target audience for this course?
The course is intended for designers who want to optimize their workflow using Figma, particularly those interested in building scalable design systems. It's suitable for both novice and experienced UI/UX designers looking to learn how to utilize Figma's advanced features like variables and auto layout.
How does the depth and scope of this course compare to similar courses?
This course focuses specifically on implementing a design system in Figma using its latest features like auto layout, variables, and component properties. It emphasizes creating accessible designs that comply with WCAG 2.1 AA standards, offering a specialized approach that may differ from more general UI/UX design courses.
What specific tools and platforms are covered in this course?
The course covers Figma as the primary design platform, utilizing its tools such as auto layout, style variables for colors and typography, and component properties. It also discusses creating designs that work across light and dark modes, in line with modern design trends.
What topics are not covered in this course?
The course does not cover the foundational aspects of Figma usage or general UI/UX design theory. It focuses on applying a design system within Figma, so topics like user research, prototyping outside of Figma, or alternative design tools are not included.
How does this course prepare me for other courses or careers?
This course strengthens your ability to create scalable and accessible design systems, a valuable skill in many design roles. Understanding Figma's advanced features and design system implementation can pave the way for more specialized UI/UX courses or roles in product design where efficient workflow and design consistency are crucial.