![DesignCode](/img/default-banner.jpg)
- 1 504
- 14 511 966
DesignCode
Canada
Registrace 2. 01. 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.
Design a Car mobile app for iOS 18 in Figma
You'll learn to design a Car control app from scratch in Figma, focusing on creating a complex design to enhance your Figma skills. Full course: designcode.io/design-and-prototype-for-ios-18
You'll use custom shapes, create progress rings with the arc tool, apply gradients, use blurs to make your design stand out, and create layouts using Auto Layout. Additionally, you'll understand and customize UI kits for consistency, develop wireframes focusing on structure and functionality, apply Apple's typography guidelines to enhance readability and accessibility, integrate SF Symbols 6 for cohesive and attractive icons, leverage Figma's Auto Layout to build responsive designs, and understand color theory and Apple's color guidelines to create dynamic styles and gradients.
My Figma File
➡www.figma.com/community/file/1402695433852400086/design-and-prototype-ios-18-community
What You'll Learn:
-UI Kits: Understand and use UI kits to speed up your design process and ensure consistency.
-Create Wireframes: Develop wireframes to serve as the blueprint for your app, focusing on structure and functionality.
-Typography: Learn the basics of typography and apply Apple's guidelines to enhance readability and accessibility.
-Integrate SF Symbols 6: Add SF Symbols to create cohesive and attractive icons, improving user navigation.
-Implement Auto Layout: Use Figma's Auto Layout to build responsive designs that adapt to various screen sizes.
-Choose and Apply Colors: Understand color theory and Apple’s color guidelines to create dynamic color styles and gradients.
0:00 Intro
3:50 UI kits
9:48 Wireframe
15:30 Typography
25:28 SF symbols
35:38 Auto Layout
49:12 colors
1:03:47 Gradients
Follow me
➡ sourasith.design
➡ titepommee
➡www.tiktok.com/@sourasith.design
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on CZcams
➡ czcams.com/channels/TIhfOopxukTIRkbXJ3kN-g.htmljoin
🚀 Follow this course on Design+Code's website
➡ designcode.io/ios18
#figma #uidesign #figmadesign
You'll use custom shapes, create progress rings with the arc tool, apply gradients, use blurs to make your design stand out, and create layouts using Auto Layout. Additionally, you'll understand and customize UI kits for consistency, develop wireframes focusing on structure and functionality, apply Apple's typography guidelines to enhance readability and accessibility, integrate SF Symbols 6 for cohesive and attractive icons, leverage Figma's Auto Layout to build responsive designs, and understand color theory and Apple's color guidelines to create dynamic styles and gradients.
My Figma File
➡www.figma.com/community/file/1402695433852400086/design-and-prototype-ios-18-community
What You'll Learn:
-UI Kits: Understand and use UI kits to speed up your design process and ensure consistency.
-Create Wireframes: Develop wireframes to serve as the blueprint for your app, focusing on structure and functionality.
-Typography: Learn the basics of typography and apply Apple's guidelines to enhance readability and accessibility.
-Integrate SF Symbols 6: Add SF Symbols to create cohesive and attractive icons, improving user navigation.
-Implement Auto Layout: Use Figma's Auto Layout to build responsive designs that adapt to various screen sizes.
-Choose and Apply Colors: Understand color theory and Apple’s color guidelines to create dynamic color styles and gradients.
0:00 Intro
3:50 UI kits
9:48 Wireframe
15:30 Typography
25:28 SF symbols
35:38 Auto Layout
49:12 colors
1:03:47 Gradients
Follow me
➡ sourasith.design
➡ titepommee
➡www.tiktok.com/@sourasith.design
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on CZcams
➡ czcams.com/channels/TIhfOopxukTIRkbXJ3kN-g.htmljoin
🚀 Follow this course on Design+Code's website
➡ designcode.io/ios18
#figma #uidesign #figmadesign
zhlédnutí: 4 720
Video
Prototype and Code iOS apps in Figma
zhlédnutí 10KPřed měsícem
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. Pl...
Master Responsive Layouts in Figma
zhlédnutí 7KPřed 2 měsíci
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
zhlédnutí 7KPřed 2 měsíci
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
zhlédnutí 9KPřed 3 měsíci
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
zhlédnutí 11KPřed 3 měsíci
Useful Figma AI Plugins in 2024 that will speed up your design workflow
Design and Prototype a Delivery App for iOS in Figma
zhlédnutí 23KPřed 4 měsíci
Design and Prototype a Delivery App for iOS in Figma
Build an Interactive Site with Wix Studio - Free course
zhlédnutí 12KPřed 4 měsíci
Build an Interactive Site with Wix Studio - Free course
Create 3D UI for iOS and visionOS in Spline - Free Course
zhlédnutí 20KPřed 4 měsíci
Create 3D UI for iOS and visionOS in Spline - Free Course
A Step-by-Step Smart Home Design with Figma and Mobbin
zhlédnutí 12KPřed 4 měsíci
A Step-by-Step Smart Home Design with Figma and Mobbin
Master No-Code Web Design with Framer - 4-hour Free Course
zhlédnutí 153KPřed 5 měsíci
Master No-Code Web Design with Framer - 4-hour Free Course
UI/UX Web Design with Figma and Mobbin
zhlédnutí 9KPřed 5 měsíci
UI/UX Web Design with Figma and Mobbin
Create 3D UI Interactions for Websites with Spline - Free course
zhlédnutí 376KPřed 8 měsíci
Create 3D UI Interactions for Websites with Spline - Free course
UI Design Essentials: Creating Buttons in Design Systems
zhlédnutí 8KPřed 9 měsíci
UI Design Essentials: Creating Buttons in Design Systems
Prototype Beautiful iOS Interactions & Transitions in Figma
zhlédnutí 12KPřed 11 měsíci
Prototype Beautiful iOS Interactions & Transitions in Figma
UI Design a Travel App in Figma from scratch
zhlédnutí 27KPřed 11 měsíci
UI Design a Travel App in Figma from scratch
Design and Prototype for iOS 17 in Figma
zhlédnutí 16KPřed rokem
Design and Prototype for iOS 17 in Figma
Midjourney Web Design - Depth Animation and Prototyping
zhlédnutí 26KPřed rokem
Midjourney Web Design - Depth Animation and Prototyping
Midjourney UI Icons and Logo Web Design
zhlédnutí 129KPřed rokem
Midjourney UI Icons and Logo Web Design
Ultimate Guide to Midjourney V5 for UI Designers
zhlédnutí 46KPřed rokem
Ultimate Guide to Midjourney V5 for UI Designers
Midjourney Concept to Web Design Review
zhlédnutí 27KPřed rokem
Midjourney Concept to Web Design Review
Turn Midjourney Illustration to Vector in Figma
zhlédnutí 149KPřed rokem
Turn Midjourney Illustration to Vector in Figma
Design and Prototype Apps with Midjourney and Figma
zhlédnutí 22KPřed rokem
Design and Prototype Apps with Midjourney and Figma
Build Beautiful Apps with GPT-4 and Midjourney
zhlédnutí 18KPřed rokem
Build Beautiful Apps with GPT-4 and Midjourney
Web App Design with Midjourney in Figma
zhlédnutí 144KPřed rokem
Web App Design with Midjourney in Figma
Harris Betty Young Susan Anderson Kimberly
You can help me
This is the best course on the CZcams about the figma variable s I have ever seen. Thanks a lot. I really appreciate your job.
i always practice your designs but i request you to please add the prototyping in vedios
The best channel for learning I am waiting for your design mam....🌹
the url is not working 😨😨😨😨😨😨😟😟😟😟😟😟
Whoah! This is a fantastic Figma car control app tutorial..! This video is absolutely amazing! I learned SO much about using Figma to create a complex design, from UI kits and wireframing to typography, SF Symbols, Auto Layout, colors, and gradients. Seriously, your explanation of each step was crystal clear and easy to follow, even for someone like me who's still getting the hang of Figma. This is exactly what I needed to take my Figma skills to the next level. Huge thanks to the DesignCode team for putting this together..! I'll definitely be checking out the full course and following you guys for more awesome tutorials. Big thumbs up..! P.S. Your Figma file is a lifesaver - thanks for sharing that too..!
Thank you so much! I'm really glad you enjoyed the course and found it helpful. It’s awesome to hear that it’s helping you level up your Figma skills. Have fun with the Figma file, and stay tuned for more! 😊
mugi
When I create a new section the new section will not go to the next section below but instead stays in my hero stack. How can I make the new section that I create stack under the previous section vertically? Please help, thanks.
This is what I am searching for
when doing @StateObject var locationManager = locationManager(). i end up with an error that just says "circular reference" any ideas why ? my code up to this point has been exactly the same as in the video.
Love the design ! Great work 🎉
Thank you! 😊
Thank you Designcode! The best channel for learning
Wow, thanks!
I have a question. Every time I move text around that is already inside a frame, the text jumps out of the frame and below every other layer. I then have to manually place it back inside the frame so that it is visible in preview, tablet and phone mode. This gets annoying and cumbersome. How do I move text around and have it stay inside the frame? Are there any particular settings that I need to adjust in framer? Thanks a bunch.
what is the benefit of doing this instead of framer?
I am waiting for your design mam and finally you upload your best design thank u so much ❤😊
Most welcome 😊
Nice Tutorial… the Colors are really cool❤ Perfect use of SF Symbols 😍🤘
Thanks a lot 😊
Will you create swift ui design as well
I’m glad you’re interested! In the course, I’ve covered how to implement the design in React Native. We’ll also be launching a new course on SwiftUI soon, featuring an AI app. Stay tuned! 😊
The voiceover isn't the same voice as the one at the start of the video I think, but it's a really nice voice
Haha, you caught me! I start off speaking, but then I switch to an AI version of my voice to make sure everything’s clear since my English isn’t perfect. I also have videos where I use my real voice the whole time.
@@DesignCodeTeam It was confusing since the 2nd voice has the exact same tone but clearer pronunciation! Yours is a perfect use case of AI voices. Is this your own business, and you do all of the work on producing the entire things (figma libraries, website, videos) ?
Thanks for asking! We’re a team here at DesignCode. I focus on design, while others handle coding and different aspects. I’m not the one managing the website, but we all collaborate to bring everything together. 😊
Awesome work! Love the design ❤
Thank you! 😊
My love for your tutorials.
Thank you! Glad you like it :)
Would this be a good UI project for a ux/ui design portfolio?
If you copied it down to the last detail then no, that would be considered stealing other people's work, not a portfolio
To practice your design skills, go ahead! But for your portfolio, try to add a little touch of your personality to make it truly yours :)
@@DesignCodeTeam thank you
@@feelcollins4358 thanks. I’m new to ui
Hi! So impressive… Please, make the link to the Assets permanent in Dropbox, many guys wanna do and can’t download it. Me too, dreaming to create this beautiful ^^
Awesome
I had an issue with the hamburger menu. I have tested the website on my mobile and when I would likte to open the burger menu it needs double tap to open. When I tap once it doesnt respond. Can you help me?
By the way, when I add an overlay to the Hamburger, Show On is click for me not a tap.
FINALLLLYYYY! As soon as I hit play, the first things mentioned were designing with ONLY Auto Layout and adaptivity. As shocking as it is, I've been struggling to find tutorials using the industry standards of building components and technical restrictions in a real world project. This is worth it's weight in gold. THANK YOU!!
So happy to hear it’s exactly what you needed! Thanks for the awesome feedback, and keep up the great work!
Best ever youtube Chanel for coders.
Thank you so much! I’m glad you’re enjoying the channel!
Amazing, I'm just curious, would it be possible to do this with programs like Web Flow or Framer? And see the same result with animation, etc.? I would appreciate an answer or a tutorial if possible, thanks
Well done ❤❤❤❤
Thank you :)
Thank you
Does API is used in this ??
Nice bro 😊
Thanks 😄
Dropbox link doesn't work :(
All of the psd files are ".dmg" lol
Where is the prototype😂?
what command do you use to see those spacing size and margin size those red,?
Press on "Option" :)
As a developer, this video was a nightmare for me.
We actually have a course on building this design with SwiftUI-it might be just what you need to make things easier. Check it out, and I hope it helps!
hey i'm getting an error. the code " location = locations.first?.coordinate" the error says Value of type 'CLVisit' has no members 'first'. what do i do?
What about of the presentation
i'm having problem with the assets's link, it doesn't open
Holy sh1t! I’ve been waiting for something like this for years!!!!!
is there a way to modify or request all the questions you want? I want to create questions for my own trivia
love this start, first listen to the music. I can't ever start designing without some music. Just helps flow ideas.
Glad you enjoy it!
Why does my location take so long to load? how to make it faster or instantly
why you cannot follow the layout
Firstly, thank you for this, really good so far. Quick question: 33.29 You are making the distances between the containers the same. How are you altering them/ both at the same time to an equal spacing?
The Figma file is not showing the local variables so it make this tutorial hard to follow
I don't really understand how you designed those transparent sections copied from Figma and pasted to Framer. Is their a course on that pls?
@designcode, I need your help pls. Kindly respond to thus message.😊
Great
You are Awesome. Please Create a complete ecommerce website turorial.