![DesignCode](/img/default-banner.jpg)
- Видео 1 359
- Просмотров 14 182 933
DesignCode
Канада
Добавлен 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 wa...
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 wa...
Просмотров: 4 278
Видео
Master Responsive Layouts in Figma
Просмотров 4,7 тыс.14 дней назад
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
Просмотров 4,3 тыс.21 день назад
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 тыс.Месяц назад
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
Просмотров 8 тыс.Месяц назад
Useful Figma AI Plugins in 2024 that will speed up your design workflow
Design and Prototype a Delivery App for iOS in Figma
Просмотров 17 тыс.2 месяца назад
Design and Prototype a Delivery App for iOS in Figma
Build an Interactive Site with Wix Studio - Free course
Просмотров 7 тыс.2 месяца назад
Build an Interactive Site with Wix Studio - Free course
Create 3D UI for iOS and visionOS in Spline - Free Course
Просмотров 18 тыс.2 месяца назад
Create 3D UI for iOS and visionOS in Spline - Free Course
A Step-by-Step Smart Home Design with Figma and Mobbin
Просмотров 10 тыс.3 месяца назад
A Step-by-Step Smart Home Design with Figma and Mobbin
Master No-Code Web Design with Framer - 4-hour Free Course
Просмотров 122 тыс.3 месяца назад
Master No-Code Web Design with Framer - 4-hour Free Course
UI/UX Web Design with Figma and Mobbin
Просмотров 8 тыс.3 месяца назад
UI/UX Web Design with Figma and Mobbin
Create 3D UI Interactions for Websites with Spline - Free course
Просмотров 356 тыс.6 месяцев назад
Create 3D UI Interactions for Websites with Spline - Free course
UI Design Essentials: Creating Buttons in Design Systems
Просмотров 8 тыс.7 месяцев назад
UI Design Essentials: Creating Buttons in Design Systems
Prototype Beautiful iOS Interactions & Transitions in Figma
Просмотров 11 тыс.9 месяцев назад
Prototype Beautiful iOS Interactions & Transitions in Figma
UI Design a Travel App in Figma from scratch
Просмотров 25 тыс.9 месяцев назад
UI Design a Travel App in Figma from scratch
Prototype with Variables in Figma
Просмотров 10 тыс.10 месяцев назад
Prototype with Variables in Figma
Design an app for visionOS in Figma
Просмотров 25 тыс.10 месяцев назад
Design an app for visionOS in Figma
Design and Prototype for iOS 17 in Figma
Просмотров 16 тыс.11 месяцев назад
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
Просмотров 45 тыс.Год назад
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
Просмотров 148 тыс.Год назад
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
Which generates this for you??
I dont have assets in figma ? How can i download it
thank you so much!!! could you share the assets please
At 2:23:05, if you cannot create a component by selecting the 3 content stacks, first select all 3, add frame, then add component, and voila!
I am having trouble with (Spline URL #1: my.spline.design/framercopy-b...) it is not 3d and interactive
Can anyone explain about green boundry of every rectangle at first slide??
How can i get access to the Web Design series in your course?
looks amazing!
hi, it's amazing, thanks for your sharing. but i have problem, when i paste from mobbin to my figma, it;s just a picture, not component.
nice video but the music makes me have anxiety
But i am now also confuse how to add animation in figma text. Like your first intro ? can you please tell me 🙄🤔🤔
Hi...I want complete course on ui ux..how can I get it??
How did he do it? It looks beautiful and I want to know.
Amazing course. Simple and easy to follow and great examples of use cases
Variables are not showing up on variables2css, anyone had the same issue?
May i know what is the name of UI is this pls any one tell me this
Great! I have two courses suggestions: Design and Code VisionOS apps and Flutterflow apps. Thanks!
good stuff
How did you design the select state indicator
You are the best ui teacher ever. I understood really well. Love you.
Happy to hear that!💕
Awesome, can I download this project from any repository ?
Now this looks good on the iPhone screen you selected. But do I really have to copy, paste and adapt every page to the different screens or is there an easier way to align everything, no matter the device (on mobile)?
In case you need code from 52:11 extension Category { static let autoAndTransport = Category(id: 1, name: "Auto & Transport", icon: .car_alt) static let billsAndUtilities = Category(id: 2, name: "Bills & Utilities", icon: .file_invoice_dollar) static let entertainment = Category(id: 3, name: "Entertainment", icon: .film) static let feesAndCharges = Category(id: 4, name: "Fees & Charges", icon: .hand_holding_usd) static let foodAndDining = Category(id: 5, name: "Food & Dining", icon: .hamburger) static let home = Category (id: 6, name: "Home", icon: .home) static let income = Category(id: 7, name: "Income", icon: .dollar_sign) static let shopping = Category(id: 8, name: "Shopping", icon: .shopping_cart) static let transfer = Category(id: 9, name: "Transfer", icon: .exchange_alt) static let publicTransportation = Category(id: 101, name: "Public Transportation", icon: .bus, mainCategoryId: 1) static let taxi = Category(id: 102, name: "Taxi", icon: .taxi, mainCategoryId: 1) static let mobilePhone = Category(id: 201, name: "Mobile Phone", icon: .mobile_alt, mainCategoryId: 2) static let bankFee = Category(id: 401, name: "Bank Fee", icon: .hand_holding_usd, mainCategoryId: 4) static let moviesAndDVDS = Category(id: 301, name: "Movies & DVDs", icon: .film, mainCategoryId: 3) static let financeCharge = Category(id: 402, name: "Finance Charge", icon: .hand_holding_usd, mainCategoryId: 4) static let groceries = Category(id: 501, name: "Groceries", icon: .shopping_basket, mainCategoryId: 5) static let restaurants = Category(id: 502, name: "Restaurants", icon: .utensils, mainCategoryId: 5) static let rent = Category(id: 601, name: "Rent", icon: .house_user, mainCategoryId: 6) static let homeSupplies = Category(id: 602, name: "Home Supplies", icon: .lightbulb, mainCategoryId: 6) static let paycheque = Category(id: 701, name: "Paycheque", icon: .dollar_sign, mainCategoryId: 7) static let software = Category(id: 801, name: "Software", icon: .icons, mainCategoryId: 8) static let creditCardPayment = Category (id: 901, name: "Credit Card Payment", icon: .exchange_alt, mainCategoryId: 9) }
Awesome! I love prototype.
Thank you for the lesson, but the link for Figma file doesn't work((
Sorry about that, here's the updated link: www.dropbox.com/scl/fo/jqx9minp4q2mjnh36myv1/AF0SIYE6WqFxXBLKbHdH6Ys?rlkey=j314s5pkeawrt6hkpvoudums4&st=yds9q0a9&dl=0
practice file is not opening in Dropbox.
Fixed it: www.dropbox.com/scl/fo/jqx9minp4q2mjnh36myv1/AF0SIYE6WqFxXBLKbHdH6Ys?rlkey=j314s5pkeawrt6hkpvoudums4&st=yds9q0a9&dl=0
where to get the resources
How to create a link to my Figma Portfolio?
Do you mean sharing your Figma file as a Portfolio url?
Nice job!!
Thank you !
thank you
You're welcome
❤❤❤❤
thank you for another free course 😄
You're so welcome!
Amazing! Good work
Thank you! Cheers!
It looks amazing. Are you going to take a course on how you did this demo?
Yes, I'm working on a course
Source code? Thank you
All Xcode projects are shared to our members on designcode.io
Very poor explanation for beginners
dont bother 37:50 problems arise when u try to edit it in codeeditor vscode after that point it costs.
Bro you know how to export its code in react without having to buy spline super. I have built these components but now it is saying to buy super to export its code in sandbox
One more please 🙏 …. Very helpful 🤞🏼
best part was you hide your location coordinates .... hahaha
when you move elements how do you get the pixels to next object showing up. For example you aligned everything to the left and moved it to 60 from the edge but I can't get the pixels to show up for me as I move elements
Could you pls explain the process upto prototype
Can you upload total video
Arc isn't free. Not worth it.
Please share the source code if available