Get 50% off during Black Friday!

Design+Code logo

Quick links

No results found

Suggested search

illustration

Bike Shopping App Part 1 - Discover Screen

icon

Add to favorites

Learn how to design a bike shopping app design with neumorphism style and matte effect

icon

UI Design Quick Apps in Figma

1

Getting Started with UI Design

22:33

2

Food App UI Design

10:43

3

Meditation App Glassmorphism UI Design

15:18

4

Bitcoin App Glassmorphism UI Design

46:06

5

Dark UI Design

13:30

6

Glassmorphism, Components and Design System

19:45

7

Soft UI Design

16:35

8

Dark Mode NFT app Part 1 - Card with blurred background

9:45

9

Dark Mode NFT app Part 2 - Cards with outline

8:13

10

Dark Mode NFT app Part 3 - TabBar

7:43

11

Dark Mode NFT app Part 4 - Segmented Control

11:59

12

Dark Mode NFT app Part 5 - List

7:56

13

Neon UI Design Part 1 - Screen 1

11:53

14

Neon UI Design Part 2 - Screen 2

16:42

15

Neon UI Design Part 3 - Screen 3

19:24

16

Dark Neumorphism Tesla app Part 1 - Neumorphic Button

8:41

17

Dark Neumorphism Tesla app Part 2 - Nav bar

9:22

18

Dark Neumorphism Tesla app Part 3 - Control Menu & Table view

12:36

19

Dark Neumorphism Tesla app Part 4 - Tab bar

8:33

20

Dark Neumorphism Tesla app Part 5 - Temperature Progress bar

8:49

21

Dark Neumorphism Tesla app Part 6 - Temperature Slider

8:42

22

Dark Neumorphism Tesla app Part 7 - Control setting with background blur

6:37

23

Dark Neumorphism Tesla app Part 8 - Battery with neon light effect

11:13

24

Dark Neumorphism Tesla app Part 9 - Dropdown table row

11:21

25

Social Media App Part 1 - Profile Screen

13:26

26

Social Media App Part 2 - Home Screen

17:09

27

Social Media App Part 3 - Chat Screen

11:38

28

Weather App Part 1 - Bottom sheets

16:52

29

Weather App Part 2 - TabBar

11:49

30

Weather App Part 3 - Weather Widget

8:59

31

Map app Part 1 - Custom Nav Bar with 3D Effect

12:06

32

Map app Part 2 - Map and Navigation Detail

9:27

33

Map app Part 3 - Mileage Chart

9:22

34

Map app Part 4 - Map List and Tab Bar

15:41

35

Movie Ticket Booking App Part 1 - Reservation Screen

16:38

36

Movie Ticket Booking App Part 2 - Seats Screen

20:38

37

Movie Ticket Booking App Part 3 - Tickets Screen

20:01

38

Wallet App Part 1 - Transactions Screen

21:36

39

Wallet App Part 2 - Cards Screen

17:12

40

Wallet App Part 3 - Statistics Screen

14:09

41

Bike Shopping App Part 1 - Discover Screen

13:27

42

Bike Shopping App Part 2 - Detail Screen

8:14

43

Bike Shopping App Part 3 - Cart Screen

9:41

44

Cab Booking App Part 1 - Chosen Ride Screen

18:33

45

Cab Booking App Part 2 - Destination Screen

14:36

46

Cab Booking App Part 3 - Driver Screen

8:29

47

Flight Booking App Part 1 - Homepage

16:28

48

Flight Booking App Part 2 - Book Your Flight

11:57

49

Flight Booking App Part 3 - Select Your Flight

10:29

50

Flight Booking App Part 4 - Boarding Pass

13:06

In this series, we will design this beautiful online bike shopping app from scratch in Figma. We’re going to use the neumorphism style with a matte effect, adding a pop of color with a gradient.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

1

Getting Started with UI Design

Design your first iOS app using the best practices in UI design

22:33

2

Food App UI Design

Learn how to design simple screens for a food app in the Figma design tool

10:43

3

Meditation App Glassmorphism UI Design

Learn how to design onboarding screens for your first app

15:18

4

Bitcoin App Glassmorphism UI Design

Create a user interface of a crypto app from scratch by combining Neomorphism and Glassmorphism

46:06

5

Dark UI Design

Learn how to design dark UI design in the Figma design tool

13:30

6

Glassmorphism, Components and Design System

Meditation app part 2 with Explore Screen and design system

19:45

7

Soft UI Design

Learn how to create a beautiful user interface from scratch using soft drop shadows, inner shadows and vibrant colors

16:35

8

Dark Mode NFT app Part 1 - Card with blurred background

Learn to design an NFT marketplace app by combining overlays with the Glassmorphism style

9:45

9

Dark Mode NFT app Part 2 - Cards with outline

Learn to create a card with a blurred background using an overlay outline

8:13

10

Dark Mode NFT app Part 3 - TabBar

Learn how to create a custom tab bar using overlay glassmorphism

7:43

11

Dark Mode NFT app Part 4 - Segmented Control

Learn how to create segmented controls and buttons with glassmorphism style

11:59

12

Dark Mode NFT app Part 5 - List

Learn how to design a list with rows

7:56

13

Neon UI Design Part 1 - Screen 1

Learn how to create a lighting and glowing user interface from scratch using neon style

11:53

14

Neon UI Design Part 2 - Screen 2

Learn how to create a lighting and glowing user interface from scratch using neon style

16:42

15

Neon UI Design Part 3 - Screen 3

Learn how to create a lighting and glowing user interface from scratch using neon style

19:24

16

Dark Neumorphism Tesla app Part 1 - Neumorphic Button

