Design+Code logo

Quick links

Suggested search

Intro to IOS 18 image 1

Car Control App Design

You will be excited to create two iOS 18 designs: a Car Control app and an AI app, each with its unique style. In the first part, we will design a Car Control app inspired by Apple's CarPlay, Tesla, and other car apps. This design will be more complex and will help improve your skills and teach you how to use Figma effectively. You'll use custom shapes, create progress rings with the arc tool, learn how to use gradients to achieve the desired effect, and use blurs to make your design stand out.

Intro to IOS 18 image 2

Artificial Intelligence App Design

In the second part of the design episode, we will design an AI app inspired by Apple's intelligence. This app will have a simple, clean design focusing on how information is organized and displayed. We'll also add special touches like gradients and blurs in certain areas.

Intro to IOS 18 image 3

What You'll Learn

The course is divided into three main parts: design, prototype, and implementation. Each section covers a key aspect of iOS design. We'll start with the basics and move to advanced topics, ensuring a strong foundation. You'll find practical examples, hands-on exercises, and tips to help you apply what you learn to your projects.

  • UI Kits: Understand and use UI kits, and learn how to customize them to speed up your design process and ensure consistency.
  • Create Wireframes: Develop wireframes that serve as the blueprint for your app, focusing on structure and functionality.
  • Typography: Learn the basics of typography and apply Apple's typography guidelines to enhance readability and accessibility in your design.
  • Integrate SF Symbols 6: Integrate SF Symbols into your design to create cohesive and attractive icons, making navigation easier for users.
  • Implement Auto Layout: Leverage Figma's Auto Layout to build responsive designs that adapt to various screen sizes.
  • Choose and Apply Colors: Understand color theory and Apple’s color guidelines, and create dynamic color styles and gradients.

Intro to IOS 18 image 4

Advanced Topics

The first part of the course is completely free! To learn about prototyping and implementation, just subscribe to DesignCode. You'll get access to all our past and future courses, including early access to upcoming ones. In the second part, we will design an AI app, inspired by Apple's intelligence. This app will have a simple, clean design focusing on how information is organized and displayed. We'll also add some special touches like gradients and blurs in certain areas. We will dive into more advanced topics to enhance your design skills and prepare you for real-world applications. Here's what you'll learn:

  • Adaptive Layouts: Master the art of creating responsive designs that adapt seamlessly to different screen sizes and orientations.
  • Layout Grids and Spacing: Understand how to use layout grids and manage spacing to create clean, organized, and visually appealing designs.
  • Components and Variants: Learn how to build reusable components and create variants to streamline your design process and maintain consistency.
  • Figma Variables: Discover how to use variables in Figma to simplify your design workflow and ensure consistency across your project.
  • Advanced Prototyping: Take your prototyping skills to the next level by creating interactive and dynamic prototypes that closely mimic the final product.
  • Preparing Design for Handoff: Learn best practices for preparing your design files for handoff to developers, ensuring a smooth transition from design to development.
  • Exporting Your Design to Code: Explore how to export your design assets and turn them into code, bridging the gap between design and development.
  • Customizing Code: Gain insights into customizing the exported code to fit specific project requirements and enhance functionality.
  • React Native Animation: Get started with adding animations in React Native to create engaging and visually appealing user experiences.
  • Getting Started with Reanimated: Learn the basics of Reanimated, a powerful library for building smooth and performant animations in React Native.

Intro to IOS 18 image 5

Figma File

To follow the course, you will need my Figma file. This file includes local color styles, color variables, assets, images, and components, including the original design and more.

Intro to IOS 18 image 6

iOS 18

Apple's iOS 18 introduces a host of new features and improvements designed to enhance the user experience on iPhone and iPad. The update includes advanced color variables for all system colors with light, dark, and dark elevated values, allowing for more dynamic and adaptive app designs. The updated app icon artwork and the new mode for switching between light, dark, and tinted app icons provide more customization options for users. Enhanced components like the new Control Center and Lock Screen, along with a new iPadOS floating tab bar, offer greater functionality and user-friendly interactions. With improved organization of instance properties and a comprehensive examples page, iOS 18 makes it easier for designers to create highly realistic and efficient app designs, fully aligned with Apple's design principles.

Intro to IOS 18 image 7

macOS Sequoia

