Leveling Up: Mastering Figma Skills
(Page Under Construction)
To enhance my Figma skills, I completed an Advanced Figma UX/UI Design course on Udemy.
This case study showcases the tools and techniques I explored while creating an indie music-themed app, highlighting both skill advancement and the joy of the creative process.
Role: Product Designer
Personal project
The Task:
Design an Indie music app featuring a bee logo
Color Palette: Setting the Mood for Indie Music
The Task: Design an Indie music app featuring a bee logo.
I began by crafting a mood board inspired by Indie music visuals. Using ChatGPT, I gathered suggestions for fonts and color palettes.
After experimenting with several options, I chose a cool, moody color scheme with a hint of yellow to complement the bee logo.
Root Colors
Palette
Creating The Logo
To capture the quirky indie music vibe, I drew inspiration from indie album covers and art, using Figma's pen tool to design a bee logo that reflects this creative spirit.
Main Logo
Outline Logo
Personalizing Icons: Tailoring the UI to Capture the Indie Vibe
To match the unique vibe of the app's logo and overall aesthetics, I redrew the standard icons for the main navigation in Figma. This customization helped create a cohesive look that aligned with the indie theme of the design.
Indiebee’s icons
Standard icons
Design Tokens: Light & Dark Mode
Design tokens are game-changers for creating consistent and adaptable themes within a design system. I especially enjoyed experimenting with color tokens, which made it easy to switch between dark and light modes while keeping the design cohesive and the Figma file organized - see the video below. How cool is that?
Responsive Components: Adapting to Different Screens
To ensure the design components were adaptable and responsive, I tailored them to seamlessly adjust across various screen sizes and view properties. This approach guarantees a consistent user experience whether on wider screens or smaller devices while using a single master component.
Seamless adaptation across multiple device sizes
Ensuring design consistency by setting minimum size constraints for responsive components
Microinteractions
I had a great time learning and experimenting with microinteractions in Figma during the course. Below are some examples of the microinteractions I explored.
Dip navigation
Logo hover effect
Event card animation
Animations: the Welcome Screen Page
started off creating a gradient, then adding some graphics, ended up with a more polished and vintage look for the look and feel of my app.