The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Perspective
đź“– Overview
Every designer naturally reviews user interfaces through a single, biased lens: their own. Accessibility is routinely treated as a final checklist rather than an integrated part of the design process. Designers typically lack quick, intuitive ways to understand how their UI behaves under real-world constraints, making testing fragmented, manual, and easy to deprioritize.
Perspective transforms compliance evaluation into an active, empathetic simulation. By letting creators drop any UI screen straight into the web app, the platform maps real-world constraints directly onto their canvas—pairing instant visual perspective shifting with actionable AI critique.
🛠️ Core Features & Capabilities
1. Interactive Accessibility Lenses
Instantly morph any uploaded PNG, JPG, or WEBP layout frame across six distinct viewing modes to expose structural, visual, and interactive breaking points:
- Default View: No filter. The baseline control view showing the original design as-is for immediate before-and-after comparison.
- Low Vision Blur: A single, impactful view utilizing adaptive CSS blur, contrast, and brightness adjustments to test typographic scale and global visual hierarchy.
- Color Blindness Simulation: A dedicated sub-selector pill that reveals specific target spectrums—including Deuteranopia, Protanopia, Tritanopia, and Achromatopsia—to ensure critical data states do not rely solely on color cues.
- Reading Difficulties Mode: Simulates visual reading challenges through letter crowding, visual noise, and poor text spacing overlays to test container boundaries and layout density.
- Motor Impairment Filter: A touch-target zone overlay that highlights areas likely falling below the recommended 44x44px target sizes to audit interactive success zones.
- Screen Reader Mapping: Visualizes an estimated reading-order overlay based entirely on the visual layout structure to help review semantic non-visual hierarchies.
2. Contextual AI Critique
Powered by a direct integration with Figma Make, Perspective passes your screen's layout structure straight to the Gemini vision API using a structured accessibility prompt. Instead of giving you generic compliance checklists, it analyzes the visual hierarchy and outputs surgical, element-specific UX recommendations tied explicitly to your components.
3. Interactive Practice Mode
A gamified suite of onboarding and diagnostic challenges containing deliberate usability flaws. This module serves as an educational training ground for product designers to align their standards and train their eyes to spot breaking points instantly across multiple interactive scenarios. Users toggle through the 6 accessibility lenses, identify flaws via an interactive checklist, and receive targeted AI mentor feedback alongside before-and-after comparisons.
🏗️ Technical Implementation & Journey
Timeline: Designed, iterated, and shipped from scratch in 4 days.
The Stack: Built entirely leveraging the Figma Make ecosystem to construct the web application UI, drive the perspective viewer, execute browser-side CSS filter logic, and handle the AI critique API integration.
Frictionless UI Evaluation: Engineered the system to execute all perspective simulations natively via browser-side CSS filters and overlay layers. This completely bypasses server processing, allowing designers to get instant evaluation loops in a single, uninterrupted step.
đź”— Submission Links
Live Application: https://perspective.figma.site
Figma Community File: https://www.figma.com/community/file/1649625335339682627
X Launch Post: https://x.com/designingpixels/status/2067801131447939411
Demo Video Walkthrough: Attached To The Post
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built Nexora AI for the Config Makeathon.
It’s an AI fintech landing page concept designed around one idea:
What if your money could think before it moves?
Nexora AI is a futuristic financial command center that helps users understand cashflow, detect risk, forecast spending, and make smarter financial decisions through AI.
For the visual direction, I wanted it to feel less like a normal SaaS dashboard and more like a premium finance cockpit. Dark cinematic UI, glowing dashboard cards, AI insight panels, predictive analytics, and a full landing page experience built with Figma Make.
This project was a fun challenge because I focused on creating something that feels strategic, interactive, and visually sharp while still being useful as a real fintech product concept.
Live demo: https://karate-stung-91133916.figma.site/
Working Figma Make file: https://www.figma.com/make/fk8AU6jHScqpxHwFMQHDwF/Nexora-AI?t=6KOjQ1tW6ZFsV7Og-1
Would love to hear your thoughts on the design and experience.
I was just scrolling and this honestly made me stop for a moment. The dark fintech look, the glowing dashboard details, and the whole AI command center feeling are so clean. This feels really premium and well thought out.
I built Echo Cord for my mother.
After being diagnosed with early-onset dementia, everyday routines became harder to navigate. Medications. Appointments. Even simple daily tasks.
But one thing never changed.
She still wanted to maintain her independence.
Echo Cord is a caregiving companion designed to help families communicate routines, medications, appointments, and daily tasks through simple visual Echoes. Each Echo is delivered as a single focused task, reducing complexity while providing reassurance for both loved ones and caregivers.
Built for the Config Makeathon, Echo Cord was designed and prototyped in Figma using Figma Make and Figma Design Agent. The workflow focused on exploring caregiver and patient experiences, refining accessibility-first interactions, and designing for clarity, simplicity, and confidence.
While inspired by dementia care, Echo Cord was designed with broader applications in mind, including memory support, cognitive recovery, traumatic brain injury recovery, and other caregiving scenarios where clear communication matters.
Back Story:
Echo Cord is deeply personal to me and, at times, difficult.
Throughout the design process, I found myself thinking about my mother constantly. Every screen, interaction, and word was shaped by a simple question:
"Would this make things easier for Mom?"
What began as a design challenge quickly became something much more meaningful. This project is my way of turning a deeply personal experience into something that might help other families facing similar challenges.
#ConfigMakeathon #FigmaMake #FigmaDesignAgent #Accessibility #Caregiving #HealthcareUX #ProductDesign #UXDesign
Love the visual direction here. The attention to detail really stands out.
For the Config Makeathon, I've built Interdimensional Snake, an experimental game that blends beautiful mathematics with design.
I built it to expose more people to mathematical ideas, and to show they can be experienced visually in a way that's genuinely fun.
It's a reimagining of the classic game Snake, but in 3D, with two modes:
Escher - crawl across all six faces of a cube, slipping through wormholes as gravity reorients around you.
Metamorph - survive on dynamically morphing topologies (sphere, torus, Klein bottle, Möbius band, etc), it's tougher, but the more visually striking of the two.
The game has one technical core wearing 5 different design identities that can be swapped at runtime using cool transition effects of your liking (just press "T" on your keyboard). Check it out!
Built using Figma, Figma Make and Figma MCP.
Try it here: https://appeal-sepia-75259552.figma.site
Community Link: https://www.figma.com/community/file/1648067291389831150
Social Post: https://x.com/Devon07979992/status/2066232223976554842
Holy smokes, I'm sold! 🙌
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?