Senior UI Implementation Engineer.

Job Title: Senior UI Implementation Engineer
Job Type: Full-time
Location: Remote

As a Senior UI Implementation Engineer, you will play a pivotal role in
transforming Figma-based designs into pixel-perfect, brand-specific front-end
implementations for our white-labeled software solution. Your expertise in CSS, deep familiarity with Figma, and design-oriented mindset will ensure our web components not only function flawlessly but also mirror client branding with unmatched precision.
Reporting to the Head of Engineering and collaborating closely with the Principal
Front-end Engineer and design teams, you will drive the creation of scalable, reusable, and visually consistent UI components. Your success will be defined by your ability to deliver high-fidelity implementations, uphold exceptional code quality, and foster a culture of collaboration, attention to detail, and continuous improvement.

Key Responsibilities

1. UI Design Implementation & Theming
- Translate Figma-based designs into precise, client-specific CSS
stylesheets, ensuring 100% fidelity to visual specifications across all
breakpoints and devices.
- Develop and maintain reusable web components that integrate seamlessly
with React-based architectures, embedding brand-specific theming for
white-labeled solutions.
- Implement smooth, performant CSS and JavaScript-based animations
(e.g., transitions, keyframes, GSAP) as specified in Figma prototypes,
ensuring visual fidelity and alignment with client brand guidelines.
- Collaborate with design teams to interpret and refine Figma prototypes,
resolving discrepancies between designs and technical constraints while
preserving brand integrity.
- Implement modular theming systems (e.g., CSS custom properties, SCSS
variables) to enable rapid, consistent customisation for multiple client
brands.

2. Code Quality & Precision
- Write clean, maintainable, and well-documented CSS/SCSS code that
adheres to best practices (e.g., BEM, SMACSS) and the company’s coding
standards.
- Conduct meticulous code reviews, focusing on visual accuracy, CSS
performance (e.g., minimal repaint/reflow), and adherence to design
specifications.
- Optimise CSS animations for performance (e.g., using transform and
opacity to minimise reflows), ensuring smooth rendering across devices
and browsers while adhering to design specifications.
- Proactively identify and refactor inefficient or outdated styling code,
ensuring scalability and compatibility with modern browsers and devices.
- Ensure all implementations meet accessibility standards (e.g., WCAG 2.1)
and cross-platform compatibility, with zero visual deviations from approved
designs.

3. Project Delivery & Execution
- Deliver themed UI components and stylesheets within sprint timelines,
balancing speed, precision, and scope as defined in project planning.
- Identify potential risks (e.g., design ambiguities, performance bottlenecks)
early, proposing solutions and escalating to the Head of Engineering when
necessary.
- Optimise CSS for performance (e.g., reduced file size, efficient selectors),
providing measurable evidence of improvements (e.g., Lighthouse scores,
rendering metrics).
- Collaborate with backend and front-end teams to ensure seamless
integration of themed components with APIs and state management
systems.

4. Collaboration & Stakeholder Communication
- Engage actively in design handoffs, sprint planning, and team meetings,
contributing insights on UI feasibility and implementation strategies.
- Clearly articulate design-to-code trade-offs and technical constraints to
designers, product owners, and stakeholders, documenting decisions for
transparency.
- Work closely with design teams to align on brand guidelines, typography,
and color systems, ensuring consistency across client implementations.
- Bridge technical and creative discussions, fostering alignment between
design vision and engineering execution.

5. Leadership & Mentorship
- Mentor junior engineers on CSS best practices, Figma-to-code workflows,
and pixel-perfect implementation techniques through pair programming
and code reviews.
- Lead knowledge-sharing sessions (e.g., workshops, tech talks) on topics
like advanced CSS techniques, Figma collaboration, or theming scalability.
- Propose tools or processes (e.g., Figma plugins, CSS linters) to enhance
UI implementation efficiency, justifying recommendations with evidence.
- Model a detail-oriented, design-driven approach, inspiring team members
to prioritise visual fidelity and user experience.

