UIUX Designer Developer

ATech Solution; Jakarta Utara; On-site; IDR 167,400,000 - 301,320,000; Full time

Job summary

ATech Solution seeks a UI Engineer who blends strong frontend development with UX sensibilities. You will translate designs into production-ready interfaces using Next.js, React, TypeScript and Tailwind, with server components by default and client components where interactivity is required.

Beyond coding, you’ll apply UX judgment to flows, states and layouts, ensuring accessibility and alignment with the design system.

Qualifications

• Strong production experience with React + TypeScript + Tailwind in a real product.
• Shipped UI on web and mobile (responsive web + mobile app).
• Able to implement from Figma with high visual fidelity and follow design system guidance.
• Portfolio showing shipped UI code and UX judgment across flows, states, and responsive layouts.
• Component-library discipline: variants, tokens, composition, Storybook.
• Accessible UI as a default, not an afterthought.
• Independent contributor in a git monorepo: branch, PR, reviews, iteration.

Responsibilities

• Build and polish UI in Next.js (App Router) + React + TypeScript + Tailwind.
• Default to Server Components; extract client components only for interactivity.
• Reuse the shared component library and existing patterns before adding new ones.
• New shared primitives go in the design system with a Storybook story.
• Use semantic design tokens — no raw utility colors or hardcoded hex.
• Cover empty, loading, error, and gated/plan variants — not only the happy path.
• Write unit tests and Storybook stories for new UI; follow existing end-to-end patterns when a flow is user-facing.
• UX Design: Translate Figma into implementable specs; flag conflicts with the design system.
• Design missing flows, edge states, and responsive/mobile behavior when Figma is incomplete.
• Produce lightweight artifacts: annotated frames, flow notes, component inventory for review.
• Polish: alignment, spacing, contrast, focus, hover/press, and motion matching the product.
• Accessibility: keyboard, focus rings, contrast, labels on interactive controls, reduced-motion.

Skills

React

TypeScript

Tailwind

UX judgment

Accessibility

Figma specs

Storybook

Playwright

Vitest

i18n UI

Git monorepo

Tools

Next.js

React

TypeScript

Tailwind

Storybook

Playwright

Vitest

Figma

Job description

This position combines UI engineering with UX design responsibilities. Your core function will be UI development: translating designs, specifications, or briefs into production-ready interfaces. Beyond development work, you will apply sound UX judgment to determine flow, states, and layout when design specifications are incomplete. You should be an experienced UI developer with a working understanding of UX principles, not a designer seeking to transition into development.

Responsibilities

Build and polish UI in Next.js (App Router) + React + TypeScript + Tailwind

Default to Server Components; extract client components only for real interactivity

Reuse the shared component library and existing patterns before adding new ones

New shared primitives go in the design system with a Storybook story

Use semantic design tokens — no raw utility colors or hardcoded hex

Cover empty, loading, error, and gated/plan variants — not only the happy path

Write unit tests and Storybook stories for new UI; follow existing end-to-end patterns when a flow is user-facing

UX Design (part of the job)

Translate Figma into implementable specs; flag conflicts with the design system instead of copying raw values blindly

Design missing flows, edge states, and responsive / mobile behavior when Figma is an incomplete frame

Produce lightweight artifacts: annotated frames, flow notes, component inventory, enough for review

Polish: alignment, spacing, contrast, focus, hover/press, and motion that matches the product

Accessibility: keyboard, focus rings, contrast, labels on interactive controls, reduced-motion where we animate

Requirement

Must Have

Fluent in English, both written and verbal

Comfortable working on products within the investment/financial markets domain

Strong production experience with React + TypeScript + Tailwind in a real product (not only marketing sites)

Shipped UI on both web and mobile (responsive web plus mobile app or mobile-web product work)

Can implement from Figma with high visual fidelity and know when to follow the product design system instead of raw Figma values

Portfolio that shows both shipped UI code and UX judgment (flows, states, responsive, empty/error)

Component-library discipline: variants, tokens, composition, Storybook

Accessible UI as a default, not a later pass

Can work independently in a git monorepo: branch, PR, address review, iterate from screenshots/gaps

Strong Plus

Design-system migration or visual-debt cleanup in a large existing app

Native mobile (React Native, SwiftUI, or equivalent) or a strong mobile-web craft

Light motion (CSS transitions, tasteful animation) without hurting performance

Vitest + Storybook + Playwright

Figma (Auto Layout, components, variants, Dev Mode)

Dark + light theming via CSS variables

i18n-aware UI

Not This Role

Backend / API / auth-platform work as the main job

Pure visual design with no production PRs

Greenfield “redesign the whole app” without shipping incrementally

Building a second component library next to the existing design system

Atech Solution Limited specialise in providing an excellent software development and web application development.

Our business is about making your innovative ideas come to life. With a perfect blend of young and experienced IT professionals, we aim to bring a good experience in technology which has a real impact on the present and the future.

We are working with companies all over the world from a single-person business to large corporate. We have been building the trust with our clients and its value for years. We help the industry optimize its business with effective and efficient technology solutions to transform and digitize their business processes so they can focus on their core business.

Website

https://atech.software/

IT Services and IT Consulting

Atech Solution Limited specialise in providing an excellent software development and web application development.

Our business is about making your innovative ideas come to life. With a perfect blend of young and experienced IT professionals, we aim to bring a good experience in technology which has a real impact on the present and the future.

We are working with companies all over the world from a single-person business to large corporate. We have been building the trust with our clients and its value for years. We help the industry optimize its business with effective and efficient technology solutions to transform and digitize their business processes so they can focus on their core business.

Researching careers? Find all the information and tips you need on career advice.