Scalable Design SystemSusanna Nevalainen
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.
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 work
Contact for pricing
Tags
Figma
Framer
React
Storybook
Design Systems Specialist
Design Token
UI Designer
Service provided by
Susanna Nevalainen Zürich, Switzerland
- $10k+
- Earned
- 5
- Paid projects
- 92
- Followers
Scalable Design SystemSusanna Nevalainen
Contact for pricing
Tags
Figma
Framer
React
Storybook
Design Systems Specialist
Design Token
UI Designer
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.
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 work
Contact for pricing