Build SwiftUI apps for iOS 18 with Cursor and Xcode

Add to favorites

Learn to develop iOS apps using SwiftUI 6, Xcode 16, Cursor and Claude AI

Play video

Build SwiftUI apps for iOS 18 with Cursor and Xcode

6:34

Intro to SwiftUI 6 and Xcode 16

14:52

Create your first iOS app with Claude AI

11:16

Intro to Cursor with Claude AI and SwiftUI

8:02

Cursor Workflow

17:11

Customize UI from AI

15:38

ChatGPT Work With and Mesh Gradient

12:42

Masking and Outlines

13:27

Animated Mesh Gradient

17:06

Ripple Effect

20:14

Figma to SwiftUI Code

14:33

Xcode with Claude AI using Alex Sidebar

19:40

Cursor Agent and API Call

22:39

Swift Package and Markdown

16:08

Organizing Your Project

24:24

Prompt Templates

16:33

Text Animation and Dark Mode

23:58

This Course

In this course, we'll explore the exciting new features of SwiftUI 6 and Xcode 16 for building iOS 18 apps. From mesh gradients and text animations to ripple effects, you'll learn how to create polished, highly custom apps using the latest workflows. Whether you're just starting or have a passion for crafting delightful UI experiences, this journey will give you all the skills you need to create stunning iOS apps. We'll also dive into using Cursor and Claude AI for AI-driven coding, helping you start strong and customize your apps.

Requirements

To get the most out of this course, you'll need a Mac running Sequoia or later and Xcode 16 installed. Having a basic familiarity with computers and experience with HTML and CSS can be helpful but isn't mandatory. Our friendly approach, guided by visual learning, makes it easy to follow along—even for beginners. We'll take on coding challenges step-by-step, focusing on how to bring your design visions to life with tools like SwiftUI, Cursor, and AI-driven development resources.

Learning Path

We recommend using this course as a reliable companion alongside the SwiftUI handbook and our other great SwiftUI courses. As you become more comfortable with SwiftUI and Swift, you're welcome to progress to our more advanced courses. Here's a simple plan to help you with your learning path.

Beginners

Intermediate / Advanced

Cursor + Xcode Workflow

Using Cursor with Xcode makes building iOS apps faster and easier, especially with SwiftUI. Cursor leverages AI to help you quickly generate and refine code, making it a great tool for creating UI elements, integrating APIs, and speeding up development cycles. With Cursor’s AI-driven suggestions and the ability to handle repetitive coding tasks, you can focus more on customization and fine-tuning.

When used alongside Xcode, you gain the benefit of instant code previews and debugging capabilities. This combination allows you to see changes in real-time and make adjustments on the fly. By integrating Cursor into your workflow, you can quickly go from idea to functional app, whether you're a beginner or an experienced developer, making the app-building process more efficient and enjoyable.

What's New in SwiftUI 6

The launch of iOS 18 and SwiftUI 6 brings significant advancements to app development with features like Transition Modifier for smoother animations, Text Renderer for improved text clarity, Scroll Transition for immersive scrolling, and Mesh Gradient for complex color transitions. The Metal Shader enhances graphics performance, creating a more refined, robust environment for developing innovative applications.

Scroll Transitions

Scroll Transitions allow you to create fluid and engaging scrolling experiences. With built-in support for various transition effects, you can now customize how your content appears and disappears as users scroll through your app.

ScrollView(.horizontal) {
    HStack {
        ForEach(0 ..< 5) { item in
            Rectangle()
                .containerRelativeFrame(.horizontal)
                .cornerRadius(36)
                .scrollTransition(axis: .horizontal) { content, phase in
                    content.scaleEffect(phase.isIdentity ? 1 : 0.95)
                }
        }
    }
}
.contentMargins(32)
.scrollTargetBehavior(.paging)
.scrollIndicators(.hidden)

Navigation Transitions

Navigation Transitions provide a new way to handle view transitions within navigation stacks. These transitions bring smooth animations and enhanced control over how views are presented and dismissed, improving the overall user experience.

struct CardsView: View {
    @Namespace var namespace

