Tactile Interfaces - Created with Figma
Sherif Alabi
Like this project
Posted Mar 22, 2025
This case study showcases three micro-interaction UI concepts created to explore realism, spacing, and tactile visual design using only Figma.
Likes
3
Views
27
This case study showcases three micro-interaction UI concepts created to explore realism, spacing, and tactile visual design using only Figma.
Each concept a custom keyboard, a number pad, and a thermostat interface was crafted to study depth, material contrast, and digital balance without relying on 3D tools or code. These visual experiments are driven by curiosity and the desire to stretch what’s possible in Figma as a product design tool.
The goal wasn’t just to make things look good, it was to make them feel good visually: dimensional, interactive, and believable.
Section 1: Custom Keyboard UI
Objective:
Create a realistic and aesthetically balanced keyboard interface that mimics physical interaction and spacing hierarchy.
Inspiration:
Inspired by custom mechanical keyboards, macro boards, and minimal top-down tech renders. References were gathered via Pinterest and Apple-style UI documentation.
Design Decisions:
Soft shadows to separate key rows
Rounded corners for friendly touchpoints
Modifier keys styled with contrast (e.g., CMD, CTRL, ESC)
A vibrant color key added to introduce visual rhythm
Outcome:
The final keyboard design achieves a strong balance between physical realism and digital clarity. It presents an interface that feels usable, tactile, and visually rich without relying on real-world textures or 3D render tools.
“Designing the keyboard helped me focus on subtlety where every shadow, gap, and angle either adds clarity or distracts.”
Section 2: Custom Number Pad UI
Objective:
Design a simplified, compact number pad interface for use in financial dashboards or productivity tools.
Inspiration:
Minimal number pad accessories and retro-futuristic calculators. Design direction leaned toward clean symmetry and high-contrast key groups.
Design Decisions:
Functional grouping: numbers, action keys, delete
Softer spacing than keyboard to emphasize compactness
Emphasis on top-down lighting and controlled gradients
Outcome:
The number pad feels tactile and intentional visually smaller but punchy. It explores visual harmony in tight UI areas and could work perfectly inside a SaaS app or hardware overlay.
“This piece helped me think in components organizing layout by interaction importance rather than visual flair.”
Section 3: Thermostat Interface UI
Objective:
Explore interface possibilities for smart home technology merging circular visual layouts with clean toggles and controls.
Inspiration:
Nest-like UI systems, ambient computing interfaces, and minimal smart home dashboards.
Design Decisions:
Centralized temperature readout with circular motion path
Two side toggles (Power, Mode) for interaction clarity
Accent glow for active states, dimmed state for inactive
Outcome:
This concept blends analog cues (like dials) with modern digital systems keeping everything minimalist yet informative. It was the most challenging in terms of balance between aesthetics and usability.
“The thermostat concept pushed me to design something ambient but functional a screen that looks alive but not loud.”
Closing Thoughts
These small experiments helped me grow as a product designer by:
Practicing spatial hierarchy and UI realism
Exploring non-traditional interface shapes (circular vs grid)
Using only Figma to simulate physical feel, without real shadows or 3D renders
Together, these pieces are more than just visuals they’re visual thought experiments.
Tools Used
Figma: Design, spacing, depth, shadowing
Pinterest: Visual inspiration & color moodboards
ChatGPT: UX thinking & writing
Notion: Planning & version tracking
Mechanical-Keyboard Interface
Custom-Number Pad interface
Thermostat UI