Mobile UI/UX Redesign, Figma Design System (RTL/LTR) & Flutter Clean Architecture
Budget / Salary$20–200
TypeFreelance project
LocationRemote
Posted1 hour ago
** Project Description:
We are updating and expanding our mobile LMS platform. We require an expert UI/UX Designer and Flutter Developer to modernize our interface structure, build a comprehensive Design System, and deliver production-ready Flutter UI code based on our reference mobile app build (.apk).
The goal is to achieve total visual consistency, clean component hierarchy, and responsive layouts across all application views (including home sliders, interactive sliding side-navigation drawers, and user flows).
** Languages & Directional Support:
LTR & RTL Adaptation: Full, seamless UI adaptation for both LTR (Left-to-Right) and RTL (Right-to-Left) layouts across both the Figma files and Flutter source code.
** Key Deliverables & Output Requirements:
1. Complete Figma UI Kit & Design System (.fig):
- Dedicated pages for LTR and RTL screen variants.
- Built strictly using Figma Auto-Layout, Master Components, Variants, Color Tokens, and Typography Styles for 1-click global style updates and instant asset exports.
2. Organized Asset Package:
- Structured directory containing all scalable vector graphics (SVG), standard image assets (PNG/WEBP), and required typography files.
3. Clean, Production-Ready Flutter UI Code:
- Modular, responsive front-end Flutter UI code for all core views (Home, Side Drawer, Course Details, Profile, Settings, etc.).
- Structured design architecture including theme configurations (theme.dart, colors.dart, typography.dart). No backend business logic required.
4. AI-Driven Expansion Guide (README_AI.md):
- A structured documentation guide outlining how to feed this Design System and Flutter codebase into AI tools (e.g., Claude, Cursor AI, or recommended IDE assistants).
- Clear prompting guidelines to ensure any newly added screens created via AI automatically conform to our established UI system, colors, and spatial grid.
** Quality Standards & Milestone Release Terms:
Visual Consistency: The delivered interface, component alignment, spacing, and side drawer navigation behavior must closely align with the provided reference build.
AI Workflow Validation: Prior to final milestone release, we will run a quick verification test following your README_AI.md guide. We will prompt an AI tool to build a new custom layout using your delivered codebase to confirm the design system integrates predictably.
Additional Notes:
The reference app file (.apk) will be shared immediately upon contract agreement.
Looking forward to working with an efficient, detail-oriented specialist.
We are updating and expanding our mobile LMS platform. We require an expert UI/UX Designer and Flutter Developer to modernize our interface structure, build a comprehensive Design System, and deliver production-ready Flutter UI code based on our reference mobile app build (.apk).
The goal is to achieve total visual consistency, clean component hierarchy, and responsive layouts across all application views (including home sliders, interactive sliding side-navigation drawers, and user flows).
** Languages & Directional Support:
LTR & RTL Adaptation: Full, seamless UI adaptation for both LTR (Left-to-Right) and RTL (Right-to-Left) layouts across both the Figma files and Flutter source code.
** Key Deliverables & Output Requirements:
1. Complete Figma UI Kit & Design System (.fig):
- Dedicated pages for LTR and RTL screen variants.
- Built strictly using Figma Auto-Layout, Master Components, Variants, Color Tokens, and Typography Styles for 1-click global style updates and instant asset exports.
2. Organized Asset Package:
- Structured directory containing all scalable vector graphics (SVG), standard image assets (PNG/WEBP), and required typography files.
3. Clean, Production-Ready Flutter UI Code:
- Modular, responsive front-end Flutter UI code for all core views (Home, Side Drawer, Course Details, Profile, Settings, etc.).
- Structured design architecture including theme configurations (theme.dart, colors.dart, typography.dart). No backend business logic required.
4. AI-Driven Expansion Guide (README_AI.md):
- A structured documentation guide outlining how to feed this Design System and Flutter codebase into AI tools (e.g., Claude, Cursor AI, or recommended IDE assistants).
- Clear prompting guidelines to ensure any newly added screens created via AI automatically conform to our established UI system, colors, and spatial grid.
** Quality Standards & Milestone Release Terms:
Visual Consistency: The delivered interface, component alignment, spacing, and side drawer navigation behavior must closely align with the provided reference build.
AI Workflow Validation: Prior to final milestone release, we will run a quick verification test following your README_AI.md guide. We will prompt an AI tool to build a new custom layout using your delivered codebase to confirm the design system integrates predictably.
Additional Notes:
The reference app file (.apk) will be shared immediately upon contract agreement.
Looking forward to working with an efficient, detail-oriented specialist.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.