DesignCode
DesignCode
  • 1 489
  • 14 382 136
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
Переглядів: 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
Prototype with Variables in Figma
Переглядів 10 тис.11 місяців тому
Prototype with Variables in Figma
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
Turn Midjourney UI to Web Design
Переглядів 42 тис.Рік тому
Turn Midjourney UI to 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
iOS Design with Midjourney and Figma
Переглядів 8 тис.Рік тому
iOS Design with Midjourney and Figma
Web App Design with Midjourney in Figma
Переглядів 143 тис.Рік тому
Web App Design with Midjourney in Figma
Learn Figma Prototyping
Переглядів 24 тис.Рік тому
Learn Figma Prototyping

КОМЕНТАРІ

  • @saadaltwaim9672
    @saadaltwaim9672 7 годин тому

    What is the name of this course

  • @Jamkeena
    @Jamkeena День тому

    most of the material is just copied from the official figma tutorial video ua-cam.com/video/1ONxxlJnvdM/v-deo.html

  • @i.f.7386
    @i.f.7386 День тому

    You should speak in your native language. It’s really painful for my hears. 😢

  • @trattface
    @trattface День тому

    Haven't been able to open the dropbox link. Have tried many times over weeks

  • @nandinisoni9776
    @nandinisoni9776 2 дні тому

    what platform did you use while designing? please do tell!

  • @hafizuddinmohdlowhim8426
    @hafizuddinmohdlowhim8426 2 дні тому

    you are my guru Masta

  • @joelowry7839
    @joelowry7839 2 дні тому

    Thanks for your video. However in my opinion the music is distracting

  • @Mr_kiki0
    @Mr_kiki0 3 дні тому

    simple tip watch on 1.5x

  • @maratudorache8633
    @maratudorache8633 3 дні тому

    how do you switch from dark to light mode and vice versa at the very end when you preview the app?

  • @user-oz1hp7tk5m
    @user-oz1hp7tk5m 3 дні тому

    I DIDINT find the Angular buttom in Fill why ??

  • @skylake315
    @skylake315 4 дні тому

    noo i cant download the templates

  • @simbamadungwe
    @simbamadungwe 4 дні тому

    What about the design of a tablet?

  • @davidnabeiro6703
    @davidnabeiro6703 4 дні тому

    Hey, great video! What is the screen recording/video editing software you use for these zooms and enhanced mouse curser?

  • @MKRart
    @MKRart 4 дні тому

  • @user-ii7xc1ry3x
    @user-ii7xc1ry3x 4 дні тому

    Cool stuff. Drop the link so we can play around with it

  • @Techne89
    @Techne89 4 дні тому

    Teaser for next video ?

  • @Kyomakes
    @Kyomakes 4 дні тому

    So cool

  • @VictorBorah-Invincible
    @VictorBorah-Invincible 4 дні тому

    Those Spline's Assets shared over Dropbox are no longer available. Could you please re-up those?

  • @ahmadfawad
    @ahmadfawad 4 дні тому

    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

  • @andrewselivjorstovs1379
    @andrewselivjorstovs1379 5 днів тому

    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.

  • @Winifredokolo
    @Winifredokolo 5 днів тому

    Mine doesn't have get waves what do i do?

  • @AmatuzZehra
    @AmatuzZehra 5 днів тому

    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.

  • @ragragrec1
    @ragragrec1 6 днів тому

    I cant copy paste at 8:00 portotype doesnt show Why dont you show clearly what part you copy and paste?

  • @BilalHameed-fc3ye
    @BilalHameed-fc3ye 6 днів тому

    please add Prototyping Videos of these apps design

  • @TheWolfgaming245
    @TheWolfgaming245 6 днів тому

    is it working or its just a design?

  • @wajeehaansari6986
    @wajeehaansari6986 6 днів тому

    before starting video do i have to get knowledge of react??

  • @LordJHouse
    @LordJHouse 6 днів тому

    This is absolutely awesome!!! Checkmate Adobe!

  • @blurabbit6476
    @blurabbit6476 7 днів тому

    I need a tutorial for this tutorial

  • @shubhamku044
    @shubhamku044 7 днів тому

    just started learning swift, and this is a great first project to build

    • @DesignCodeTeam
      @DesignCodeTeam 6 днів тому

      Great to hear!

    • @shubhamku044
      @shubhamku044 5 днів тому

      @@DesignCodeTeam can you also add tutorial for uikit project?

  • @stevendesigner
    @stevendesigner 9 днів тому

    Most useful I have found and well made, thanks a lot! 👏

  • @heidar_dev
    @heidar_dev 9 днів тому

    hello thanks goodness for your stunning tutorial actually everybody that are designer need your great and complete design tutorial

  • @owenpatry7812
    @owenpatry7812 9 днів тому

    Super dope

  • @nellykamyshova7729
    @nellykamyshova7729 9 днів тому

    Will the course be available again? The button “Notify me” doesn’t work properly at the website

  • @martinmendivil2522
    @martinmendivil2522 10 днів тому

    Great content

  • @WebDevXpert
    @WebDevXpert 10 днів тому

    Crazy 3D Rotation Effect Using CSS Only : ua-cam.com/video/sy6vI8TlRk0/v-deo.html

  • @tanmaydabhade7745
    @tanmaydabhade7745 11 днів тому

    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

  • @ed61730
    @ed61730 11 днів тому

    Amazing! More courses like this please :) Looking to offer ux spline as part of my 3d ux packages

  • @heidar_dev
    @heidar_dev 11 днів тому

    could you please tell me some info about your stunning monitor my mens the name and the model

  • @zachariahhornes8708
    @zachariahhornes8708 11 днів тому

    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?

  • @precumming
    @precumming 12 днів тому

    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

  • @heidar_dev
    @heidar_dev 12 днів тому

    wonderful ❤

  • @Batmann152
    @Batmann152 12 днів тому

    i fall in love with her..

  • @willyjospin8349
    @willyjospin8349 12 днів тому

    this channel is just amazing....

  • @INVETINVET
    @INVETINVET 13 днів тому

    how to add illustrations to my page ? ))))

  • @showthemevids
    @showthemevids 15 днів тому

    This app looks so cool! Thanks a lot.

  • @matisscukurs5535
    @matisscukurs5535 16 днів тому

    I dont have the "mode" toggle to switch between dark and white

  • @belovethstephen1452
    @belovethstephen1452 16 днів тому

    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?

  • @MrAbbo11
    @MrAbbo11 17 днів тому

    nice work brother. Beautiful and succinct explanation. no bullshit.

  • @emm5582
    @emm5582 17 днів тому

    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!

  • @brianstrout9462
    @brianstrout9462 17 днів тому

    still solid