Green Island

Green Island faced the challenge of creating a reusable design system for their gaming platforms that could be easily reused for multiple clients. Before the beginning of the project, the internal development team had to manually recreate design components for each client website, thus the development process was slow and sometimes inconsistent. 

We had to remove and rename every styling token and recreate them in the plugin, because the design system was already in place, but it was not using the tokens plugin. Following that, we had to go through the entire Figma file and add the appropriate color tokens to their respective components. We lost time and had to do double work, as the plugin was not included in the design system from the start. 

To streamline the development process, Green Island and Mirahi partnered together to create a design system based on Tokens Studio for Figma. Tokens Studio allowed Green Island to create a design system that could be reused across multiple websites, helping the developers build websites faster and more efficiently. With Tokens Studio, Mirahi was able to create a Token library system of design elements that could be easily accessed, changed, and applied to new websites. By applying the tokens to components within Figma, it was very easy to change an entire prototype to the desired color and needs of the client. 
 
To ensure consistency and standardization, Mirahi implemented "design-token types" as the foundation for Figma tokens. This system allows for easy reassignment of colors to individual components without affecting the entire color scheme. By utilizing this approach, modifying a particular component's color is simplified, while keeping other colors intact. 

The implementation of Tokens Studio had a significant impact on Green Island's development process. Green Island was able to build websites more quickly and efficiently thanks to Tokens Studio, which reduced development time by up to 50%.  

The ability to reuse design elements across multiple websites also contributed to design and branding consistency, which resulted in a better end-user experience. Because of the plugin, Green Island was able to be more responsive to client needs and preferences by presenting new designs and implementing them with minimal effort.

Key Takeaways

Green Island’s experience with Tokens Studio demonstrates the value of investing in a design system that can be easily reused across multiple projects.  

They were able to streamline their development process, reduce errors and development time but best of all deliver tailored results for their clients by using Tokens Studio.  

The following are the key takeaways from Green Island's experience: 

• Investing time in an adaptable design and token system for new projects will save time and resources in the long run. 

• The token plugin provides a downloadable json file for developers to put in their code. 

• The json file makes sure the developers will not make mistakes copying the design and in turn, save time. 

• Any changes made in the plugin are directly uploaded to GitHub. 

• When having to change tokens in the design, it will only take a couple of seconds, and the plugin automatically updates your whole Figma file

Green Island's use of Tokens Studio demonstrates the benefits of investing in a design system that can be easily reused for multiple projects. The results speak for themselves - the ability to build websites faster and more efficiently, reduce errors, and deliver a better user experience for end-users. Green Island was able to be more responsive to client needs and preferences by presenting new web designs with only minor modifications. Green Island's experience is a valuable case study for companies looking to streamline their development process and deliver better results to their clients.