    var body: some View {
        NavigationStack {
            ScrollView {
                ForEach(cards) { card in
                    NavigationLink {
                        CardView(card: card)
                            .navigationTransition(.zoom(sourceID: "card\(card.id)", in: namespace))
                    } label: {
                        CardView(card: card, show: false)
                            .matchedTransitionSource(id: "card\(card.id)", in: namespace)
                            .cornerRadius(20)
                            .padding(.top, 12)
                    }
                }
                .padding(.horizontal, 30)
                .padding(.vertical, 60)
            }
            .background(Color(.systemGray5))
            .cornerRadius(30)
            .ignoresSafeArea()
        }
    }
}

Ripple Effect Metal Shader

In iOS 18, the Ripple Effect Metal Shader brings dynamic, water-like ripple animations to your app’s user interface. This effect is achieved using Metal, Apple’s graphics framework, which allows for high-performance rendering directly on the GPU.

struct ContentView: View {
    @State var counter: Int = 0
    @State var origin: CGPoint = .init(x: 0.5, y: 0.5)

    var body: some View {
        VStack {
            Text("Ripple Effect")
                .font(.largeTitle.bold())
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .foregroundColor(.white)
        .background(.blue)
        .cornerRadius(30)
        .onPressingChanged { point in
            if let point {
                origin = point
                counter += 1
            }
        }
        .modifier(RippleEffect(at: origin, trigger: counter))
        .padding()
    }
}

Text Renderer

In SwiftUI 6, introduced with Xcode 16, Apple has enhanced text rendering capabilities by introducing the TextRenderer protocol. This protocol allows developers to customize the rendering behavior of text views, enabling the creation of dynamic text effects and animations.

struct ContentView: View {
    @State var isVisible = true

    var body: some View {
        VStack {
            if isVisible {
                Text("Share your Achievements")
                    .font(.system(.largeTitle, weight: .bold))
                    .customAttribute(EmphasisAttribute())
                    .transition(TextTransition())
            }
            Button("Toggle") {
                isVisible.toggle()
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .padding(40)
    }
}

Mesh Gradients

Mesh Gradients enable you to create complex and eye-catching gradient backgrounds with ease. By defining a mesh of control points and colors, you can produce intricate gradient patterns that add a new level of visual appeal to your app interfaces.

Mesh Gradients can work as a ForegroundStyle, so on texts and shapes during animations.
You can animate using TimelineView or Timer.

struct ContentView: View {
    var body: some View {
        MeshGradient(
            width: 3,
            height: 3,
            points: [
                .init(0, 0), .init(0.5, 0), .init(1, 0),
                .init(0, 0.5), .init(0.3, 0.5), .init(1, 0.5),
                .init(0, 1), .init(0.5, 1), .init(1, 1)
            ],
            colors: [
                .red, .purple, .indigo,
                .orange, .cyan, .blue,
                .yellow, .green, .mint
            ]
        )
    }
}

SF Symbols 6

With the addition of SF Symbols 6, you now have access to an even larger collection of 6,000 high-quality, customizable icons. These symbols are designed to seamlessly integrate with your app’s design language, offering consistency and clarity across different devices and screen sizes. There are new animation presets, including Replace, Wiggle, and Rotate.

Replace allows you to smoothly transition between two symbols.
Wiggle adds a playful movement to symbols, which can be used to draw attention to interactive elements.
Rotate provides a rotating effect, ideal for indicating ongoing processes or status changes.

Here’s how you can implement and customize these animations in your SwiftUI views:

struct ContentView: View {
    @State private var isActive = false

    var body: some View {
        VStack(spacing: 20) {
            // Replace Animation
            Image(systemName: isActive ? "star.fill" : "star")
                .font(.system(size: 40))
                .symbolEffect(.replace)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 0.5)) {
                        isActive.toggle()
                    }
                }

            // Wiggle Animation
            Image(systemName: "heart.fill")
                .font(.system(size: 40))
                .foregroundColor(.red)
                .symbolEffect(.wiggle)
                .onAppear {
                    withAnimation(.easeInOut(duration: 1).repeatForever()) {
                        isActive = true
                    }
                }

            // Rotate Animation
            Image(systemName: "house.fill")
                .font(.system(size: 40))
                .foregroundColor(.blue)
                .symbolEffect(.rotate, options: .init(duration: 2).repeatForever())
                .onAppear {
                    isActive = true
                }
        }
    }
}

What's New in Xcode 16

