UIKit

[$] Prime: Design System Kit for Figma v.5.2

Supercharge your design workflow with top Figma & Design System techniques. Powerful components with tokens to complete every project 10x faster. It's far more than just a UI Kit.

Apr 28, 2024 - 04:54
Apr 28, 2024 - 07:31
 0  164
[$] Prime: Design System Kit for Figma v.5.2

Start every project with ease. Supercharge your design workflow with top Figma & Design System techniques. Powerful components with tokens to complete every project 10x faster.

Preview in Figma 

For full details check: primedesignsystem.com





Best Figma Techniques

  • Tokens prepared with Variables

  • Auto layout 5.0 with wrap content & min max values

  • Component Variants & Properties

  • Dark & light mode with Variable modes



Best practices for Design System

  • Semantic Tokens (General + Component)

  • Proper component properties

  • Easy icon component search with keywords

  • Atomic design structure

  • More than WCAG - colors made with APCA

  • Balance between constraints & flexibiltiy

  • Easy to customize & extend

  • No additional plugins needed



Best practices

World-class standards inside

  • Semantic tokens

Meaningful styling is the foundation of design systems. Use techniques from world-class design systems, not random UI kits.

  • Proper component exposure

When you need to find component, swap an instance you see the preview of the main UI element. So fast and convenient!

  • Component excellence

Thanks to the right naming conventions, consistent structure, components keep overrides, helping you to iterate faster

  • 4pt soft-grid system

Design with consistent layout spacing & radius system thanks to variables. With modes you may prepare themes for spacing.

  • True accessibility in mind

More than WCAG, colors are using APCA, and they are synced with each other, so you may easily swap tones from the palette.

  • Universal typography

Well-crafted typography scale allows you to prepare design for all devices from web, desktop, mobile or even wearables.

  • Variables & styles

Professional set of variable collections to configure colors, spacing, radius. Prepared to be easily customized & expanded.

  • Top-notch effects

Glassmorphic blurs, shadows and other effects combined together to work for you under one beautiful & consistent system.

  • Auto Layout

All new features including wrap content options are used to get most of the Figma to create easy to use components.

  • Variants & properties

Configure components conveniently with the set of intuitively prepared properties.

  • Phosphor Icons

Set of world class Icons used as a base iconography elements within the kit. Outline & fill styles included.

  • Dark & light modes

All components with proper variable tokens setup include the dark mode. Works automatically.



Download

Tags:

Previous Article

[$] Aurora Bundle: ✦ Orion + Eclipse + Hyper ✦

Next Article

Alumix: Liquid Metal Backgrounds

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow

Related Posts

[VIP] Shien E-commerce UI Kit

[VIP] Shien E-commerce UI Kit

Apr 10, 2022  0  54

Plants Mobile App

Plants Mobile App

May 23, 2022  0  75

[VIP] Square Dashboard HTML

[VIP] Square Dashboard HTML

Sep 17, 2023  0  123