macOS Sequoia introduces a range of new features and improvements for Mac devices. This update brings a refreshed user interface with smoother animations and a more cohesive design. Performance optimizations ensure faster multitasking, and new privacy features give users greater control over their data. Enhanced machine learning capabilities make applications smarter and more intuitive. Additionally, macOS Sequoia includes new productivity tools, better compatibility with iOS and iPadOS, and expanded support for developers with updated APIs and frameworks. This update offers a glimpse into the future of macOS, combining powerful features with a seamless user experience.

Intro to IOS 18 image 8

Apple Intelligence

Apple Intelligence uses advanced machine learning and AI to create smarter, more intuitive experiences across all Apple devices. It powers features like Siri, which offers personalized assistance, and the Photos app, which organizes and curates your photos. Apple prioritizes user privacy by processing as much data as possible on the device. Intelligent recommendations in the App Store, Apple Music, and News apps enhance user engagement by learning from your preferences. Apple Intelligence aims to make technology interactions more natural, efficient, and personalized.

Intro to IOS 18 image 9

Designing for iOS

Designing for iOS means creating clean, intuitive, and visually appealing user interfaces that follow Apple's interface guidelines . This includes using clear typography, consistent icons, and balanced layouts for a smooth user experience. The focus is on clarity and simplicity, with careful attention to spacing, alignment, and color schemes for a cohesive look. Using tools like Figma, designers can create detailed prototypes to visualize the app's flow and functionality. The goal is to craft designs that are both aesthetically pleasing and easy to navigate and use.

Intro to IOS 18 image 10

iOS 18 and iPadOS 18 UI Kit

We’re going to use Apple’s iOS 18 and iPadOS 18 UI Kit to help you quickly create accurate iPhone and iPad designs. It includes components for common controls, design templates, text styles, color styles, materials, and layout guides. New features include:

  • Color variables for system colors
  • Modes for switching between app icon styles
  • Updated app icon artwork
  • Examples page
  • New iPadOS floating tab bar
  • Improved instance properties for customization
  • New Control Center and Lock Screen components with customizable controls Intro to IOS 18 image 11

Large Titles

Bold fonts have become more common, with titles appearing large and bold. This change is due to taller screens and the need for accessibility. In iOS, users can set very large fonts for apps that support accessibility, including all of Apple's built-in apps. This feature has become an expected standard for users.

Intro to IOS 18 image 12

Cards

With larger screens, there's more room to showcase content. Using cards can help organize different sections more effectively. Rounded corners on these cards give them a tactile and friendly feel. To add depth and context to your design, you can incorporate blurred backgrounds and drop shadows.

Intro to IOS 18 image 13

Colors

Use noticeable colors to show that an element can be tapped or highlighted. For buttons and states, blue is a dependable and safe option. It's also a good idea to start with a light background and black text, or a dark background with white text for dark mode, creating strong contrast for readability.

Intro to IOS 18 image 14

iOS Palette

Apple employs specific colors in their native apps. Blue is the most commonly used color across the system, representing buttons, icons, and actionable elements. Other colors establish brand identity, such as yellow for Notes, pink for Apple Music, and green for Messages. Red typically indicates destructive actions, while green signifies successful actions.

Intro to IOS 18 image 15

System Colors

System colors are predefined colors provided by Apple to ensure consistency and accessibility across different apps and interfaces. These colors automatically adapt to various system settings, such as light and dark modes, providing a seamless user experience.

Intro to IOS 18 image 16

Gradients

A color gradient is a gradual change from one color to another, and it can include multiple shades. Gradients are also called color transitions. They can smoothly blend similar colors or create a contrast between very different ones. Different types of gradients can be chosen: linear , radial , angular, and diamond . Each type provides distinct ways to add gradient effects to your design.

Intro to IOS 18 image 17

Layout Design

Layout is the arrangement of visual and textual elements on a screen. It organizes these elements to create a clear, visually appealing interface. Effective layout design ensures content is easy to read and navigate, using principles like alignment, visual hierarchy, and spacing to guide the user's attention and create a logical flow. In iOS 18 design, a well-structured layout enhances usability and provides a seamless user experience.

Intro to IOS 18 image 18

8 pt layout grid system

The 8 pt grid system is a common UI design method that uses 8-pixel increments for spacing and sizing elements. It ensures consistency, alignment, and easy scalability across different devices. By using this system, designers can create clean, organized, and visually appealing layouts that work well on any screen size. This approach simplifies the design process and improves collaboration with developers, making it easier to maintain a uniform look and feel throughout the app.

