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.
1. Introduction to Prototyping
Build a fully functional prototype without writing a single line of code—right from your phone.
Duration: 7:07
2. Create the Prototype UI
UI Design using DesignCode UI Kit, Apple’s UI Kit, and creating elements like titles, cards, color palettes, circles, and arcs.
Duration: 16:39
3. Card Intro Animation
Animate cards using swipe, circular motion, and drag gestures to create smooth entry animations.
Duration: 21:16
4. Swipe Gesture
Create swipe-based interactions using drag gestures, After Delay triggers, and Smart Animate for seamless transitions.
Duration: 6:09
5. Rotate Animation
Build a rotating carousel animation with drag triggers and motion effects.
Duration: 6:30
6. New Screen Overlay
Use open overlay to display additional content without navigating away from the main screen.
Duration: 9:14
7. Figma Plugin and Exporting
Speed up the design-to-code process using powerful Figma plugins.
Duration: 5:52
8. Text Styles and Alignment
Ensure font consistency with text styles and alignments that follow the iOS design system.
Duration: 3:49
9. Simplify Your Code
Break your code into reusable components to improve maintainability and clarity.
Duration: 6:42
10. Text and Secure Fields
Enhance user input using state and bindings for both standard and secure text fields.
Duration: 5:18
11. Alert
Implement alert dialogs with input validation and error handling.
Duration: 4:57
12. Interactions and ChatGPT
Leverage AI to automate tasks and generate complex animations faster.
Duration: 7:20
13. Create a Parallax ScrollView
Add a parallax effect to your scroll view for an immersive user experience.
Duration: 6:17
14. Mesh Gradient Animation
Design and animate beautiful mesh gradients for backgrounds or transitions.
Duration: 4:45
15. Progressive Blur Effect
Use a background modifier to dynamically apply and animate blur radius and positioning.
Duration: 4:29
16. Ripple Visual Effect with Metal Shader
Create a ripple animation using Metal Shader for a visually engaging interaction.
Duration: 3:30
17. Navigation Transition
Animate view changes with elegant navigation transitions in SwiftUI.
Duration: 5:32
18. Text Transition with Text Renderer
Implement smooth text and blur transitions using the Text Renderer API.
Duration: 7:18
19. Expanding View Animation
Create an interactive expanding view that rotates and reveals additional content.
Duration: 9:40
20. Image Gallery, Hue Rotation, and Swipe Gesture
Build a dynamic SwiftUI photo gallery with swipe gestures, color effects, and fluid transitions.
Duration: 24:45
