DesignCode
DesignCode
  • 1 504
  • 14 511 966
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
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
Prototype with Variables in Figma
zhlédnutí 10KPřed 11 měsíci
Prototype with Variables in Figma
Design an app for visionOS in Figma
zhlédnutí 27KPřed rokem
Design an app for visionOS in Figma
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
Turn Midjourney UI to Web Design
zhlédnutí 42KPřed rokem
Turn Midjourney UI to 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
Futuristic Tab Bar Animation in Figma
zhlédnutí 18KPřed rokem
Futuristic Tab Bar Animation in Figma
iOS Design with Midjourney and Figma
zhlédnutí 9KPřed rokem
iOS Design with Midjourney and Figma
Web App Design with Midjourney in Figma
zhlédnutí 144KPřed rokem
Web App Design with Midjourney in Figma

Komentáře

  • @KristaWalters-p2x
    @KristaWalters-p2x Před hodinou

    Harris Betty Young Susan Anderson Kimberly

  • @user-ey6cr2ib6d
    @user-ey6cr2ib6d Před 5 hodinami

    You can help me

  • @yhlasgoshjanov186
    @yhlasgoshjanov186 Před 10 hodinami

    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.

  • @user-sk9gl1db7w
    @user-sk9gl1db7w Před dnem

    i always practice your designs but i request you to please add the prototyping in vedios

  • @inside-rl5pv
    @inside-rl5pv Před 2 dny

    The best channel for learning I am waiting for your design mam....🌹

  • @Sefko1995
    @Sefko1995 Před 3 dny

    the url is not working 😨😨😨😨😨😨😟😟😟😟😟😟

  • @VyomUxUi
    @VyomUxUi Před 3 dny

    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..!

    • @DesignCodeTeam
      @DesignCodeTeam Před 3 dny

      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! 😊

  • @HanselNotionguy
    @HanselNotionguy Před 3 dny

    mugi

  • @BearRilla33
    @BearRilla33 Před 4 dny

    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.

  • @lmarkrol
    @lmarkrol Před 4 dny

    This is what I am searching for

  • @speedyclaxton2174
    @speedyclaxton2174 Před 4 dny

    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.

  • @moooodmusik4906
    @moooodmusik4906 Před 4 dny

    Love the design ! Great work 🎉

  • @olivierturpinlavallee6153

    Thank you Designcode! The best channel for learning

  • @BearRilla33
    @BearRilla33 Před 4 dny

    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.

  • @kneckebro
    @kneckebro Před 5 dny

    what is the benefit of doing this instead of framer?

  • @TejasMali-hg1ki
    @TejasMali-hg1ki Před 5 dny

    I am waiting for your design mam and finally you upload your best design thank u so much ❤😊

  • @debiprasadsena
    @debiprasadsena Před 5 dny

    Nice Tutorial… the Colors are really cool❤ Perfect use of SF Symbols 😍🤘

  • @bjp_for_2024
    @bjp_for_2024 Před 5 dny

    Will you create swift ui design as well

    • @DesignCodeTeam
      @DesignCodeTeam Před 3 dny

      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! 😊

  • @jonnysolaris
    @jonnysolaris Před 5 dny

    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

    • @DesignCodeTeam
      @DesignCodeTeam Před 5 dny

      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.

    • @jonnysolaris
      @jonnysolaris Před 4 dny

      @@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) ?

    • @DesignCodeTeam
      @DesignCodeTeam Před 3 dny

      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. 😊

  • @ShampooAki
    @ShampooAki Před 5 dny

    Awesome work! Love the design ❤

  • @ekabeblessed2916
    @ekabeblessed2916 Před 5 dny

    My love for your tutorials.

  • @lastspoil5547
    @lastspoil5547 Před 5 dny

    Would this be a good UI project for a ux/ui design portfolio?

    • @feelcollins4358
      @feelcollins4358 Před 5 dny

      If you copied it down to the last detail then no, that would be considered stealing other people's work, not a portfolio

    • @DesignCodeTeam
      @DesignCodeTeam Před 5 dny

      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 :)

    • @lastspoil5547
      @lastspoil5547 Před 4 dny

      @@DesignCodeTeam thank you

    • @lastspoil5547
      @lastspoil5547 Před 4 dny

      @@feelcollins4358 thanks. I’m new to ui

  • @Roma-l6f
    @Roma-l6f Před 5 dny

    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 ^^

  • @Hafizfullstack-tl2ci

    Awesome

  • @marcinizynn
    @marcinizynn Před 6 dny

    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?

    • @marcinizynn
      @marcinizynn Před 6 dny

      By the way, when I add an overlay to the Hamburger, Show On is click for me not a tap.

  • @perriebiston8748
    @perriebiston8748 Před 7 dny

    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!!

    • @DesignCodeTeam
      @DesignCodeTeam Před 5 dny

      So happy to hear it’s exactly what you needed! Thanks for the awesome feedback, and keep up the great work!

  • @TimeForTechMinecraft

    Best ever youtube Chanel for coders.

    • @DesignCodeTeam
      @DesignCodeTeam Před 5 dny

      Thank you so much! I’m glad you’re enjoying the channel!

  • @marcusfinixtv
    @marcusfinixtv Před 8 dny

    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

  • @mbaborkhan5394
    @mbaborkhan5394 Před 9 dny

    Well done ❤❤❤❤

  • @deepjyotibaishya7576

    Thank you

  • @swarooppatil9151
    @swarooppatil9151 Před 11 dny

    Does API is used in this ??

  • @UIFuture
    @UIFuture Před 12 dny

    Nice bro 😊

  • @MantasVEVO
    @MantasVEVO Před 12 dny

    Dropbox link doesn't work :(

  • @well.done.
    @well.done. Před 13 dny

    All of the psd files are ".dmg" lol

  • @Deyyamdeyyamnakembayam

    Where is the prototype😂?

  • @seancarlopiodo2685
    @seancarlopiodo2685 Před 13 dny

    what command do you use to see those spacing size and margin size those red,?

  • @blackdarkdarkerbleach7100

    As a developer, this video was a nightmare for me.

    • @DesignCodeTeam
      @DesignCodeTeam Před 5 dny

      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!

  • @MonkeyEdits101
    @MonkeyEdits101 Před 14 dny

    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?

  • @habiballaalsaqa6543
    @habiballaalsaqa6543 Před 15 dny

    What about of the presentation

  • @matteomagri5601
    @matteomagri5601 Před 15 dny

    i'm having problem with the assets's link, it doesn't open

  • @wilmertheliooon
    @wilmertheliooon Před 15 dny

    Holy sh1t! I’ve been waiting for something like this for years!!!!!

  • @joshuathomasbrooks9450

    is there a way to modify or request all the questions you want? I want to create questions for my own trivia

  • @TaniaOchoaPLUSPLUS
    @TaniaOchoaPLUSPLUS Před 16 dny

    love this start, first listen to the music. I can't ever start designing without some music. Just helps flow ideas.

  • @Александр-х4д

    Why does my location take so long to load? how to make it faster or instantly

  • @dmabubakkar9840
    @dmabubakkar9840 Před 16 dny

    why you cannot follow the layout

  • @eatshootdrive
    @eatshootdrive Před 16 dny

    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?

  • @nutyga
    @nutyga Před 17 dny

    The Figma file is not showing the local variables so it make this tutorial hard to follow

  • @awe_ebenezer
    @awe_ebenezer Před 17 dny

    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?

    • @awe_ebenezer
      @awe_ebenezer Před 16 dny

      @designcode, I need your help pls. Kindly respond to thus message.😊

  • @rahuljamba5846
    @rahuljamba5846 Před 18 dny

    Great

  • @ahmed11782
    @ahmed11782 Před 18 dny

    You are Awesome. Please Create a complete ecommerce website turorial.