Scalable Design System by Susanna Nevalainen

Scalable Design System

Susanna Nevalainen

Contact for pricing

About this service

Summary

I'll create your team a scalable and easy to maintain design system using best practices using components, variables, styles auto layouts and other advanced tooling like dark and light modes. As an optional addon, I can also transform the designs into code with React so that your team can quickly start developing new features with consistent UI library. In short, you will get everything you need to start creating your own user interfaces with reusable building blocks and consistent branding which speeds us the product development on average 47% for developers and 33% for UI/UX designers. After building 8 large-scale enterprise design systems in the past for companies like Hexagon and Ouro, I'm familiar with the challenges on balancing between design, development and management teams. I'm also experienced in educating the management about the importance of design system and training designers and developers to ensure smooth adaptation of the new design system.

Process

Step 1: Introduction call In the call we go through your team's needs and expectations and see if we are a good fit for each other. Step 2: Define the style guide We will collect the existing branding material, colors, typefaces, styles etc for the basis of the design system. Step 3: Tokens The style guide will be transformed into reusable variables and styles in Figma while keeping also dev syntax in mind for easy communication. If your team uses just Framer, it's also possible to set up the design system directly in Framer. Step 4: Components The next step is to go through your UI and list the main reusable components. Each component will be created as Figma (or Framer if you use Framer) component compatible with variables, styles and modes. Step 5: Component implementation in code (optional) Upon request, you have an option to turn your Figma components into code directly and get unified documentation and playground of each document to ensure the critical handover phase from design to development will be as smooth as possible. If you use Framer, the components will be implemented as Framer components with possibility to add also custom code into components. Step 6: Training Your team will receive in-dept training bootcamp to master the new design system and ensure you'll get the most out of it. Step 7: Ready to go! Your design and dev team will have a ready to use plug & play libraries that can be used in product development immediately to speed up the design and development dramatically.

What's included

Figma Design Library
Figma Design Library includes all main reusable components, styles, variables and mode set up with the best practices. The library will be ready to use immediately by all teams in your company to ensure consistent look & feel across your products. For smaller projects, it's also possible to implement the design system directly in Framer instead of Figma.
React Code Library
Upon request, Figma Library can be additionally implemented also in React Code which not only speeds up the design team but also closes the gap between design and development ensuring frontend team is able to ship new features fast. The design system component development is a specific area of frontend development, which requires understanding of reusable and extendable code in-depth. If you don't have a design system expert on your frontend, it's recommended to purchase the whole bundle from figma to code so you can focus on actual development of your product features faster using reusable components.
Documentation Site
There is a saying that if it's not documented, it does not exist. On design systems it is crucial to have an easy-to-access documentation platform where developers as well as designers can play around with the implemented components and share example usage across the team. My go to documentation tool is StoryBook with snapshot testing every stories are changed but I'm open to other platforms too if your team has other preferences.
Framer Design System Integration
If your website is built with Framer, I'll set up the design tokens and styles directly in Framer to ensure they are easily accessible for everyone who will edit the website.

Example projects