Intro to IOS 18 image 19

Spacing and Padding

Spacing and padding are crucial for creating a clean and organized interface in iOS 18. Consistent spacing between elements ensures a clutter-free layout, making it easy for users to navigate. Padding within elements, like buttons and text fields, keeps content legible and touch-friendly. Apple recommends using margins and padding between 16 and 20 points to maintain a cohesive look. Proper use of negative space helps separate sections and prevents visual overload. By following these guidelines, designers can create balanced and user-friendly interfaces.

Intro to IOS 18 image 1

Margin and Safe Area

Use negative space to draw attention to content, creating breathing room and preventing visual clutter. Apple typically uses margins between 16 and 20 pt. The safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views.

Intro to IOS 18 image 2

Navigation

Navigation directly impacts user experience and usability. Well-designed navigation ensures users can easily find their way around the app, reducing confusion and frustration.

Navigation bars

The navigation bar, located at the top of the screen, often contains a title or logo and navigation buttons. It helps users navigate back to previous screens or access additional options. visionOS uses a variable blur in the bar background, anchoring the bar above scrolling content.

Intro to IOS 18 image 3

Tab Bar

A tab bar is a row of tabs typically placed at the bottom of the screen, allowing users to switch between different sections or views with a single tap. It’s recommended to use up to five tabs in iOS and up to six tabs in visionOS, iPadOS, and tvOS.

Intro to IOS 18 image 4

Sidebar

A sidebar is a panel next to the main content area, offering extra navigation, options, or additional information. It usually shows a list of sections, categories, or menu items for easy access.

Intro to IOS 18 image 5

Buttons

Buttons should be easy to tap and range from 30 to 60 points wide, with sufficient space around them for visibility and distinction from other screen elements. Standard iOS interfaces recommend buttons be at least 44x44 points . iOS and iPadOS have four button styles, each available in three sizes, with different levels of visual prominence.

Intro to IOS 18 image 6

Icons

Icons should be clear and easy to understand. Use text whenever possible to make their meaning clearer. Avoid using different versions of the same icon in different places to prevent user confusion.

Intro to IOS 18 image 7

SF Symbols 6

SF Symbols is Apple’s extensive icon library, offering over 6,000 symbols designed for consistency and accessibility. SF Symbols 6 adds enhanced animations, improved annotation tools, and over 800 new symbols. Download and install the SF Symbols App from the Apple Developer website.

Intro to IOS 18 image 8

What’s New in SF Symbols?

This year, Apple has introduced exciting updates to SF Symbols. Three new animation presets—Wiggle, Rotate, and Breathe—make icons more dynamic and engaging. Existing presets like Replace and Variable Color have also been enhanced for smoother transitions and animations. The SF Symbols app has been updated with better tools for creating and customizing animated symbols. Additionally, over 800 new symbols have been added, bringing the total to over 6,000 unique icons, giving designers a wide range of options to enhance their designs.

Intro to IOS 18 image 9

Typography

Typography is essential for clear and visually pleasing communication. With a simple interface and focus on content, typography will occupy a large part of the screen. The default San Francisco font is recommended for its legibility and consistent use in Apple apps.

Intro to IOS 18 image 10

Line Height

It's also important to consider the line height, or the spacing between lines of text. A good line height can improve readability and reduce eye strain. A general guideline is to use a line height of 1.5 times the font size, but this can also vary depending on the font and layout.

Intro to IOS 18 image 11

Line Length

Line length is crucial in typography, affecting how easily text is read. It refers to the width of the text block or characters per line. If too short, the text becomes disjointed and difficult to follow. If too long, readers may lose their place and experience eye fatigue. Optimal line length depends on typeface, font size, and leading. Generally, 45-75 characters per line are best for most typefaces and sizes. Larger fonts or display types may need shorter lines for readability.

Intro to IOS 18 image 12

Legibility

The text should be easy to read at any size. Use font sizes and weights that ensure readability for most people. For iOS, use a minimum font size of 11 pt. Avoid using light font weights; choose Regular, Medium, Semibold, or Bold weights instead.

Intro to IOS 18 image 13

Hierarchy

Use different font sizes, weights, and styles to create a clear visual hierarchy. This helps users understand the content structure and navigate it easily. Typography hierarchy arranges and organizes text visually to guide the reader's attention and show the importance of different elements.

