[VIP] DesignCode: 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.

Nov 28, 2024 - 13:17

Nov 28, 2024 - 13:16

0 95

[VIP] DesignCode: Prototype and Code iOS apps in Figma and SwiftUI

20 topics

All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.

1 Introduction to Prototyping

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

2 Create the Prototype UI

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

3 Card Intro Animation

Animate the Cards / Swipe / Circle / Drag Gesture

4 Swipe Gesture

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

5 Rotate Animation

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

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

7 Figma Plugin and Exporting

Accelerate the design to code process with Figma plugin

8 Text Styles and Alignment

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

9 Simplify your Code

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

10 Text and Secure Fields

Enhancing User Input with State and Bindings

11 Alert

Implementing Alert Management and Input Validation

12 Interactions and ChatGPT

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

13 Create a Parallax ScrollView

Transform a basic ScrollView by adding a stunning parallax effect

14 Mesh Gradient Animation

Learn how to create and animate mesh gradients

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

16 Ripple Visual Effect with Metal Shader

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

17 Navigation Transition

Learn how to animate view transitions using navigation transition

18 Text Transition with Text Renderer

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

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

20 Image Gallery, HueRotation and Swipe Gesture

Create a dynamic SwiftUI photo browser featuring fluid transitions, touch-based

Download

[VIP] DesignCode: Prototype and Code iOS apps in Figma and SwiftUI

20 topics

Tags:

What's Your Reaction?

Related Posts

Payment

Follow Us

Popular Posts