Learn to design a Dark Neumorphism button effect

8:41

17

Dark Neumorphism Tesla app Part 2 - Nav bar

Learn to create navigation bar and use remove background trick to get png image

9:22

18

Dark Neumorphism Tesla app Part 3 - Control Menu & Table view

Learn how to create Control menu and table view using auto-layout frame

12:36

19

Dark Neumorphism Tesla app Part 4 - Tab bar

Learn how to create a custom tab bar with the curve and neon light effect

8:33

20

Dark Neumorphism Tesla app Part 5 - Temperature Progress bar

Learn how to create temperature progress bar using ellipse tool and arc tool.

8:49

21

Dark Neumorphism Tesla app Part 6 - Temperature Slider

Learn how to create temperature bar

8:42

22

Dark Neumorphism Tesla app Part 7 - Control setting with background blur

Learn how to create the control setting with background blur

6:37

23

Dark Neumorphism Tesla app Part 8 - Battery with neon light effect

Learn how to create battery control with neon light effect

11:13

24

Dark Neumorphism Tesla app Part 9 - Dropdown table row

Learn how to create a drop down table row

11:21

25

Social Media App Part 1 - Profile Screen

Learn how to create a social media app design, we will start the profile screen

13:26

26

Social Media App Part 2 - Home Screen

Learn how to create a social media app design by desigining the home screen

17:09

27

Social Media App Part 3 - Chat Screen

Learn how to create a social media app design by designing the chat screen

11:38

28

Weather App Part 1 - Bottom sheets

Learn how to create a modal bottom sheets with glassmorphism

16:52

29

Weather App Part 2 - TabBar

Learn how to create a custom tab bar

11:49

30

Weather App Part 3 - Weather Widget

Learn how to create a weather widget

8:59

31

Map app Part 1 - Custom Nav Bar with 3D Effect

Learn how to create 3d triangle buttons with custom shape,background with blur and navigation description

12:06

32

Map app Part 2 - Map and Navigation Detail

Learn how to create the navigation system

9:27

33

Map app Part 3 - Mileage Chart

Learn how to create a mileage chart status

9:22

34

Map app Part 4 - Map List and Tab Bar

Learn how to create a map list and custom tab bar with neon light effect

15:41

35

Movie Ticket Booking App Part 1 - Reservation Screen

Learn how to design a movie ticket booking app by starting with the reservation screen

16:38

36

Movie Ticket Booking App Part 2 - Seats Screen

Learn how to design our seats screen for our movie ticket booking app

20:38

37

Movie Ticket Booking App Part 3 - Tickets Screen

Learn how to design our tickets screen for our movie ticket booking app

20:01

38

Wallet App Part 1 - Transactions Screen

Learn how to design a wallet app by starting with the transactions screen

21:36

39

Wallet App Part 2 - Cards Screen

Learn how to design a wallet app by designing a cards screen

17:12

40

Wallet App Part 3 - Statistics Screen

Learn how to design a wallet app by designing a statistics screen

14:09

41

Bike Shopping App Part 1 - Discover Screen

Learn how to design a bike shopping app design with neumorphism style and matte effect

13:27

42

Bike Shopping App Part 2 - Detail Screen

Design the detail screen for our bike shopping app

8:14

43

Bike Shopping App Part 3 - Cart Screen

Design the cart screen for our bike shopping app

9:41

44

Cab Booking App Part 1 - Chosen Ride Screen

Learn how to design a cab booking app using the neumorphism style

18:33

45

Cab Booking App Part 2 - Destination Screen

Design a destination screen for our cab booking app

14:36

46

Cab Booking App Part 3 - Driver Screen

Design a driver screen for our cab booking app

8:29

47

Flight Booking App Part 1 - Homepage

Learn how to design the homepage for a flight booking app

16:28

48

Flight Booking App Part 2 - Book Your Flight

Learn how to design a booking section for a flight booking app

11:57

49

Flight Booking App Part 3 - Select Your Flight

Learn how to design the selecting flight section for a flight booking app

10:29

50

Flight Booking App Part 4 - Boarding Pass

Learn how to design a boarding pass for a flight booking app

13:06

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Sourasith Phomhome

UI Designer

Designer at Design+Code

icon

17 courses - 61 hours

course logo

Design and Code User Interfaces with Galileo and Claude AI

In this course, you’ll learn how to use AI tools to make UI/UX design faster and more efficient. We’ll start with Galileo AI to create basic designs, providing a solid foundation for your ideas. Next, we’ll refine these designs in Figma to match your personal style, and finally, we’ll use Claude AI to turn them into working code—eliminating the need for traditional prototyping.

2 hrs

course logo

Build a React Native app with Claude AI

This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.

7 hrs

course logo

Design and Prototype for iOS 18

Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.

3 hrs

course logo

Master Responsive Layouts in Figma

Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.

2 hrs

course logo

UI UX Design with Mobbin and Figma

Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.

2 hrs

course logo

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

course logo

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

course logo

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

course logo

iOS Design with Midjourney and Figma

Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications

1 hrs

course logo

UI Design for iOS, Android and Web in Sketch

Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app

1 hrs

course logo

UI Design a Camera App in Figma

Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.

1 hrs

course logo

UI Design for iOS 16 in Sketch

A complete guide to designing for iOS 16 with videos, examples and design files

3 hrs

course logo

Prototyping in Figma

Learn the basics of prototyping in Figma by creating interactive flows from custom designs

1 hrs

course logo

UI Design Quick Websites in Figma

Learn how to design a portfolio web UI from scratch in Figma

1 hrs

course logo

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

course logo

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs