This project aims to streamline the creation and management of design tokens using the Tokens Studio plugin for Figma, in conjunction with Style Dictionary. By leveraging these tools, we automate the process of generating, organizing, and distributing design tokens across different platforms.

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. These can include colors, typography, spacing, and more. They are used to ensure consistent design language across various platforms and products.

• Tokens Studio allows for easy creation and management of design tokens directly within Figma, which is great for designers.
• Style Dictionary takes these tokens and transforms them into formats suitable for development, making it easier to apply consistent styles in different programming environments.

• Automated Token Generation: Create design tokens directly from Figma using the Tokens Studio plugin.
• Cross-Platform Support: Transform tokens into multiple formats (JSON, SCSS, XML, etc.) using Style Dictionary.
• Consistency & Scalability: Maintain a single source of truth for design tokens that can be applied consistently across all platforms.
• Customizable & Extendable: Tailor the token generation process to fit your specific project needs and easily extend it with additional functionality.

Follow these steps to set up and use the Design Tokens Generator:

• Node.js (version 12 or higher)
• A Figma account with access to the Tokens Studio plugin
• A GitHub repository to store your project

1. Clone the repository:

   git clone https://github.com/bellentani/aplica-design-tokens.git
   cd design-tokens-generator

2. Install dependencies:

   npm install

1. Setup Tokens Studio in Figma:

   • Open your Figma project.
   • Open the Tokens Studio plugin.
   • Setupe tokens within Figma using the plugin.

2. Export Tokens:

   • Export your tokens from Tokens Studio in a JSON format.

1. Place your JSON tokens:

   • Save the exported JSON file in the tokens directory within your project.

2. Configure Style Dictionary:

   • Open config.json and customize it according to your token categories and desired output formats.

3. Build the tokens:

   • Run the following command to generate the tokens in the specified formats:

     npm run build

• tokens/: Contains the exported token files from Tokens Studio.
• build/: The output directory where generated tokens will be saved.
• config.json: The configuration file for Style Dictionary.
• scripts/: Custom scripts to enhance the token generation process.
• README.md: Project documentation.

You can run various commands to generate and manage your tokens:

• npm run build: Generate tokens based on the configuration.
• npm run clean: Clean the build directory.

Edit the config.json file to specify how and where the tokens should be output. You can define multiple formats and destinations to suit different platform requirements.

We welcome contributions! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/your-feature).
5. Open a pull request.

This project is licensed under the MIT License - see the LICENSE file for details.

• Thanks to the teams at Tokens Studio and Style Dictionary for providing such powerful tools.
• Inspired by design systems and token management best practices.

For questions or support, please open an issue on this repository or reach out via email.

Feel free to customize the content as per your specific project details and requirements.