Tools and Setup

This page helps you get started with the tools required to use and contribute to the Tendoo Design System, whether you're a designer or developer. Proper setup ensures consistent implementation, smooth collaboration, and efficient scaling.

For Designers

Design Tool: Figma

Tendoo Design System lives in Figma. Make sure to:

• Join the Tendoo Figma workspace
• Duplicate the latest system libraries into your project files
• Enable the shared Design System Library under Assets → Team Libraries
• Use the official tokens plugin (e.g., Tokens Studio, if applicable)

Plugins & Tools

• Tokens Studio – Sync design tokens
• Contrast – Check color contrast
• Content Reel – Use placeholder data and content
• Autoflow – Draw user flows easily

For Developers

Design Tokens

Use our design tokens package:

npm install @tendoo/design-tokens

Tokens include:

• Color
• Spacing
• Typography
• Radius
• Shadows

Component Library

Import and use prebuilt React components:

npm install @tendoo/ui

• Supports web and mobile platforms
• Built with accessibility in mind
• Customizable with your app’s theme settings

Environment Setup

Make sure your project includes:

• TypeScript
• Tailwind CSS (or your preferred utility-first framework)
• PostCSS / CSS Modules if needed
• Design Token integration (e.g., Style Dictionary)

Version Control & Documentation

• Components and tokens are version-controlled via GitHub.
• Changes are documented in the Release Notes.
• Use the dev branch for active development and follow PR review steps.

Optional Integrations

• Storybook – Preview components in isolation
• Chromatic – Visual regression testing
• Jest + Testing Library – Unit and accessibility testing

Getting your tools set up properly ensures a smoother workflow and greater consistency across the Tendoo platform. Reach out to the core team if you run into any blockers.