Senior Front-end Engineer/Developer

Senior Front-end Engineer/Developer

• Review and reconcile Figma component specs (anatomy, variants, states, responsive behaviour) with the existing design system inventory, and run a design-dev kickoff to close open questions before building.

• Map Figma variables to code design tokens (colour, typography, spacing, motion) and verify parity through a token-sync pipeline, raising new semantic tokens back to design rather than hard-coding.

• Build the component in the design system codebase following its architecture conventions, with a typed props API that mirrors Figma property names and covers the full variant and state matrix.

• Embed accessibility and banking constraints from the start: WCAG 2.2 AA, keyboard and screen-reader support, contrast, localisation, RTL, and locale-specific currency, date and number formats.

• Use AI assistants to scaffold code, generate variants, draft tests and documentation, and convert Figma specs into first-pass code, while critically reviewing all output and respecting the bank's AI usage and data policies.

• Maintain AI context files, conventions and reusable prompts as engineering assets so generated code stays consistent with the design system.

• Write unit, interaction, visual regression and automated accessibility tests across themes and breakpoints, complemented by manual screen-reader checks.

• Hold a pixel-review session with the designer comparing Figma and Storybook side by side, and iterate until spacing, type, colour and motion fidelity are confirmed.

• Document the component in Storybook with stories for every state, usage guidelines co-written with design, props API, tokens consumed and migration notes.

• Release through the governance workflow (design sign-off, code review, semantic versioning, changelog), publish to the internal registry, support adopting teams and feed usage insights back into the design backlog.