Senior Front-end Engineer/Developer

adomita technologies pte. ltd.; Singapore; On-site; SGD 120,000 - 180,000; Full time

Job summary

adomita technologies pte. ltd. seeks a Senior Front-end Engineer to merge Figma designs with the design system, implementing components with a typed props API and token-based styling. You will ensure WCAG 2.2 AA accessibility, localisation, and RTL readiness while aligning with banking constraints.

You'll use AI to scaffold variants, tests, and docs, then maintain reusable prompts and contribute to Storybook documentation. A pixel-perfect, governance-driven release process is required.

Responsibilities

• Review and reconcile Figma component specs with the design system inventory.
• Map Figma variables to code design tokens covering colour, typography, spacing, motion.
• Build the component in the design system codebase with a typed props API mirroring Figma.
• Embed accessibility and banking constraints: WCAG 2.2 AA, keyboard and screen-reader support, localisation, RTL.
• Use AI assistants to scaffold code, generate variants, draft tests and documentation.
• Maintain AI context files and reusable prompts to keep generated code consistent.
• Write unit, interaction, visual regression and automated accessibility tests across themes and breakpoints.
• Hold a pixel-review session with the designer comparing Figma and Storybook; iterate fidelity.
• Document the component in Storybook with stories for states, guidelines, props API, tokens and migration notes.
• Release through governance workflow and publish to internal registry for adoption.

Skills

Front-end development

Design systems

TypeScript

Storybook

Figma

Accessibility

Design tokens

Tools

Storybook

Figma

Design tokens

Job description

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.