jello

NativeBase meets Figma
December 27, 2021 5 minute read

NativeBase meets Figma

tanishab@geekyants.com
Tanisha Biswas
Product Designer
probin@geekyants.com
Probin Johori
Product Designer
notion image

Introduction


The NativeBase team is excited to bring the most requested addition into the NativeBase ecosystem. With the goodness of Figma, we present the “NativeBase Design Kit to help you design consistent UI at scale for various platforms. The file contains variants of all the UI components from the NativeBase Library. All the style properties and components in the file are the exact designs of the component library we used to build the components meaning you can recreate your Figma designs to code projects using the NativeBase utility classes in the blink of an eye. We indeed have come full circle.
 
We ensured that all the elements you use’ designs stay consistent throughout your project. Whether it is the typography, spacing, colors, or other components, it follows the NativeBase standard.

Something for everyone

 

Designers

This UI kit will help you create versatile designs on top of the NativeBase foundation as a designer. You can customize the kit according to your branding guidelines.

Product Managers

The NativeBase Figma file bridges the gap between designers and developers. It ensures a smooth transition between what we design and what we develop. Focus on the business logic, and leave the rest to the library!

Developers

Have a visual representation of the design to ensure fewer surprises when building UI. You can browse through our wide range of variants and choose from existing tokens.

Foundation - Style Guide

 
The style guide is a foundation key tool for any design system to help ensure design consistency. Every component on this Figma file is built around the ‘NativeBase Design System’ foundation. It includes colors and typography, and more.
notion image
notion image

Auto Layout

 
We can easily create components to change the sizes without easily distorting the spacing and positioning. If you are designing for multiple platforms, you don’t need to design each component numerous times. Now you can use the NativeBase Design System on Figma and stretch the components depending on the size you require. Voila! The components will keep the elements intact with consistent spacing and positioning.
 
notion image

Components and Variants

 
The Figma file has 29 components with over 780 variants consisting of all the variants from the NativeBase library. For example, an alert component consists of 4 themes and six styles for each theme. That’s a lot! You can select any one style that goes well with your design.
notion image

Responsive Designs

 
With increasing mobile users, designing for multiple platforms is equally important. We have made sure that the components at NativeBase Design Systems are responsive, meaning one component will fit and look good on all regardless of the screen size. We can easily adjust the responsive designs to different sizes and custom viewports.
notion image

Dark and Light theme

 
Most traditional apps still use a light background with a text of dark color. But the darker themes have been in trend for quite some time now. It can be just for the appearance, but darker themes help increase the accessibility drastically. We have variants of both light and dark themes to decide your preference. All the themes are designed keeping accessibility in mind.
notion image

Our Vision

 
We are thrilled to share some upcoming milestones with our community that the team has been tirelessly working on over the last few weeks. With the launch of the NativeBase v3 design kit, there has been no time to rest. All of the positive feedback from the community has energized us and is pushing us even harder to deliver. We will soon be launching a v4 version of the kit, which will address component states, color contrast, accessibility, and more. Join our discord channel for further updates.
 
Go and check the NativeBase Figma file.