Job Title: Frontend ReactJS Developer (UI Conversion & Interactions)
Level: Mid-Level (3–5 years experience)
Employment Type: Full-time(Remote)

Role Overview

We are looking for a Frontend ReactJS Developer (UI Conversion & Interactions) who not only converts Figma designs into clean React code, but also brings interfaces to life with smooth interactions, transitions, and micro-animations.

Your core mission:
Take UI/UX designs → build pixel-perfect, responsive, and highly interactive React frontends with thoughtful motion and delightful user experiences.

Key Responsibilities

1. UI to React Conversion

• Convert Figma/Adobe XD/Sketch designs into production-ready React components.

• Ensure pixel-perfect implementation of layout, spacing, typography, and visual hierarchy.

• Build responsive layouts that behave consistently across desktop, tablet, and mobile.

2. Interactions, Transitions & Animations

• Implement micro-interactions (hover states, active states, focus states, click effects, error states, tooltips, etc.).

• Create smooth transitions between views, modals, drawers, and components.

• Build loading states (skeletons, spinners, progressive loaders) that feel fast and modern.

• Use animation libraries such as Framer Motion, React Spring, or GSAP to craft:

  • Page transitions

  • Animated lists, cards, and accordions

  • Subtle entrance/exit animations

• Ensure animations are purposeful, performant, and aligned with UX goals (not just decorative).

• Work with designers to interpret motion specs or propose motion patterns where none are defined.

3. Frontend Engineering

• Develop reusable, modular React components with Hooks and composition patterns.

• Implement state management using Redux or similar tools.

• Integrate with RESTful/GraphQL APIs, handle data loading, and manage UI states (loading, error, empty).

• Follow component-driven development and help maintain a shared component library where applicable.

4. Code Quality, Performance & Compatibility

• Write clean, maintainable, and well-documented code.

• Optimize rendering, bundle size, and network usage to maintain smooth 60fps interactions where possible.

• Debug and fix layout and interaction issues across major browsers and devices.

• Use tools like Chrome DevTools, Lighthouse, React DevTools to profile and improve performance.

5. Collaboration & Process

• Work closely with UI/UX designers to refine layouts, interactions, and motion behavior.

• Collaborate with backend engineers on API contracts and data requirements.

• Contribute to estimation, sprint planning, and technical discussions.

• Provide input on design system evolution, especially regarding interactive components and motion guidelines.

6. Accessibility & Best Practices

• Implement semantic HTML and appropriate ARIA attributes for interactive elements.

• Ensure that key interactions are accessible via keyboard navigation and screen readers.

• Follow best practices for SPA/React SEO, where relevant (meta tags, structured data in Next.js, etc.).

Required Skills & Qualifications

Education

• Diploma/Degree in Computer Science, Software Engineering, IT, or equivalent practical experience.

Technical Skills

• 3–5 years of experience in frontend development, with at least 2+ years in ReactJS.

• Strong proficiency in:

  • ReactJS (Hooks, functional components, composition patterns)

  • JavaScript (ES6+); TypeScript experience is a strong plus

  • HTML5, CSS3, Flexbox, CSS Grid

• Solid experience with UI interactions & animations, including at least one of:

  • Framer Motion, React Spring, GSAP, or equivalent libraries

• Experience with styling approaches such as:

  • Tailwind CSS, SCSS, Styled Components, Emotion, or similar.

• Familiarity with state management (Redux, Zustand, Context API, etc.).

• Experience integrating RESTful APIs; GraphQL is a plus.

• Strong understanding of responsive design, cross-browser compatibility, and web performance.

Tools & Workflow

• Comfortable working with Figma/Adobe XD/Sketch for UI inspection, spacing, and motion references.

• Hands-on experience with Git and standard branching workflows (GitHub / GitLab / Bitbucket).

• Familiarity with bundlers and tooling (Vite, Webpack, or similar).

Soft Skills

• Extreme attention to detail: you notice misaligned icons, incorrect easing, and off-timing.

• Strong communication skills to discuss design trade-offs, motion details, and edge cases.

• Ability to work independently and manage multiple tasks and deadlines.

• Problem-solving mindset with a strong sense of ownership over the user experience.

Nice-to-Have

• Experience with Next.js or other SSR/SSG React frameworks.

• Experience designing or contributing to design systems (tokens, components, motion rules).

• Knowledge of Jest, React Testing Library, or other testing tools.

• Familiarity with CI/CD workflows for frontend deployment.

• Understanding of Core Web Vitals, WCAG accessibility guidelines, and SEO in modern web apps.

Example Performance Indicators

• Low number of UI/UX defects, especially related to interactions and visual fidelity.

• High Lighthouse scores (Performance & Best Practices) on key screens.

• Consistent 60fps experience on heavily interactive pages.

• Positive feedback from designers and users on the smoothness and delight of the UI.