Xcode 16 comes packed with features that enhance the SwiftUI development experience. Here are some of the improvements:

Predictive Code Completion

Xcode 16 introduces more thorough code suggestions thanks to on-device coding models specifically trained for Swift and Apple SDKs. These models leverage the surrounding code context, such as function names and comments, to provide faster and more accurate completions. This feature is available when running Xcode 16 on macOS Sequoia, powered by Apple Silicon.

Swift Assist (Coming 2025)

Swift Assist is an advanced feature introduced in Xcode 16 that leverages AI to assist developers by generating code automatically. This feature aims to significantly enhance productivity by reducing the amount of manual coding required, allowing developers to focus more on higher-level design and logic.

Improved Previews

Xcode 16 offers more reliable and faster previews, allowing you to see your changes in real-time without running the app on a simulator or device. This significantly speeds up the development cycle and helps you iterate faster.

SwiftUI Charts for iOS 18

SwiftUI 6 introduces powerful charting capabilities. You can now create beautiful and interactive charts to visualize data directly within your SwiftUI views. These charts are highly customizable, enabling you to tailor them to your specific needs.

Grid Layout

The new grid layout system in SwiftUI simplifies the creation of complex grid structures. With intuitive APIs, you can define rows, columns, and spacing to build structured and responsive grid-based layouts effortlessly.

