UI Design Livestream: Variants, Prototyping and Interactive Components in Figma

Опубликовано: 08 Октябрь 2024
на канале: DesignCode

12,314

479

In this video, we’re going to make our design more dynamic with variants and learn how to prototype in Figma using Smart Animate and Interactive Components

Techniques discussed
iOS design
Variants: https://www.figma.com/best-practices/...
Smart Animate
Interactive Components
Design System

Timeline
0:00:00 - Welcome
0:01:17 - Tip on starting a project
0:03:21 - Variants
0:13:48 - Flow Prototyping
0:20:49 - Prototyping Animation
0:30:21 - Variant File in Community
0:32:19 - Interactive Components
0:44:22 - UI Reviews
1:13:03 - Questions and Answers

💾 Download source file (pro only): https://designcode.io/ui-design-lives...

Resources
🎨 Figma design tool: https://www.figma.com
📕 Design Systems Repo: https://designsystemsrepo.com/design-...
📕 SF Fonts: https://developer.apple.com/fonts
📱 SF Symbols: https://developer.apple.com/sf-symbols
📱 Dynamic Type: https://developer.apple.com/design/hu...
🍔 Illustrations: https://shape.so
🤳 Phone Mockups: http://angle.sh

Learn UI Design
🖌 UI Design for developers: https://designcode.io/ui-design
🌈 Design system in Figma: https://designcode.io/figma
🎨 Figma Handbook: https://designcode.io/figma-handbook
📱 iOS Design Handbook: https://designcode.io/ios-design-hand...

Learn SwiftUI
📱 Build an app for iOS 13: https://designcode.io/swiftui
📱 Build an app for iOS 14: https://designcode.io/swiftui-ios14
🛠 SwiftUI Handbook: https://designcode.io/swiftui-handbook

DesignCode
💬 Discord:   / discord
🐦 Twitter:   / designcodeio
📸 Instagram:   / mengto
📱 iOS App beta: https://testflight.apple.com/join/dr7...