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.