A design system adapted to each studio’s colours

On Games2Gether, a video game community platform, each partner studio prepares its own pages. With the design team, I contributed to the Figma kit that lets them do it, even without a designer, while keeping the platform’s shared framework.

ColoursThree levelsplatform, studio and game
ContentReady to usecomponents, variables, templates and tutorials
AccessPublic fileavailable in Figma

Role: Product Designer (UX/UI), with the design team
Setting: In-house, Amplitude Studios / Games2Gether
For: The platform’s partner studios
Tools: Figma, Dev Mode, FigJam

01Customising without breaking the framework

Each studio wants its own colours, logo and visuals. The platform has to stay readable and consistent from one game to the next. The kit starts from the Games2Gether design system to give studios what they can change, and how to change it.

02Four things in the kit

Cover of the Figma file “Games2Gether Official Template” — **An organised file.** Page templates and visual specifications, so studios know what to provide and in which format.

Template page: customising colours with local variables, platform, studio and game, three colours each — **Variables.** Three colours per level, platform, studio and game: a studio changes its colours without touching the components.

Three home pages from the template, platform, studio and game, in three colour sets — **A preview.** Check how pages render before delivering the visuals.

Universe colour specifications: three colours per platform, studio and game, and a reminder about choosing accessible colours — **Specifications.** The role of each colour, and a reminder to choose colours that most users can read.

Template tutorial page: customising news, the expected image format and five steps in Figma — **Tutorials.** Replace content step by step, so a studio without a designer can manage on its own.

See the public Figma kit

03The partners’ administration tools

On the platform side, I also designed the tools where partners manage their content.

CMS: FigJam workshops with partners and the product team, settings grouped together and a preview added. Pages managed independently, freeing up about 4 hours a week for one developer.
Rewards administration: gathering needs and designing suitable forms, with draft saving. About 2 hours of development freed up each week.

Final sign-off on the CMS and the rewards was with my lead Product Designer.

04My role

Contributing to the kit with the design team, based on the Games2Gether design system.
Working on components, variants and variables with the designers.
Documenting states and interactions in Dev Mode, then following implementation with the developers, in three-week sprints.