Design System for dummies, create your own flavor of React Native app in 3 easy steps

Ethan Sharabi
Jan 8, 2019 · 7 min read
Image for post
Image for post

Let’s Start with some examples

In order to demonstrate what we’re going to talk here today, I created 2 types of screens, screens you’ll probably see in most apps.

  • A typical Form screen
Image for post
Image for post

01 Research

Always start with solid research, every good app based on the same foundations: Colors, Typography & Layout.

  • Muzli — great place for inspirations, the best resource for some top, current designs and trends.
  • Coolors - Generate theme colors and get color presets to get you going.
  • Google Fonts — Explore different fonts, with different weights and download for free.

02 The Foundation

After you decided on a general idea for your app and have a clear image of how it should look like, it’s time to build it up.

Fifty Shades of grey

First are colors. Every app has a unique set of colors that identify it. For Spotify it’s green and black, Pinterest is red and Facebook is blue. Google is very clean (meaning white) but still, use its popular blue, red, green & yellow colors in all of their products.

Image for post
Image for post
import {Colors} from 'react-native-ui-lib';Colors.loadColors({
red10: '#C37463',
red20: '#BD6753',
red30: '#B95A44',
red40: '#A9523F',
red50: '#984938',
});
Colors.getColorTint(Colors.red30, 50) // --> Colors.red50
Colors.getColorTint(Colors.blue10, 40) // --> Colors.blue40

Getting the right font

Fonts might be a bit tricker, each typography preset contains several values.fontSize, fontWeight, fontFamily,lineHeight and more…

Typography.loadTypographies({
header: {fontSize: 58, fontWeight: '300', lineHeight: 78},
title: {fontSize: 46, fontWeight: '300', lineHeight: 64},
body: {fontSize: 18, fontWeight: '400', lineHeight: 22},
});

03 Where it all comes together

So you got your ideas and organized all of your presets and you’re ready to start coding.

import {Button, Colors, BorderRadiuses} from 'react-native-ui-lib';<Button 
label="Button"
backgroundColor={Colors.red30}
color={Colors.white}
borderRadius={BorderRadiuses.br20} />
<Button label="Button" bg-red30 white br20 />
Image for post
Image for post
A red button with white label and a border radius of 6
import {ThemeManager} from 'react-native-ui-lib`;ThemeManager.setComponentTheme('Button', {
backgroundColor: Colors.red30,
color: Colors.white,
borderRadius: BorderRadiuses.br20,
});
Image for post
Image for post
Image for post
Image for post
  • Passing a callback (which you’ll see now)
ThemeManager.setComponentTheme('Button', (props, context) => {    const themeProps = {
backgroundColor: Colors.red30,
color: Colors.white,
borderRadius: BorderRadiuses.br20,
};
if (props.fullWidth) {
themeProps.backgroundColor = Colors.white;
themeProps.color = Colors.red30;
themeProps.outlineWidth = 2;
themeProps.outlineColor = Colors.red30;
}
return themeProps;
});

Back to the beginning

If I’ll go back to where we started, we’ve seen two examples of two very commons screens: the Login screen & the Form screen.

Form Screen
Login Screen
Theme Setup
Image for post
Image for post

Wix Engineering

Architecture, scaling, mobile and web development…

Ethan Sharabi

Written by

Full Stack developer. UI enthusiast currently @ Wix.com working on react-native-ui-lib.

Wix Engineering

Architecture, scaling, mobile and web development, management and more, written by our very own Wix engineers. https://www.wix.engineering/

Ethan Sharabi

Written by

Full Stack developer. UI enthusiast currently @ Wix.com working on react-native-ui-lib.

Wix Engineering

Architecture, scaling, mobile and web development, management and more, written by our very own Wix engineers. https://www.wix.engineering/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store