6. Professional Conduct & Team Culture
- Maintain a collaborative, respectful demeanor in all interactions, upholding
the company´s values of integrity, innovation, and collaboration.
- Promote a culture of precision and creativity by sharing design insights
and encouraging open feedback within the team.
- Address conflicts or implementation challenges professionally, escalating
issues with clear context and proposed solutions.

Key Performance Indicators (KPIs)

1. UI Implementation Accuracy & Quality (30%)
? Achieve 100% visual fidelity to Figma designs, including animations and
transitions, in 95% of delivered components, as validated by design team
reviews.
- Maintain an average code review approval rating of 90% or higher, with
feedback emphasising CSS precision and adherence to standards.
- Implement at least one reusable theming improvement (e.g., optimised
stylesheet structure) per quarter, reducing customisation time by 10% or
more.

2. Code Performance & Scalability (25%)
- Ensure CSS performance metrics (e.g., Lighthouse CSS scores, render
times) meet or exceed targets in 95% of releases.
- Ensure animations maintain 60 FPS or higher on target devices, with no
jank or performance degradation, as measured by browser dev tools or
Lighthouse.
- Reduce styling-related bugs to fewer than 3 critical issues per release
cycle, tracked via Jira.
- Deliver modular, reusable components adopted in at least two client
implementations per review cycle, as assessed by the Principal Front-end
Engineer.

3. Timely Delivery & Execution (20%)
- Complete 95% of assigned UI tasks within sprint deadlines, barring
documented blockers, tracked in Jira.
- Resolve design or implementation risks within 48 hours, escalating
unresolved issues with actionable plans.
- Deliver themed components with zero post-launch visual regressions,
verified through QA and stakeholder feedback.

4. Collaboration & Communication (15%)
- Attend 100% of design handoffs and team meetings unless approved
otherwise, with active contributions noted by the Head of Delivery.
- Produce clear documentation for 80% of major UI implementation
decisions, accessible to designers and developers.
- Receive positive collaboration feedback from at least two cross-functional
team members (e.g., designers, product owners) per review cycle.

5. Leadership & Team Development (10%)
- Mentor at least one junior engineer per quarter, improving their CSS or
Figma workflow proficiency, as documented by the Head of Engineering.
- Lead one knowledge-sharing session per review cycle on UI
implementation topics, with positive attendance and feedback.
- Propose and implement one team-wide UI process improvement annually
(e.g., automated design-to-code tooling), adopted by the team.

Requirements

- Bachelor’s degree in Design, Computer Science, Software Engineering, or a
related field, or equivalent professional experience demonstrating advanced UI
implementation skills.
- Minimum of 5 years of front-end development experience, with at least 3 years
specialising in CSS/SCSS and Figma-to-code workflows, evidenced by a portfolio
showcasing pixel-perfect implementations.
- Proven track record of translating complex Figma designs into themed, reusable
web components, with examples of white-labeled or brand-specific projects.
- Expertise in CSS (e.g., Flexbox, Grid, custom properties, animations, keyframes),
SCSS, and modular theming systems, with demonstrated ability to match designs
identically.
- Proficiency in creating and optimising CSS animations (e.g., keyframes,
transitions) and JavaScript animation libraries (e.g., GSAP, Framer Motion), with
a portfolio demonstrating smooth, design-driven animations.
- Strong proficiency in Figma, including navigating prototypes, extracting assets,
and interpreting design systems, ideally with a background in UI/UX design or
visual arts.
- Advanced knowledge of React for building functional web components, with
familiarity in state management (e.g., Redux, Zustand) and API integration.
- Exceptional attention to detail, with a design-oriented mindset and ability to spot and correct visual discrepancies (e.g., typography, spacing, colors).
- Proficiency in modern JavaScript (ES6+), HTML, and cross-browser compatibility,
with experience using debugging and optimisation tools (e.g., Chrome DevTools).
- Strong problem-solving skills, with the ability to balance design fidelity,
performance, and technical constraints under tight deadlines.
- Excellent communication skills, with experience collaborating with designers and presenting implementation rationales to diverse audiences.
- Preferred: Experience with design systems, CSS-in-JS libraries (e.g.,
styled-components), or Figma plugins for streamlining design-to-code workflows.