Design+Code logo

Quick links

No results found

Suggested search

Dive into the world of SwiftUI and create a stunning image gallery app! This tutorial guides you through building an interactive gallery with smooth transitions and eye-catching animations. You'll master gesture controls, implement a dynamic thumbnail scroll, and bring your UI to life with color-shifting effects. Perfect for iOS developers looking to elevate their SwiftUI skills and create captivating user experiences.

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

Introduction to Prototyping

Build a completely functional prototype without writing a single line of code from your phone

7:07

2

Create the Prototype UI

UI Design: DesignCode UI Kit / Apple’s UI Kit / Title / Card Design / Color Palette / Circle / Arc

16:39

3

Card Intro Animation

Animate the Cards / Swipe / Circle / Drag Gesture

21:16

4

Swipe Gesture

Create swipe gesture prototypes by learning how to use drag gestures, triggers like After Delay, and Smart Animate for smooth transitions

6:09

5

Rotate Animation

Learn how to create a carousel animation using rotation and drag triggers

6:30

6

New Screen Overlay

Create a modal using open overlay to display additional content on top of your main design without navigating away from the current screen

9:14

7

Figma Plugin and Exporting

Accelerate the design to code process with Figma plugin

5:52

8

Text Styles and Alignment

Fix font issues by using text styles to maintain visual consistency and adhere to the design system of iOS

3:49

9

Simplify your Code

Learn to split your code by creating reusable components to make your code more maintainable and readable

6:42

10

Text and Secure Fields

Enhancing User Input with State and Bindings

5:18

11

Alert

Implementing Alert Management and Input Validation

4:57

12

Interactions and ChatGPT

Transform Your Coding Workflow with AI: From Automation to Advanced Animations

7:20

13

Create a Parallax ScrollView

Transform a basic ScrollView by adding a stunning parallax effect

6:17

14

Mesh Gradient Animation

Learn how to create and animate mesh gradients

4:45

15

Progressive Blur Effect

Using a component applied to a background modifier, we'll dynamically adjust the blur radius and position of the gradual blur

4:29

16

Ripple Visual Effect with Metal Shader

Create a stunning ripple visual effect for a simple card interaction using Metal Shaders

3:30

17

Navigation Transition

Learn how to animate view transitions using navigation transition

5:32

18

Text Transition with Text Renderer

Add text and blur transitions using the new Text Renderer API in SwiftUI

7:18

19

Expanding View Animation

Learn to add an animation to an expanding view that, upon being clicked, will open up by rotating and revealing four additional views

9:40

20

Image Gallery, HueRotation and Swipe Gesture

Create a dynamic SwiftUI photo browser featuring fluid transitions, touch-based interactions, and lively visual effects

24:45

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.

Akson Phomhome

UI Designer

Designer at Design+Code.

icon

11 courses - 50 hours

course logo

Prototype and Code iOS apps in Figma and SwiftUI

Welcome to our course on designing a sleek wallet interface with Figma! You’ll learn to create a visually appealing and functional wallet interface using DesignCode and Apple UI Kits. Master prototyping, swipe gestures, carousel animations, overlays, and reusable components. Plus, explore a Figma plugin to easily transition from design to SwiftUI. By the end, you’ll create dynamic, user-friendly prototypes.

3 hrs

course logo

Create 3D UI for iOS and visionOS in Spline

Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI

3 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

Web App Design using Midjourney and Figma

Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma

2 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

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 Smart Home App in Figma

Design a Smart Home app 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