Principal Product Design Engineer

Overview

Shift4 (NYSE: FOUR) is boldly redefining commerce by simplifying complex payments ecosystems across the world. As the leader in commerce-enabling technology, Shift4 powers billions of transactions annually for hundreds of thousands of businesses in virtually every industry. For more information, visit www.shift4.com.

We’re looking for a Product Design Engineer to be the connective tissue between Product Design and Engineering. This role sits at the intersection of UX, front‑end implementation, and systems thinking: you turn Figma into robust, reusable code, shape our design system in production, and lay the technical foundations that allow the Design organization to scale.

You’ll build interactive, high‑fidelity prototypes and production‑ready UI components, using AI‑assisted tools to accelerate exploration, prototyping, and iteration. You’ll partner closely with product designers, engineers, and product managers to bring ideas to life quickly, test them with users, and translate strong design intent into scalable implementation and a reliable design‑to‑code pipeline.

Responsibilities

Bridge design and engineering

• Translate design specs, components, and interaction patterns into high‑quality front‑end implementations that can be adopted by engineering teams.
• Work closely with designers to refine interaction details, states, and edge cases, then express them as code, stories, and clear usage guidelines.
• Collaborate with engineers to ensure prototypes align with technical constraints and can transition smoothly toward production.

Prototyping and AI‑assisted workflows

• Build high‑fidelity, interactive prototypes using a mix of design tools, AI prototyping tools (e.g., Claude‑style assistants, Replit, Figma AI), and code.
• Use AI‑assisted tools to rapidly explore ideas, generate UI logic, scaffold components, and iterate faster while maintaining implementation quality and consistency.
• Support UX research by preparing realistic prototypes for testing and iterating quickly based on user feedback and data.

Design System in Code

• Build and maintain the coded design system (components, tokens, utilities) in partnership with design system owners and front‑end leads.
• Ensure a tight mapping between Figma and code so components, variants, and tokens in Figma have clear, predictable equivalents in React/Vue and CSS/Tailwind.
• Establish standards for accessibility, performance, and theming within the component library, and ensure these standards are upheld across teams.

Foundations, tools, and workflows

• Set up and evolve tools, workflows, and repository structures that designers rely on for design‑to‑code (e.g., Storybook, design system sites, sandboxes, playgrounds).
• Define foundational conventions (naming, file structure, contribution guidelines, review processes) that make it easy for designers and engineers to extend the system.
• Partner with platform and DevEx teams to integrate design system components into product repos and CI/CD workflows.

Collaboration and enablement

• Pair with designers to upskill them on implementation realities and with engineers to deepen their understanding of design intent and UX quality.
• Support the adoption of AI prototyping tools and AI‑driven workflows within the design team, helping designers build confidence and fluency with new technologies.
• Create documentation, examples, and “how‑to” guides that help product teams use and extend the design system correctly.

Qualifications

• 8+ years of experience in product design engineering, UX engineering, design technology, UI engineering, or a similar hybrid role.
• Strong understanding of product design principles, UX patterns, and interaction design, with examples of complex product workflows.
• Strong proficiency in modern front‑end technologies: HTML, CSS, JavaScript/TypeScript, and a component framework such as React.
• Demonstrated experience implementing and maintaining a component library or design system in production.
• Comfortable working in Figma (or equivalent) and mapping design structures (components, variants, tokens) to code architectures.
• Experience building prototypes that go beyond click‑throughs (real data, logic, interactions, and edge cases).
• Experience collaborating closely with product designers, engineers, and product managers to ship user‑facing features in cross‑functional, Agile teams.
• Strong communication skills in English both written and verbal an with the ability to explain both design and technical decisions clearly to diverse stakeholders.
• Experience with design systems and component libraries, including contribution and governance.
• Strong knowledge of AI tools to accelerate design and development workflows, and interest in shaping how they’re used in design‑to‑code.

Nice‑to‑have

• Experience in a SaaS or payments/fintech environment with complex, data‑heavy interfaces.
• Familiarity with mobile platforms (Android; Kotlin a plus).
• Experience with documentation tools (Storybook, MDX, internal component galleries) and design system governance.
• Comfort with basic backend concepts and APIs sufficient to wire up realistic data into prototypes and component examples.
• Experience exploring and prototyping new interaction models, including AI‑assisted user flows, automated tasks, agent‑based experiences, voice interactions, or hardware‑connected interfaces.

#LI-BN1

We are an Equal Opportunity Employer and do not discriminate against any employee or applicant for employment because of race, color, sex, age, national origin, religion, sexual orientation, gender identity and/or expression, status as a veteran, and basis of disability or any other federal, state or local protected class.