struct ContentView: View {
    let items = Array(1...12)

    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 80))]) {
            ForEach(items, id: \.self) { item in
                Text("\(item)")
                    .frame(width: 80, height: 80)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

Size Class

SwiftUI 6 offers improved support for adaptive layouts, making it easier to create views that look great on all device sizes and orientations. This includes better handling of dynamic type, accessibility settings, and various screen sizes.

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View {
        VStack {
            if sizeClass == .compact {
                Text("Compact Size Class")
                    .font(.largeTitle)
            } else {
                Text("Regular Size Class")
                    .font(.largeTitle)
            }
        }
        .padding()
        .background(Color.orange)
        .cornerRadius(10)
    }
}

Figma Plugins

Figma plugins have become an essential part of enhancing the workflow for designers and developers, particularly when bridging the gap between design and code. When working with SwiftUI, several Figma plugins provide powerful features for exporting, converting, and generating SwiftUI code. Here’s a closer look at three useful plugins:

Dev Mode

Dev Mode is a feature that allows you to streamline your handoff process and export designs as SwiftUI code. By providing ready-to-use code snippets, it bridges the gap between design and development. This makes it easier for teams to ensure pixel-perfect implementation and reduces friction in transitioning from design to development.

Figma to Code

The Figma to Code plugin supports multiple code frameworks, including SwiftUI. It converts Figma designs into SwiftUI code, providing a foundation for building iOS applications. This tool is especially useful for generating initial layouts and structure directly from your designs, helping you accelerate the development process.

SwiftUI Code Generator

SwiftUI Code Generator focuses exclusively on converting Figma designs into SwiftUI code. It offers precise translation of design elements, making it easier to replicate your UI designs within Xcode projects. This plugin emphasizes accuracy and layout fidelity, saving time while building SwiftUI interfaces.

These plugins empower designers to produce high-quality, production-ready SwiftUI code, making design-to-code translation faster and more efficient. By integrating them into your workflow, you can maintain consistency between your Figma designs and SwiftUI projects, improving overall collaboration and productivity.

Conclusion

SwiftUI 6 and Xcode 16, along with tools like Cursor and Claude AI, create a comprehensive toolkit for building exceptional iOS 18 applications. Cursor's support for SwiftUI accelerates development with real-time code generation and previews, enhancing efficiency and reducing iteration times. Meanwhile, Claude AI offers intelligent code suggestions and explanations, helping developers navigate complex SwiftUI tasks with ease. These AI-driven tools streamline workflows, enabling more productive and seamless app development.

Additionally, plugins like Dev Mode, Figma to Code, and the SwiftUI Code Generator transform Figma designs into production-ready SwiftUI code. This integration ensures a consistent visual language across the development process and enhances collaboration between design and code. With Xcode 16 and iOS 18, developers are equipped with advanced tools and a robust framework to create stunning, high-performance apps, making this an ideal time to innovate on Apple's platforms.

Download source files

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

Design template

Source code for all sections

Video files, ePub and subtitles

Browse all downloads

Build SwiftUI apps for iOS 18 with Cursor and Xcode

Learn to develop iOS apps using SwiftUI 6, Xcode 16, Cursor and Claude AI

6:34

Intro to SwiftUI 6 and Xcode 16

Unlocking Development Skills Through Hands-On Practice

14:52

Create your first iOS app with Claude AI

Starting with SwiftUI and Claude AI to generate code to paste in Xcode

11:16

Intro to Cursor with Claude AI and SwiftUI

Getting Started with Cursor: A Guide for Beginners

8:02

Cursor Workflow

VSCode extensions for SwiftUI, Cursor Composer, Commits and Xcode Errors

17:11

Customize UI from AI

Elevating AI-Generated UIs with SwiftUI: A Comprehensive Guide

15:38

ChatGPT Work With and Mesh Gradient

Exploring Mesh Gradients in iOS 18 with AI and SwiftUI

12:42

Masking and Outlines

Creating Eye-Catching UI with Gradients, Masks, and Outlines in SwiftUI

13:27

Animated Mesh Gradient

Learn how to bring stunning, dynamic mesh gradients to life in your SwiftUI apps

17:06

Ripple Effect

Implementing Apple's Ripple Effect from iOS 18 in Your SwiftUI Project

20:14

Figma to SwiftUI Code

How to Export Accurate SwiftUI Code from Figma Designs

14:33

Xcode with Claude AI using Alex Sidebar

How to Use Alex Sidebar for AI-Powered iOS Development

19:40

Cursor Agent and API Call

How to Integrate AI Features in Your App Using Cursor Agent and Claude AI

22:39

Swift Package and Markdown

Adding Markdown and Streaming Capabilities to Your SwiftUI App

16:08

Organizing Your Project

A guide to structuring and refactoring SwiftUI projects efficiently

24:24

Prompt Templates

Enhancing Your App with Prompt Templates and Styling in SwiftUI

16:33

Text Animation and Dark Mode

How to blend AI capabilities with your design expertise to build stunning, functional apps in SwiftUI.

23:58

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.

Meng To

I design, code and write

Meng To is the author of Design+Code. Meng started off his career as a self-taught designer from Montreal and eventually traveled around the world for 2 years as his US VISA was denied. During his travels, he wrote a book which now has 35,000 readers.

39 courses - 184 hours

Build SwiftUI apps for iOS 18 with Cursor and Xcode

In this course, we'll explore the exciting new features of SwiftUI 6 and Xcode 16 for building iOS 18 apps. From mesh gradients and text animations to ripple effects, you'll learn how to create polished, highly custom apps using the latest workflows. We'll also dive into using Cursor and Claude AI for AI-driven coding, helping you start strong and customize your apps.

5 hrs

Create your Dream Apps with Cursor and Claude AI

Learn to build your dream web apps from the ground up using Cursor, Claude AI, and a suite of powerful AI tools. This course covers everything you need, including React for frontend development, Firebase for backend integration, and Stripe for handling payments. You’ll also dive into advanced AI tools like Claude Artifacts, Galileo AI, v0.dev for UI, Ideogram for design generation, and Cursor Composer for full-scale development.

6 hrs

Build a React Site from Figma to Codux

In this course, you'll learn to build a website from scratch using Codux, starting with a Figma template. You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.

2 hrs

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

Master No-Code Web Design with Framer

In this free Framer course, you'll learn to create modern, user-friendly interfaces. Start with dark mode and glass designs, then move from Figma to Framer, using vectors and auto layout for responsive websites. Add animations, interactive buttons, and custom components with code. Finally, you'll craft a design system suitable for teamwork or solo projects, all in a straightforward and practical approach.

4 hrs

Build SwiftUI Apps for iOS 17

In this course, we’ll be exploring the fresh and exciting features of SwiftUI 5! As we craft a variety of iOS apps from the ground up, we'll delve deep into the treasure trove that is SwiftUI's user interface, interactions, and animations.

4 hrs

Build Beautiful Apps with GPT-4 and Midjourney

Design and develop apps using GPT-4 and Midjourney with prompts for SwiftUI, React, CSS, app concepts, icons, and copywriting

4 hrs

Build SwiftUI apps for iOS 16

Create animated and interactive apps using new iOS 16 techniques using SwiftUI 4 and Xcode 14

5 hrs

Build a 3D Site Without Code with Framer

Design and publish a responsive site with 3D animation without writing a single line of code

3 hrs

Create 3D Site with Spline and React

Design and code a landing page with an interactive 3D asset using Spline and CodeSandbox

1 hrs

Build an Animated App with Rive and SwiftUI

Design and code an iOS app with Rive animated assets, icon animations, custom layouts and interactions

3 hrs

Build a SwiftUI app for iOS 15 Part 3

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

4 hrs

Build a SwiftUI app for iOS 15 Part 2

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

3 hrs

Build a SwiftUI app for iOS 15

Design and code a SwiftUI 3 app with custom layouts, animations and gestures using Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable and a whole lot more

4 hrs

React Livestreams

Learn how we can use React Hooks to build web apps using libraries, tools, apis and frameworks

4 hrs

Design Founder Livestreams

A journey on how we built DesignCode covering product design, management, analytics, revenue and a good dose of learning from our successes and failures

2 hrs

SwiftUI Advanced Handbook

An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level

4 hrs

iOS Design Handbook

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

2 hrs

SwiftUI Handbook

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques

7 hrs

Build a web app with React Hooks

Learn how we built the new Design+Code site with React Hooks using Gatsby, Netlify, and advanced CSS techniques with Styled Components.

4 hrs

UI Design Handbook

A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.

2 hrs

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs

SwiftUI for iOS 14

Build a multi-platform app from scratch using the new techniques in iOS 14. We'll use the Sidebar and Lazy Grids to make the layout adaptive for iOS, iPadOS, macOS Big Sur and we'll learn the new Matched Geometry Effect to create beautiful transitions between screens without the complexity. This course is beginner-friendly and is taught step-by-step in a video format.

3 hrs

SwiftUI Livestreams

This is a compilation of the SwiftUI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

19 hrs

UI Design Livestreams

This is a compilation of the UI live streams hosted by Meng. Over there he talks and teaches how to use design systems, typography, navigation, iOS 14 Design, prototyping, animation and Developer Handoff.

26 hrs

UI Design for Developers

In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.

3 hrs

Build an app with SwiftUI Part 3

This course was written for designers and developers who are passionate about design and about building real apps for iOS, iPadOS, macOS, tvOS and watchOS. SwiftUI works across all of those platforms. While the code is not a one-size-fits-all, the controls and techniques involved can apply to all platforms. It is beginner-friendly, but it is also packed with design tricks and cool workflows about building the best UIs and interactions.

4 hrs

Build an app with SwiftUI Part 2

4 hrs

Build a full site in Webflow

Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build complex interactions and deploy all in one tool. Webflow also comes with a built-in content management system (CMS) and Ecommerce for creating a purchase experience without the need of third-party tools.

3 hrs

Advanced Prototyping in ProtoPie

ProtoPie is a cross-platform prototyping tool that creates prototypes nearly as powerful as those made with code, with half of the efforts, and zero code. It's perfect for designers who want to quickly experiment with advanced interactions using variables, conditions, sensors and more.

3 hrs

Build an app with SwiftUI Part 1

4 hrs

React Native for Designers Part 2

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web has grown over the past decades. Most importantly, you're building for both iOS and Android using the same codebase.

3 hrs

React Native for Designers

5 hrs

Design System in Figma

Learn how to use and design a collaborative and powerful design system in Figma. Design Systems provide a shared library of reusable components and guidelines and that will let you build products much faster

3 hrs

React for Designers

Learn how to build a modern site using React and the most efficient libraries to get your site/product online. Get familiar with Grid CSS, animations, interactions, dynamic data with Contentful and deploying your site with Netlify.

3 hrs

Swift Advanced

Learn Swift a robust and intuitive programming language created by Apple for building apps for iOS, Mac, Apple TV and Apple Watch

9 hrs

Learn Swift

Learn Swift a robust and intuitive programming language created by Apple for building apps for iOS, Mac, Apple TV and Apple Watch

4 hrs

Learn Sketch

Learn Sketch a design tool entirely vector-based and focused on user interface design

5 hrs

Learn iOS 11 Design

Learn colors, typography and layout for iOS 8

1 hrs