[$] Dravter: UI Starter Kit for Mobile (Standard & Token Bundle)

One toolkit for the whole UI design process. Experience the most efficient workflow as you progress through every stage of the process. From userflow to interface design, we’ve got you covered. This is powered by the powerful duet of Draft Library and Design Library, two Figma libraries with different style and fidelity that can be swapped anytime you need to. Each library contains user flow kit, UI components, and UI patterns for creating professional interface design.

Jul 19, 2024 - 21:35

0 88

[$] Dravter: UI Starter Kit for Mobile (Standard & Token Bundle)

Dravter is the next-generation UI starter kit for mobile.

From user flow to interface design, we've got you covered. Dravter is the only toolkit you need for the whole UI design process, powered by a powerful duet of 2 Figma libraries with different style and fidelity that can be swapped anytime you need to. Experience the most efficient workflow as you progress through every stage of the process.

View full presentation at dravter.com →

Mobile Draft Kit

Ideate better & faster, wherever your thoughts take you. Perfect for the early stage of UI design process. Designed in sketch-style and grayscale colors to help you focus more on exploration rather than pixel perfection.

Mobile Design Kit

Meet the smart & scalable design system starter. Dravter provides all components you need to kick-off mobile projects. Jump-start your design with rock solid foundations & best practices.

Powered by design tokens

You will get 2 versions of Dravter: STANDARD and TOKEN version that is powered Tokens Studio plugin. The TOKEN version is equipped with pre-defined set of tokens that can be used to control the foundations and style of your design like typography, colors, shadows, spacing and border radius.

Auto-updating styleguide. Each time you update the tokens, the styleguide will auto-update themself because they are linked to the tokens. No need to manually update them aymore.
Instant dark mode. The dark scheme is already defined in the system colors. You just need one click to switch between light and dark, no need to create dark version for each component.

USER FLOW KIT ❖ USER FLOW KIT ◇ UI COMPONENTS ❖ UI COMPONENTS ◇ UI PATTERNS ❖ UI PATTERNS ◇

One toolkit for the whole UI design process. Experience the most efficient workflow as you progress through every stage of the process.

From userflow to interface design, we’ve got you covered. Dravter is powered by the powerful duet of Draft Library and Design Library, two Figma libraries with different style and fidelity that can be swapped anytime you need to. Each library contains user flow kit, UI components, and UI patterns for creating professional interface design.

DRAFTLIBRARY.FIG

Ideate better & faster, wherever your thoughts take you. Dravter Draft Library is perfect for the early stage of UI design process. Designed in sketch-style and grayscale colors to help you focus more on exploration rather than pixel perfection.

Stay in the flow from start to finish.

Create user flows in whatever style you prefer. All components are created proportionally to streamline the process as you advances from initial flow to a higher “resolution” flow.

Transforming your wireframing experience in Figma: focused, fast, efficient.

Fun and focused wireframing. Easily drag and drop UI components to create layout with focus on the structure and content, without the distraction of colors and pixel-perfection.

Iterate faster than pen on paper. Experience the fastest way to create and iterate on your wireframes. Remember, you cannot copy paste using pen on paper.

Easily go from low to medium fidelity wireframe. Its because the sketch-styled components you use on your lo-fi wireframe actually have the same properties as the polished UI components in Design Library.

Don’t like to start from zero? Start with hundreds.

Dravter provides you with hundreds of starter screen layouts, structured by common UI patterns for mobile projects. Browse through them right inside Figma and use as starting point for your design, not just for inspiration.

Onboarding → 53
Communication → 115
Commerce → 68
Social → 75
Content → 114
Action → 157
Data → 39
Collection → 33
Utility → 64

GET SET.READY.SWAP!

When your wireframes ready, it’s time to unleash Figma’s superpower: Swap Library! Embrace a magical moment when your wireframes turn into a high fidelity design, while counting how many days you’ve save.

DESIGNLIBRARY.FIG

Meet the smart & scalable design system starter. Dravter Design Library provides all components you need to kick-off mobile projects. Jump-start your design with rock solid foundations & best practices.

400+ global styles

300+ user flow components

4000+ UI components

720+ UI patterns & screens

Accessible & adaptive color system with precise control.

Our color system is built using HSLuv color model to give the best perceptual uniformity. All color hues are generated using a specific target contrast ratio from a base color, providing a constant accessibility score that meet WCAG requirements for minimum contrast. It is also easy to customize the whole color system.

Learn more about our color system

High-quality library built upon the industry's best practices.

Auto layout

Components are built using Auto Layout so it can automatically resize when its content changes.

Variants & properties

Group and organize components to simplifies the library and bring it closer to front-end code.

4px baseline grid

4px soft grid system for a perfect balance between consistency and flexibility.

Typography system

Scalable yet flexible typography stack to support a wide range of applications.

* AVAILABLE ON DRAVTER TOKEN

Design tokens.Your optional superpower.

Powered by Tokens Studio

To make your workflow even faster, we offer a version of Dravter that is powered by Tokens Studio plugin. It is equipped with pre-defined set of tokens that can be used to control the foundations and style of your design like typography, colors, shadows, spacing and border radius.

Auto-updating styleguide

Each time you update the tokens, the styleguide will auto-update themself because they are linked to the tokens. No need to manually update them anymore.

Instant dark mode

The dark scheme is already defined in the system colors. You just need one click to switch between light and dark, no need to create dark version for each component.

Download