Overview

The IG Markets app for the APAC region aims to provide a seamless trading experience for users, integrating real-time market data, advanced trading tools, and a user-friendly interface.

The aim of this task was to create parity between code and design. by eliminate drift between the app's repo component library and the Ticker Design System in Figma. One definition per component, with code being the source of truth, Figma mirroring it exactly and makes the parity verifiable rather than aspirational.

Why it matters

• One vocabulary across the teams
• Faster onboarding
• Both sides learn the same catalogue
• No design debt

Benefits

• Figma reflects what actually ships: designers use production parity components, not a simple library.
• Self-serve specs: Dev Mode shows the real usage per variant resulting in fewer annotation layers.
• Trustworthy tokens and modes: every semantic colour aliases the correct primitive in both themes.
• No more lookalike ambiguity: no duplicate, designers stop guessing which variant is current.
• Fewer misalignments and bugs: divergence is detectable by tooling rather than discovered in QA.
• Automate drift detection: a weekly checks run that posts code vs design diffs to the team channel.

Setup

React Native / Storybook / VSCode / Claude Code / Jira MCP / Code Connect CLI / Figma Desktop Bridge

The task

We started with a triage on the component folder to decide what earns what. The output was a an inventory for ratification with design, nothing got built, moved, or deleted at this stage.

After analyse the component in the repo, a mirror component in Figma was created to create parity. This was done using Figma Desktop Bridge which helped creating the component and assigned the correct tokens. A 1:1 code-canonical component set per component, generating both ComponentName.figma.tsx and ComponentName.stories.tsx.