Intro to IOS 18 image 14

Contrast

To make text easy to read, it's important to have enough contrast between the font and the background. Using black or white colors is usually a safe option as they create strong contrast with most color schemes.

Intro to IOS 18 image 15

Font Weights and Widths

These are all the new available Widths in SF, which, when combined with the existing Weights, unlock an abundance of possibilities. This expansion introduces a diverse range of voices and functionalities, catering to a wide range of applications.

Intro to IOS 18 image 16

Dynamic Type

Dynamic Type is an essential feature that allows users to adjust the text size across the system to suit their reading preferences. When designing for iOS 18, ensure that your app supports Dynamic Type by using the built-in text styles provided by Apple. This ensures that your text remains readable and accessible, regardless of the user's preferred text size.

Accessibility is a prominent theme in iOS design. Apple provides dynamic font presets that automatically adjust the text size based on the user's preferences. For example, if you set your text to Body and enable Dynamic Type, the system will increase the size based on the user's settings.

image

READ NEXT

UI Kits

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

Intro to iOS 18

Master iOS 18 design: Create stunning apps with Figma. Learn UI/UX principles, prototyping, and Apple's latest design language for mobile

3:49

2

UI Kits

Explore the best UI Kits and save time while creating unique designs

6:30

3

Wireframing

Building the Foundation of Your UI Design and Learning About the Different Types of Wireframes: Low, Mid, and High Fidelity

7:39

4

iOS 18 Typography

A beginner’s guide to master the art of typography for iOS and enhance your design skills with the latest typography techniques

9:59

5

SF Symbol 6

Discover what's new in SF Symbols 6, and learn how to integrate these icons into your design for a better user experience

10:10

6

Auto Layout

Learn how to create flexible layouts that adapt to different screen sizes and content changes by mastering Auto Layout

13:52

7

Colors

Bring your design to life and learn how to seamlessly integrate colors and gradients into our design

14:41

8

Gradients

Learn how to create complex gradient effects that make your designs stand out

15:08

9

Responsive Layouts

Ensure our layout is responsive to provide a smooth user experience on all devices

6:22

10

Layout Grids and Spacing

Explore Figma's grid systems to create precise, visually appealing designs

15:07

11

Components and Variants

Learn and create components for our layouts to easily reuse design elements, ensuring our design remains consistent and efficient

10:42

12

Figma Variables

Explore how to use variables, create a sign-up page, and switch to dark mode

14:51

13

Overlays and Variable Mode Interactions

Learn how to create interactive transitions with overlays and easily switch between light and dark modes using variables in your prototype

5:23

14

Interactive Form Fields with Variables

Bring your designs to life with responsive form fields using variables and conditional logic

8:00

15

Gradient Animations

Discover how to bring gradients to life with smooth transitions using After Delay and Smart Animate

8:23

16

Master Conditionals for a Functional Keyboard

Animate a chat screen with a functional keyboard that looks and feels real using conditionals

8:56

17

Preparing Design for Handoff

Best Practices for Preparing Design for Handoff

6:34

18

Exporting Your Design to Code

Best Practices for Exporting Design to Code

4:57

19

Customizing Code

Step-by-Step Guide to Customizing Code

5:46

20

React Native Animation

Animating UI Components in React Native

7:26

21

Getting Started with Reanimated

Reanimated Essentials for React Native Developers

10:56

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

19 courses - 74 hours

course logo

Design Multiple Apps with Figma and AI

In this course, you’ll learn to design multiple apps using Figma and AI-powered tools, tackling a variety of real-world UI challenges. Each week, a new episode will guide you through a different design, helping you master essential UI/UX principles and workflows

4 hrs

course logo

SwiftUI Fundamentals Handbook

A comprehensive guide to mastering Swift programming fundamentals, designed for aspiring iOS developers. This handbook provides a structured approach to learning Swift's core concepts, from basic syntax to advanced programming patterns. Through carefully sequenced chapters, readers will progress from essential programming concepts to object-oriented principles, building a solid foundation for SwiftUI development. Each topic includes practical examples and clear explanations, ensuring a thorough understanding of Swift's capabilities. This handbook serves as both a learning resource and a reference guide, covering fundamental concepts required for modern iOS development. Topics are presented in a logical progression, allowing readers to build their knowledge systematically while gaining practical programming skills.

1 hrs

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.

4 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.

13 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