CelonisMadrid, SpainSenior Design Engineer, Design System
Designs and builds a scalable Angular and TypeScript design system, translating complex data and AI-driven behaviors into accessible, high-performance interfaces. The role requires 5–8 years of design engineering or front-end experience, strong UX judgment, and hands-on expertise in design tokens, Figma, and accessibility.
Salary not listed
Hybrid5+ YOEFrontend Engineering
About the job
Responsibilities
- Design and build production components in Angular and TypeScript, using semantic HTML, ARIA, and modern CSS custom properties for design tokens.
- Own interaction decisions, component design, and front-end architecture end to end.
- Translate complex process-intelligence data and AI-driven behaviors into clear, intuitive, high-performance operator experiences.
- Set standards for front-end quality, visual polish, motion and animation, performance, and accessibility.
- Drive rapid prototyping to explore interaction concepts and create testable experiences.
- Collaborate with designers, product managers, and engineers to evolve the design system through a contribution model.
- Maintain tokens as code in the W3C DTCG format using Style Dictionary or similar tools.
- Structure component metadata, documentation, and APIs for AI coding agents.
- Author and maintain Figma Code Connect mappings between Figma components and coded counterparts.
- Build CI guardrails, including visual-regression, accessibility, and token-compliance checks.
- Use AI design and coding tools such as Figma Make, v0, Cursor, Claude Code, and Copilot.
- Lead system initiatives and mentor designers and engineers.
Requirements
- Approximately 5–8 years of experience across design engineering, UX engineering, or front-end development, including significant design-system or component-library work in a SaaS or B2B environment.
- Strong UX instincts and the ability to make independent design decisions with minimal oversight.
- Strong production experience with Angular and TypeScript.
- Excellent HTML and CSS fundamentals.
- Experience with, or genuine openness to, React.
- Deep understanding of design-token architecture, including primitive, semantic, and component tiers, and modern token pipelines.
- Strong Figma proficiency and the ability to move fluidly between design and code.
- Demonstrated accessibility expertise, including implementation of WCAG 2.2 in code.
- Hands-on experience with AI design and coding tools.
- Product mindset, ownership, communication, and senior individual-contributor leadership skills.
Nice-to-haves
- Production experience with Figma Code Connect.
- Experience building or integrating MCP (Model Context Protocol) servers, such as the Figma Dev Mode MCP server or a custom design-system MCP server.
- Experience building evals for AI-generated UI or writing specifications and prompts for AI generation.
- Experience with complex, data-dense, or real-time interfaces.
- Token-pipeline experience with Style Dictionary or Tokens Studio.
Compensation and Benefits
- Restricted Stock Units (RSUs) and merit-based refresh grants for full-time employees.
- Inclusive parental leave: 24 weeks of fully paid leave for primary carers and 12 weeks for supporting carers.
- Unlimited PTO in applicable regions and generous PTO globally.
- Flexible hybrid work model.
- Learning framework, mentorship programs, and access to a dedicated learning platform.
- Subsidized Wellhub memberships, mental health counseling, and Wellness Weeks.
- Paid time off for community and environmental volunteering.
Skills
AngularTypeScriptHTMLCSSReactFigmaW3C DtcgStyle DictionaryFigma Code ConnectWcag 2.2McpTokens StudioVisual RegressionAriaDesign Tokens
