Design and Front-End Engineer
About the Position
We are looking for a Design and Front End Engineer who works fluently across design and code and takes ownership of a scalable design system used across a SaaS product suite. In this role, you will lead the full lifecycle of the design system, from Figma foundations to production ready React components, with a strong focus on accessibility, internationalisation, and long term maintainability.
About the Project
The project focuses on building and evolving a shared design system that supports complex travel related user journeys, including search, booking, itineraries, and pricing. The system serves multiple SaaS products and enables consistent, accessible, and localised experiences at scale.
About the Team
You will work within a cross functional product environment alongside product designers, front end engineers, accessibility specialists, and localisation partners. Collaboration is hands on and iterative, with close alignment between design and engineering to ensure smooth adoption of the design system across product teams.
Responsibilities
- Evaluate and adopt an off the shelf design system as a foundation and extend it into a brand aligned system with clear visual and structural differentiation.
- Architect and maintain the design system in Figma using components, variants, tokens, styles, and auto layout.
- Build and manage reusable Figma libraries with clear organisation, versioning, and governance.
- Define and maintain design token structures for typography, colour, spacing, and motion and keep them aligned between Figma and code.
- Extend and customise an existing React based component library to support brand and travel specific product needs.
- Develop clean, performant, and well tested React and TypeScript components with clear APIs and Storybook documentation.
- Create and maintain a living documentation portal covering both UI primitives and travel domain patterns such as search flows, booking steps, and pricing modules.
- Collaborate with engineers to integrate design system components into product codebases effectively.
- Ensure all components meet WCAG 2.1 AA standards and support inclusive user experiences.
- Implement correct ARIA roles, keyboard navigation, focus management, and screen reader semantics.
- Conduct accessibility audits using automated tools and manual testing and share findings with product teams.
- Design and build components with internationalisation in mind, including RTL support, flexible layouts, and locale aware formatting.
- Implement internationalisation using established frameworks and manage translation key structures.
- Partner with localisation teams to validate components across languages and scripts.
Requirements
- Professional experience working with Figma at an advanced level, including components, variants, auto layout, and tokens.
- Experience designing, adapting, and extending design systems beyond basic theming into fully custom, brand aligned systems.
- Strong proficiency in React, TypeScript, and modern front end development practices.
- Experience working with design token architectures and synchronising tokens between design and code.
- Practical knowledge of WCAG 2.1 AA standards, ARIA authoring practices, and assistive technology testing.
- Hands on experience building internationalised user interfaces, including RTL layouts and locale aware formatting.
- Experience documenting and communicating system decisions to cross functional teams.
- Strong attention to detail in both design assets and front end implementation.
Nice to Have
- Experience defining design system governance models, contribution workflows, and deprecation strategies.
- Familiarity with CI CD pipelines for publishing component libraries and visual regression testing.
- Experience with motion design or animation using tools such as Framer Motion or CSS transitions.
- Exposure to additional front end frameworks or cross platform environments such as Vue, Angular, or React Native.
Technologies
React, TypeScript, Figma, Storybook, CSS-in-JS, CSS Modules, Design Tokens, Style Dictionary, WCAG 2.1, ARIA, i18next, React Intl, Axe, Lighthouse, GitHub Actions, Chromatic, CI/CD pipelines
