![DesignCode](/img/default-banner.jpg)
- 1 489
- 14 382 136
DesignCode
Canada
Приєднався 2 січ 2018
Teaching designers how to code and developers how to design. We teach the best design tools to build your React, Flutter and Swift apps.
Prototype and Code iOS apps in Figma
Learn to prototype a sleek and interactive wallet interface using Figma. Full course: designcode.io/prototype-and-code
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.
Figma File
www.dropbox.com/scl/fo/jqx9minp4q2mjnh36myv1/AF0SIYE6WqFxXBLKbHdH6Ys?rlkey=j314s5pkeawrt6hkpvoudums4&st=yds9q0a9&dl=0
What You'll Learn
- How to initiate your wallet interface design from a blank canvas.
- How to build and customize a deck of cards, which will be the core element of your wallet.
- How to design a functional dial and a list picker to enhance user interaction and ease of use.
- How to design and organize multiple screens for a seamless user experience.
- How to create reusable components and their variants, optimizing your design process and consistency across the interface.
- How to master the use of after delay triggers and Smart Animate for smooth dynamic animations and interactions.
- Swipe Gesture: Implement intuitive swipe actions to navigate and interact with your wallet interface.
- Carousel Animation: Create engaging animated carousels to display content attractively.
- Open Overlay: Learn how to use overlays for presenting additional information or actions without leaving the current screen.
00:00:00 Intro
00:02:11 DesignCode UI Kit and Apple UI Kit
00:04:57 How to use DesignCode UI kit
00:07:09 Getting started
00:12:15 Card design
00:15:30 Dial
00:18:12 List picker
00:23:48 Components and variants
00:30:43 Deck of cards
00:34:28 Multi Screens
00:36:00 After delay
00:44:14 Conclusion
🚀 Follow this course on Design+Code's website
➡ designcode.io/prototype-and-code
#figma #prototyping #figmatutorial
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.
Figma File
www.dropbox.com/scl/fo/jqx9minp4q2mjnh36myv1/AF0SIYE6WqFxXBLKbHdH6Ys?rlkey=j314s5pkeawrt6hkpvoudums4&st=yds9q0a9&dl=0
What You'll Learn
- How to initiate your wallet interface design from a blank canvas.
- How to build and customize a deck of cards, which will be the core element of your wallet.
- How to design a functional dial and a list picker to enhance user interaction and ease of use.
- How to design and organize multiple screens for a seamless user experience.
- How to create reusable components and their variants, optimizing your design process and consistency across the interface.
- How to master the use of after delay triggers and Smart Animate for smooth dynamic animations and interactions.
- Swipe Gesture: Implement intuitive swipe actions to navigate and interact with your wallet interface.
- Carousel Animation: Create engaging animated carousels to display content attractively.
- Open Overlay: Learn how to use overlays for presenting additional information or actions without leaving the current screen.
00:00:00 Intro
00:02:11 DesignCode UI Kit and Apple UI Kit
00:04:57 How to use DesignCode UI kit
00:07:09 Getting started
00:12:15 Card design
00:15:30 Dial
00:18:12 List picker
00:23:48 Components and variants
00:30:43 Deck of cards
00:34:28 Multi Screens
00:36:00 After delay
00:44:14 Conclusion
🚀 Follow this course on Design+Code's website
➡ designcode.io/prototype-and-code
#figma #prototyping #figmatutorial
Переглядів: 7 998
Відео
Master Responsive Layouts in Figma
Переглядів 6 тис.Місяць тому
Creating responsive layouts is a must-have skill for any UI/UX designer. Full course: designcode.io/figma-responsive-layouts 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 Fig...
Build a React Site from Figma to Codux - 2-hour course
Переглядів 6 тис.Місяць тому
In this course, you'll learn to build a website from scratch using Codux, starting with a Figma template. Sponsored by codux.hopp.to/designcode 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 s...
Create a Flat UI app design in light mode in Figma - for beginners
Переглядів 8 тис.2 місяці тому
Create a Flat UI app design in light mode in Figma - for beginners
Useful Figma AI Plugins in 2024 that will speed up your design workflow
Переглядів 10 тис.3 місяці тому
Useful Figma AI Plugins in 2024 that will speed up your design workflow
Design and Prototype a Delivery App for iOS in Figma
Переглядів 20 тис.3 місяці тому
Design and Prototype a Delivery App for iOS in Figma
Build an Interactive Site with Wix Studio - Free course
Переглядів 10 тис.3 місяці тому
Build an Interactive Site with Wix Studio - Free course
Create 3D UI for iOS and visionOS in Spline - Free Course
Переглядів 19 тис.3 місяці тому
Create 3D UI for iOS and visionOS in Spline - Free Course
A Step-by-Step Smart Home Design with Figma and Mobbin
Переглядів 11 тис.4 місяці тому
A Step-by-Step Smart Home Design with Figma and Mobbin
Master No-Code Web Design with Framer - 4-hour Free Course
Переглядів 141 тис.4 місяці тому
Master No-Code Web Design with Framer - 4-hour Free Course
UI/UX Web Design with Figma and Mobbin
Переглядів 9 тис.4 місяці тому
UI/UX Web Design with Figma and Mobbin
Create 3D UI Interactions for Websites with Spline - Free course
Переглядів 369 тис.8 місяців тому
Create 3D UI Interactions for Websites with Spline - Free course
UI Design Essentials: Creating Buttons in Design Systems
Переглядів 8 тис.8 місяців тому
UI Design Essentials: Creating Buttons in Design Systems
Prototype Beautiful iOS Interactions & Transitions in Figma
Переглядів 12 тис.10 місяців тому
Prototype Beautiful iOS Interactions & Transitions in Figma
UI Design a Travel App in Figma from scratch
Переглядів 26 тис.10 місяців тому
UI Design a Travel App in Figma from scratch
Design an app for visionOS in Figma
Переглядів 26 тис.11 місяців тому
Design an app for visionOS in Figma
Design and Prototype for iOS 17 in Figma
Переглядів 16 тис.Рік тому
Design and Prototype for iOS 17 in Figma
Midjourney Web Design - Depth Animation and Prototyping
Переглядів 26 тис.Рік тому
Midjourney Web Design - Depth Animation and Prototyping
Midjourney UI Icons and Logo Web Design
Переглядів 129 тис.Рік тому
Midjourney UI Icons and Logo Web Design
Ultimate Guide to Midjourney V5 for UI Designers
Переглядів 46 тис.Рік тому
Ultimate Guide to Midjourney V5 for UI Designers
Midjourney Concept to Web Design Review
Переглядів 27 тис.Рік тому
Midjourney Concept to Web Design Review
Turn Midjourney Illustration to Vector in Figma
Переглядів 149 тис.Рік тому
Turn Midjourney Illustration to Vector in Figma
Design and Prototype Apps with Midjourney and Figma
Переглядів 21 тис.Рік тому
Design and Prototype Apps with Midjourney and Figma
Build Beautiful Apps with GPT-4 and Midjourney
Переглядів 17 тис.Рік тому
Build Beautiful Apps with GPT-4 and Midjourney
Futuristic Tab Bar Animation in Figma
Переглядів 18 тис.Рік тому
Futuristic Tab Bar Animation in Figma
Web App Design with Midjourney in Figma
Переглядів 143 тис.Рік тому
Web App Design with Midjourney in Figma
What is the name of this course
most of the material is just copied from the official figma tutorial video ua-cam.com/video/1ONxxlJnvdM/v-deo.html
You should speak in your native language. It’s really painful for my hears. 😢
Haven't been able to open the dropbox link. Have tried many times over weeks
what platform did you use while designing? please do tell!
you are my guru Masta
Thanks for your video. However in my opinion the music is distracting
simple tip watch on 1.5x
how do you switch from dark to light mode and vice versa at the very end when you preview the app?
I DIDINT find the Angular buttom in Fill why ??
noo i cant download the templates
What about the design of a tablet?
Hey, great video! What is the screen recording/video editing software you use for these zooms and enhanced mouse curser?
❤
Cool stuff. Drop the link so we can play around with it
It’s svg.designcode.io
Teaser for next video ?
Yep working on a course
So cool
Those Spline's Assets shared over Dropbox are no longer available. Could you please re-up those?
Hi, thanks for great tutorial. I am having a problem in creating the components of the lists. Create component option is not showing on menu. Can anyone help? at 2:23:09
Amazing video, guys! Well done and thank you on putting this together. Just wanted to let you know that the link to the files has expired.
Mine doesn't have get waves what do i do?
Hello I will say that I love your video but I am facing a little problem with the spline one like my 3D animation is not showing can you tell me why, I am using Firefox.
I cant copy paste at 8:00 portotype doesnt show Why dont you show clearly what part you copy and paste?
please add Prototyping Videos of these apps design
is it working or its just a design?
before starting video do i have to get knowledge of react??
This is absolutely awesome!!! Checkmate Adobe!
I need a tutorial for this tutorial
just started learning swift, and this is a great first project to build
Great to hear!
@@DesignCodeTeam can you also add tutorial for uikit project?
Most useful I have found and well made, thanks a lot! 👏
Glad it was helpful!
hello thanks goodness for your stunning tutorial actually everybody that are designer need your great and complete design tutorial
Glad it was helpful!
Super dope
Will the course be available again? The button “Notify me” doesn’t work properly at the website
Great content
Crazy 3D Rotation Effect Using CSS Only : ua-cam.com/video/sy6vI8TlRk0/v-deo.html
Hi, is there any way to eliminate the first share location process? I tried to run it on appear and it takes a lot of time
Amazing! More courses like this please :) Looking to offer ux spline as part of my 3d ux packages
could you please tell me some info about your stunning monitor my mens the name and the model
So do I just download all the downloadable content and sift through it all or is there certain packages that I need to follow these videos?
Coming here from Bevy as it doesn’t have support for a couple of things I need, and SpriteKit is the alternative and I hate every aspect of SpriteKit. Very much someone who likes to define everything in code without having to deal with a UI Good video but I gotta make Bevy work
wonderful ❤
i fall in love with her..
this channel is just amazing....
how to add illustrations to my page ? ))))
This app looks so cool! Thanks a lot.
I dont have the "mode" toggle to switch between dark and white
Thank you for this detailed, easy to replicate tutorial. However, I cant tend to find fonts on the User Interface guidelines. Maybe I ain't doing something right or the site's been redesigned. Please can someone kindly put me through?
nice work brother. Beautiful and succinct explanation. no bullshit.
Thanks for sharing! What is the tool you're using to show the website in action at the start of the video? (like is it a mockup ..) p.s. great explanation!
still solid