Skip to main content

AI Handoff: Figma Layout Sync

Context​

This app is an Expo / React Native / TypeScript app for Golden Lotus Spa. The user asked to make the UI match the Figma design as closely as possible, using Figma as the source of truth and setting up Tailwind/NativeWind foundations.

Figma source of truth:

  • File URL: https://www.figma.com/design/ZllZIMyuuJY8rRniXtk5lW/Spa?node-id=0-1
  • File key: ZllZIMyuuJY8rRniXtk5lW
  • Root node: 0:1
  • Figma auth: use FIGMA_TOKEN from local .env. Do not commit .env.

Do not use older local Figma exports or v2 screenshots as design sources. The stale local Figma cache folders/files were removed to avoid mixing this file with older extracted data.

Regenerate any local screenshots or node JSON directly from the Figma source of truth above before doing a pixel pass. Do not reuse old _figma_extracted, _figma_screens, v2_*, or /tmp/figma-* outputs unless they were freshly generated from ZllZIMyuuJY8rRniXtk5lW.

Figma Frame Map​

Main frames mapped to routes:

  • 72:157 Home -> app/(tabs)/home.tsx
  • 104:735 My Voucher -> app/(tabs)/voucher.tsx
  • 242:1357 Rank / Membership -> app/(tabs)/rank.tsx
  • 180:1171 GPoint -> app/(tabs)/point.tsx
  • 213:766 User -> app/(tabs)/account.tsx
  • 349:1767 Dat lich form -> app/booking/location.tsx
  • 365:4354 Dat lich history -> app/schedule.tsx
  • 198:1005 Noti -> app/notifications.tsx
  • 242:946 Ma QR -> app/offers/qr.tsx
  • 958:7079 HCM branch landing -> app/services/index.tsx
  • 885:2498 Event detail -> app/offers/[id].tsx

Other useful Figma frames seen in the file:

  • 92:227 Voucher landing
  • 914:5146 Heal
  • 914:5190 Healthy & Beauty
  • 918:5837 Event
  • 227:1050 Edit information
  • 227:1297 Security
  • Several scan/PIN/login frames around 232:*, 956:*, 958:*, 976:*

Design Tokens Observed​

Dominant Figma values:

  • Width: mobile frames are 440px
  • Main content width: mostly 400px, centered, equivalent to 20px side margins
  • Backgrounds:
    • Cream: #FEF9F1
    • Home gray: #F6F6F6
    • Surface/card: #FFFEFC
    • Voucher gray: #F1F1F1
  • Gold: #EAA31F
  • Gold soft: #F7DBA8
  • Dark brown header: approximately #5A3600
  • Text:
    • Primary: #212121
    • Secondary: #555555
    • Tertiary: #828282
  • Success: #4CAE4F
  • Error/red: #F44034
  • Cyan/accent: #00C0E8
  • Radius:
    • Cards mostly 10px
    • Inputs/buttons often 3px
    • Some chips 5px
  • Spacing:
    • Common vertical gaps: 15px, 20px, 25px

Fonts from Figma metadata:

  • Mostly Inter weights 400 and 700
  • Sizes seen most often: 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 32
  • Some labels use Inria Serif:
    • MEMBER
    • GOLD
    • Account rank Member
  • A few tiny tab/system labels show SF Pro 11; app currently uses Inter for these unless native system text is used.

What Was Changed​

Tailwind/NativeWind setup:

  • Added nativewind, tailwindcss, prettier-plugin-tailwindcss, babel-preset-expo
  • Added @expo-google-fonts/inria-serif
  • Added:
    • tailwind.config.js
    • global.css
    • babel.config.js
    • metro.config.js
    • nativewind-env.d.ts
  • Updated app/_layout.tsx to import global.css and load:
    • Montserrat
    • Inter
    • Inria Serif
  • Updated app.json web bundler to metro
  • Updated tsconfig.json include for nativewind-env.d.ts
  • Added .env to .gitignore

Token files updated:

  • constants/Colors.ts
  • constants/Layout.ts
  • constants/Typography.ts

Main layout refactors completed:

  • app/(tabs)/home.tsx: rebuilt around Figma Home 72:157
  • app/(tabs)/voucher.tsx: rebuilt around My Voucher 104:735
  • app/(tabs)/rank.tsx: rebuilt around Membership 242:1357
  • app/(tabs)/point.tsx: rebuilt around GPoint 180:1171
  • app/(tabs)/account.tsx: rebuilt around User 213:766
  • app/(tabs)/_layout.tsx: tab bar adjusted to Figma-like Inter/gold/center point button
  • app/booking/location.tsx: rebuilt around booking form 349:1767
  • app/schedule.tsx: rebuilt around booking history 365:4354
  • app/notifications.tsx: rebuilt around Noti 198:1005
  • app/offers/qr.tsx: rebuilt around Ma QR 242:946
  • app/services/index.tsx: rebuilt around HCM branch landing 958:7079
  • app/offers/[id].tsx: rebuilt around Event detail 885:2498

Lint cleanup:

  • Fixed old react/no-unescaped-entities issues
  • Removed unused imports from several legacy files
  • Fixed splash hook dependency warning

Validation Already Run​

All passed:

npx tsc --noEmit
npm run lint
npx expo export --platform web

Notes:

  • npm run lint is clean with zero warnings after cleanup.
  • expo export --platform web exports successfully to dist.
  • npx expo start --web --port 8082 --host localhost hit system file watcher limit on this machine:
    • ENOSPC: System limit for number of file watchers reached
  • As a workaround, the static export can be served:
python3 -m http.server 8083 --directory dist

It was verified with:

curl -I http://localhost:8083

Remaining Tasks​

Pixel/design pass 2:

  • Open the exported app route-by-route and compare against Figma PNGs.
  • Adjust exact vertical offsets, shadows, image crops, and placeholder art.
  • Replace Unsplash placeholders and drawn QR/barcode placeholders with real Figma-exported assets if needed.

Routes still worth deeper Figma matching:

  • app/services/[id].tsx
  • app/booking/time.tsx
  • app/booking/info.tsx
  • app/booking/cart.tsx
  • app/offers/index.tsx
  • app/offers/redeem.tsx
  • app/profile/index.tsx
  • app/profile/invite.tsx
  • app/profile/privacy.tsx
  • app/profile/settings.tsx
  • auth/PIN/login flows if required by the product scope

Dependency note:

  • Expo CLI says these patch versions are expected for best SDK 54 compatibility:
    • expo@~54.0.34
    • expo-linking@~8.0.12
    • expo-web-browser@~15.0.11
  • They were not upgraded in this pass.

Security note:

  • The Figma token was placed in local .env at the user's request and .env is ignored. Do not commit or paste the token.
  • The token was exposed in chat during the session, so it should be rotated after the work is done.