Figma UI/UX Design for Extension Popup
Budget: $10 – $30 USD
Project Description:
I'm looking for a talented UI/UX designer to create a modern and intuitive design for two key pages within my browser extension pop
up:
Translation Page: Where users input text and see recent translations.
Vocabulary Page: Where users view and manage their saved words.
The goal is to improve the user experience and visual appeal based on the current functionality (screenshots will be provided).
The final deliverable will be a Figma design file, which will serve as the specification for future development (using Preact/TypeScript).
Requirements:
Tool: Must use Figma for all design work and deliverables.
Design: Create a modern, clean, user-friendly UI adhering to best practices. Dark Mode variations are essential.
Responsiveness: Design specifically for typical browser extension popup dimensions (500px width max). Layouts should be efficient for this constrained space.
Consistency: The new design must align visually with provided style guidelines/examples from other parts of the extension (e.g., the translation tooltip).
Component-Based: Design should utilize Figma components for reusability.
Scope of Work:
Discovery & Review:
Understand the core purpose and user flow of the Translation and Vocabulary pages based on provided screenshots and descriptions of functionality.
Design Concepts:
Develop and present 3 distinct UI design concepts in Figma for both the Translation and Vocabulary pages.
Each concept must include both Light Mode and Dark Mode.
Show key states (e.g., default view, word selected state on vocabulary page, loading state if applicable).
Final Design & Prototyping:
Based on feedback, refine and finalize the approved design concept in Figma.
Build out necessary screens and define reusable components (buttons, inputs, list items, tags, etc.).
Create a simple interactive prototype in Figma demonstrating key user flows (e.g., navigating tabs, searching/sorting vocabulary, selecting a word).
Expected Deliverables:
Editable Figma File(s) containing:
High-fidelity, polished designs for the Translation and Vocabulary pages.
I'm looking for a talented UI/UX designer to create a modern and intuitive design for two key pages within my browser extension pop
up:
Translation Page: Where users input text and see recent translations.
Vocabulary Page: Where users view and manage their saved words.
The goal is to improve the user experience and visual appeal based on the current functionality (screenshots will be provided).
The final deliverable will be a Figma design file, which will serve as the specification for future development (using Preact/TypeScript).
Requirements:
Tool: Must use Figma for all design work and deliverables.
Design: Create a modern, clean, user-friendly UI adhering to best practices. Dark Mode variations are essential.
Responsiveness: Design specifically for typical browser extension popup dimensions (500px width max). Layouts should be efficient for this constrained space.
Consistency: The new design must align visually with provided style guidelines/examples from other parts of the extension (e.g., the translation tooltip).
Component-Based: Design should utilize Figma components for reusability.
Scope of Work:
Discovery & Review:
Understand the core purpose and user flow of the Translation and Vocabulary pages based on provided screenshots and descriptions of functionality.
Design Concepts:
Develop and present 3 distinct UI design concepts in Figma for both the Translation and Vocabulary pages.
Each concept must include both Light Mode and Dark Mode.
Show key states (e.g., default view, word selected state on vocabulary page, loading state if applicable).
Final Design & Prototyping:
Based on feedback, refine and finalize the approved design concept in Figma.
Build out necessary screens and define reusable components (buttons, inputs, list items, tags, etc.).
Create a simple interactive prototype in Figma demonstrating key user flows (e.g., navigating tabs, searching/sorting vocabulary, selecting a word).
Expected Deliverables:
Editable Figma File(s) containing:
High-fidelity, polished designs for the Translation and Vocabulary pages.