FIFA+
Component libraries and UI design
Agency: Wonderful & Brilliant
Client: FIFA
Role: Figma component creation, Figma library organisation and maintenance, UI design
FIFA+ is a free digital platform created to connect football fans more deeply with the game they love. FIFA+ offers 40,000 live games from around the globe each year, premium original content, the greatest archive in international football, stats, scores and more.
Challenges
Single, master Figma file used by all designers for entire platform
Performance issues of the Figma file as it continued to grow
Very few components used in page designs, even though components had been created – often components were detached so they could be edited in designsComponents built by grouping design elements, rather than making them responsive or flexible
“Design debt” building up daily as more features and pages were designed without a library of components and styles linked to the designs
Significant potential for reworking multiple designs manually if any element or component was amended
Solutions
The single, master Figma file replaced with a system of libraries for styles, icons, and components.
Page and feature designs moved out of the master file and into separate Figma files to keep file size low and prevent performance issues
Components built using autolayout and constraints to ensure flexibility in designs
Figma libraries documented at component level to give all users clear use cases, as well as how the components have been built
All existing designs updated to use the components and styles, in order to reduce the design debt created when changes were made to elements
The libraries were made available to the development team so they could start building their library of coded components.
Setting up this system for FIFA+ also enabled the creation of library subsets for tournament specific designs, like Qatar World Cup 2022, Women’s World Cup 2023 and World Cup 26.
FIFA+ design examples
Collaborating with the other designers enabled me to build a comprehensive set of flexible components and allowed for some expressive designs to be created by the design team. Some of which can be seen below. My role also encompassed some of the UI design, as well as icon design.
Qatar World Cup 2022 design examples
The Qatar World Cup 2022 Figma libraries were set up so the FIFA+ page design files could be duplicated and “library swapped” to replace components with tournament specific and branded components and styles. This theming significantly improved the speed that designs were made available to the development team.
