Designing Music Application in Figma

Name: Designing Music Application in Figma
Rating: 4.0 (55 reviews)

Design music player application for your portfolio : BOMBMUSIK

Created byIshank Popli

Last updated 7/2022

English

English [Auto],

What you'll learn

UX/UI
Project building
User Experience
Figma

Course content

1 section • 10 lectures • 1h 57m total length

What we are going to do?0:42
Design a music application in Figma with horizontal scrolling on sides, where clicking sections plays music and enables resume, pause, and dropdowns on the home screen for a portfolio project.
Introduction0:44
Design and prototype a music application from scratch in Figma by building wireframes, mapping screens and button placement, and exploring how the interface handles structure and overflow.
Wireframing8:42
Build a home screen wireframe for a music app in figma, detailing music, podcasts, recommendations, and recently played sections, with region-based variations and iterative design.
Wireframing 23:33
Design and prototype a music app wireframe in Figma, transforming the home page into a music player screen with artist imagery, playback controls, lyrics, and share options.
Starting with Lo-Fi Prototype24:56
Design a lo-fi prototype for a music application in Figma, starting from the front page and wireframe, using layers to keep the background unaffected while iterating.
Home page Lo-Fi Prototype18:52
Design a lo-fi home page prototype in Figma for a music app, add a search button, organize sections like most played and songs for you, and refine banners and imagery.
Music Screen Lo-Fi24:10
Design the music screen in Figma by building the playback page from the home wireframe, configuring the navigation bars, playback controls, icons, and dropdowns, and prototyping interactions.
Hi-Fi Prototyping19:00
Design a hi-fi prototyping flow for a music application in Figma by building home and music player frames, refining typography, animations, and imagery to create an interactive, polished interface.
Horizontal Scrolling4:17
Learn to implement horizontal scrolling in a music app UI by configuring a frame and enabling overflow scrolling in the prototype for a music bar.
Component animation12:48
Create a pause button animation in figma by converting the base into a component with variants and prototyping connections. Refine stroke, alignment, and visuals for a music player interface.

Requirements

Basics of Figma

Description

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma mobile app for Android and iOS allow viewing and interacting with Figma prototypes in real-time mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.

Dylan Field and Evan Wallace began working on Figma in 2012 while studying computer science at Brown University. Wallace studied graphics and was a Teacher Assistant for the Computer Science Department while Field chaired the CS Departmental Undergraduate Group.[2][3]

The original objective behind Figma was to enable "anyone [to] be creative by creating free, simple, creative tools in a browser." Field and Wallace experimented with different ideas, including software for drones and a meme generator before settling on web-based graphics editor software. The company's early scope was described in a 2012 article by The Brown Daily Herald vaguely as "a technology startup that will allow users to creatively express themselves online." That article reported that the company's first ideas revolved around 3D content generation, and subsequent ideas focused on photo editing and object segmentation.[3]

Field was named a Thiel Fellow in 2012, earning him $100,000 in exchange for taking a leave of absence from college; Wallace, joined Field in California after completing his degree in computer science and the two began working on the company full time.[4]

Figma started offering a free invite-only preview program on December 3, 2015.[5] It saw its first public release on September 27, 2016.[6]

On October 22, 2019, Figma launched Figma Community,[7] allowing designers to publish their work for others to view and adapt.

On April 21, 2021, Figma launched a digital whiteboarding capability called FigJam, allowing users to collaborate with sticky notes, emojis and drawing tools.[8]

In June 2022, Google for Education announced that it would be partnering with Figma to bring its design and prototyping platform, as well as FigJam, to education Chromebooks.[9]

Who this course is for:

Portfolio enhancers