Mobile
Design
Recreation
A mobile-first financial interface designed in Figma using reusable components, variables, and responsive behaviors.
Project Overview: Modern Design
This mobile interface was inspired by a layout I discovered on Pinterest. I recreated it in Figma to sharpen my skills in Auto Layout, components, variables, and design systems - especially for mobile-first experiences. The goal was to build a clean, scrollable financial app interface that supports light and dark themes, while practicing scalable component logic and token-driven styling. I focused on structuring reusable UI blocks, simulating real-world responsiveness, and refining visual hierarchy across modes.
Design Highlights
1
Tools Used
Used Auto Layout, Variants, and Variables on Figma to build a modular, theme-adaptable mobile system
Applied component properties and constraints to simulate responsiveness and reduce duplication across screens.
2
Design System
Defined color, text, and state tokens to support light/dark theming and consistent styling.
Built a type scale and spacing system that maintained clarity and rhythm across all sections.
3
Component Library
Created reusable components for top bar, greeting block, action cards, favorites list, and bottom navigation.
Organized components on a “Local Components” canvas with semantic naming and variant toggles for theme and layout.
4
Visual Design
Balanced a clean, card-based layout with expressive icons and typography for clarity and friendliness.
Designed for mobile ergonomics, ensuring tab targets, spacing, and visual hierarchy were optimized fro small screens.
Light/Dark Modes
To implement light and dark mode, I used Figma’s variables panel to define to tokenized color system. I created separate variable collections fo light and dark themes, assigning values for surface backgrounds, text styles, accents, and interaction states. Each component in the design referenced these tokens rather than fixed colors, which allowed me to switch themes instantly by toggling the active variable mode. This setup made the entire interface - including cards, icons, and typography - update automatically across modes without duplicating components. It was a fast and scalable way to ensure visual consistency, accessibility, and brand fidelity in both light and dark environments.
Auto Layout & Responsiveness
I used Auto Layout to ensure the mobile design adapted naturally across screen sizes and content variations. Each section - from greeting to bottom nav - was built with vertical stacks and consistent spacing. Action cards and favorite contacts wrapped cleanly, and the bottom menu remained anchored regardless of content height. This setup allowed me to simulate scrollable behavior and test layout integrity without manual overrides.
Design Systems & Lessons Learned
Theming with Design Tokens
I implemented a tokenized system to support light and dark modes using Figma’s variables panel.
Color Tokens: Surface/light, surface/dark, text/primary, text/secondary, accent/green, accent/gray.
State Tokens: Hover/fill, focus/border, disabled/opacity.
Text Styles: Linked to theme variables so typography adjusted automatically across modes.
Icons: Configured to inherit currentColor or swap via them-specific variants for legibility.
By toggling between light and dark mode in Figma’s variable settings, the entire interface updated instantly - including background, text, icons, and cards - without needing duplicate components.
Process & Learnings
This project helped me refine my mobile-first design thinking and deepens my understanding of scalable systems.
Component-first Workflow: Built atomic elements before assembling full screens, ensuring reusability.
Variant Logic: Designed theme and layout variants to test flexibility across use cases.
Token Discipline: Used variables to drive all color and state logic, making updates fast and consistent.
Light/Dark Parity: Verified contrast and readability across both modes, ensuring accessibility and brand fidelity.