UIUX Designer Developer

ATech Solution; Provinsi Bali; On-site; IDR 279,000,000 - 446,400,000; Full time

Job summary

ATech Solution in Bali is seeking a UI Engineer who blends UI development with UX design, translating designs into production-ready interfaces while applying UX judgment when plans are incomplete.

You will work with Next.js, React, TypeScript, Tailwind; prefer Server Components; build tests and Storybook stories; contribute to design system; ensure accessibility and responsive behavior; collaborate with product teams.

Qualifications

• Must have strong production React+TypeScript+Tailwind experience in a real product
• Experience shipping UI for web and mobile (responsive web/mobile)
• Ability to translate Figma into implementable specs and follow design system rules
• Portfolio showing shipped UI code and UX judgment across flows and states
• Component-library discipline: variants, tokens, composition, Storybook
• Accessibility as a default, not an afterthought
• Ability to work independently in a git monorepo: branches, PRs, reviews

Responsibilities

• Build and polish UI in Next.js (App Router) + React + TypeScript + Tailwind
• Default to Server Components; extract client components only for interactivity
• Reuse shared components and design patterns
• Add new shared primitives to design system with Storybook
• Use semantic design tokens; avoid raw hex colors
• Cover empty, loading, error, and gated/plan variants
• Write unit tests and Storybook stories for new UI
• UX design: translate Figma into specs; flag conflicts with the design system
• Design missing flows and responsive/mobile behavior when Figma is incomplete
• Produce lightweight artifacts: annotated frames, flow notes, component inventory
• Polish: alignment, spacing, contrast, focus, hover/press, motion
• Accessibility: keyboard focus rings, labels on controls, reduced motion

Skills

UI development

UX judgment

Responsive design

Accessibility

Fluent English

Tools

Next.js (App Router)

React

TypeScript

Tailwind

Storybook

Vitest

Playwright

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