Figma Design Exercises (Practice for beginners!)

Поделиться
HTML-код
  • Опубликовано: 7 янв 2025

Комментарии • 117

  • @CodeWithChris
    @CodeWithChris  Год назад

    Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups. Create your free account and follow along ⚡cwc.to/figma

  • @amandachen1460
    @amandachen1460 4 года назад +3

    As a first time user of figma, I found this to be super helpful! Please upload more Figma practice videos! Thanks again!

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      We're glad! Stay tuned for more!
      - Kat

  • @kasperkarelse8106
    @kasperkarelse8106 4 года назад +6

    New to Figma and these exercises are great practise. Would definitely like another one!

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Glad you like them! Stay tuned for more. :)
      - Kat

  • @cherryux5158
    @cherryux5158 3 года назад +3

    Thanks so much for these exercises. Great for building confidence, and getting over that gap of "what I want to make versus what I have the skills to make". I'd love to see more exercises/challenges!

    • @CodeWithChris
      @CodeWithChris  3 года назад

      All right, awesome! Proud of your progress! :-) -Arthur

  • @saibharadwaj1430
    @saibharadwaj1430 4 года назад +2

    This is a great video. I wished people would have liked it more. This deserves more appreciation.

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Glad you liked it! Thank you. :)
      - Kat

  • @arulight
    @arulight Год назад +1

    I'm a beginner and it was so fun to follow these exercises! I learnt a lot. Thank you!

  • @airen-f2r
    @airen-f2r 5 месяцев назад

    I just completed the exercises, and it was so much fun!! Thank you so much.

  • @dinatowbinandassociates
    @dinatowbinandassociates 4 года назад +1

    This was very helpful. You have a very soothing style which helps reduce my level of frustration. Thank you!

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Glad to make a positive impact on your learning journey, Dina! We're cheering for you! :-) -Arthur

    • @dinatowbinandassociates
      @dinatowbinandassociates 4 года назад

      @@CodeWithChris Thanks.

  • @suelensu100
    @suelensu100 4 года назад +1

    Congrats Chris, U Know how to teach ! I am from Rio, Brazil and pretty enjoying the contents in your channel! I am a photographer and this design word is totally new for me ! new follower here !

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Very cool! Glad you're enjoying our tutorials!
      - Kat

  • @MsMoniqueLG
    @MsMoniqueLG 4 года назад +1

    Amazing beginners tutorial! Please keep them coming.

  • @SaritaChahar
    @SaritaChahar 2 года назад +1

    This is really very helpful. i was looking something to practice and got this

    • @CodeWithChris
      @CodeWithChris  2 года назад

      Happy to know this. Thank you! -Arthur

  • @nnadoziejuliet5888
    @nnadoziejuliet5888 4 года назад

    This is my first time doing anything related to figma.this was really helpful.we hope to get more.thanks

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Awesome, thank you so much! :-) -Arthur

  • @SoImAlexa
    @SoImAlexa 3 года назад +1

    I'm new to figma and this exercise was super helpful, thanks so much!

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Happy to know that you found this helpful, Alexa! :-) -Arthur

  • @abe10
    @abe10 4 года назад +1

    Good one Chris. I loved the exercise. Looking forward to more figma content!!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Awesome, thank you! More to come!
      - Kat

  • @lisabaranovskaya6971
    @lisabaranovskaya6971 4 года назад +1

    Really liked your tutorial. Easy, but important and helpful exercises!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Glad you liked it! Thank you. :)
      - Kat

  • @AvsSensBest
    @AvsSensBest 4 года назад +1

    I'd be great if Chris could touch on the "what's next" part. I know Figma is just for prototyping but a quick and dirty demo on how he would go about it. i.e. let's say you create a table view cell and you have multiple elements in that cell like a few labels, one button, etc. I also note there is a code tab in sigma which supports swift so a video on all that would be great!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Hello, because figma is about designin im sure you should be able to put ui elements inside a "container" to mimic a tablerow or something
      well see if there can be more advanced figma videos in the future so stay tuned :)
      - Francis

  • @imaobongedet1989
    @imaobongedet1989 4 года назад +1

    So simple and explanatory.. Would love more.

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Thank you! 🙌 Hope you watch our other Figma/app design tutorials. :)
      - Kat

  • @SameenIslam
    @SameenIslam 4 года назад +1

    This is so so good! More of this please!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Thank you! Stay tuned for more!
      - Kat

  • @Matthew-ub2dx
    @Matthew-ub2dx 4 года назад +1

    Thank you so much for this! Made me think some and learned a good bit. Thank you so much for the Figma videos!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      I'm so glad! Thanks for learning with us!
      - Kat

  • @zeddnl6514
    @zeddnl6514 Год назад

    thanks for the exercises! at first i was following through and then before I knew it I was just doing it without the video playing

  • @nileshjdarji
    @nileshjdarji 4 года назад +1

    Just like in storyboard in Xcode can you put constraint values for superview and safe area?

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Hello, the superview is always 0 or the edges of the screen because it is the "base". the safeview is also important because it has the space for the battery level and other notifications, its best not to best with them (if they can even be messed with in the firstplace
      - Francis

  • @tomgarnier4825
    @tomgarnier4825 4 года назад +1

    hi i'm writting to you because i tried the war game with swift and i putted 3 card instead of 2 with a total of 75 cards but i was wondering if it would be possible to add a system where if a card as passed it couldn't appear anymore and furthermore i don't know why but i cannot put the deal button in the buttom center of the app and finally if it could be possible to have a normal yellow button square rounded

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Hello, that seems to be a weird alteration of the war app, i suggest heading over to codecrew.codewithchris.com so we can take a better look to your concerns
      - Francis

  • @julianmartinez7409
    @julianmartinez7409 4 года назад +1

    This is great Chris Thanks!

  • @malekerakaki7042
    @malekerakaki7042 10 месяцев назад

    Enjoyable exercises , I just wanna know how to save those work or how to publish my website

  • @victoriaokon35
    @victoriaokon35 Год назад +1

    So worth it!

    • @victoriaokon35
      @victoriaokon35 Год назад

      I'm only 10 minutes in... and yet so helpful

  • @PhG1961
    @PhG1961 4 года назад +1

    Excellent video ! I've done all the exercises ! Looking for more.... ;-)

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Great job! Stay tuned for more!
      - Kat

  • @christnhvv256
    @christnhvv256 3 года назад +1

    Great exercise!! where cann I find more?

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Figma has a HUGE community! If you want more practice, go check out what others are building or go find some inspiration on Dribbble.com
      @AdrienVillez

  • @nnadoziejuliet5888
    @nnadoziejuliet5888 4 года назад

    This was really helpful and we hope to get more exercises......it really helped me learn stuff.

  • @tomb2599
    @tomb2599 4 года назад +1

    Thank you very much for sharing it! Great Content

  • @furqansiddiqui8129
    @furqansiddiqui8129 2 года назад

    Thaks a lot for the video. Great place to get started with figma!!

  • @zackesses5545
    @zackesses5545 4 года назад +2

    Hi I just made my first original app idea but I when I press my play button that takes me to a new view controller my app crashes and says thread 1: signal SIGBART TERMINATING WITH UNCAUGJT EXEPTION can u please help

    • @zackesses5545
      @zackesses5545 4 года назад +1

      All my outlets are correct

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Hello, please head on over to codecrew.codewithchris.com so we can take a look at your code
      - Francis

    • @zackesses5545
      @zackesses5545 4 года назад

      I got it

  • @scarletcoder3912
    @scarletcoder3912 4 года назад +1

    Amazing video! Just a few suggestions for the future: Memory Match card app, Tic tac Toe or 2048 remake all in swiftUI. :)

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Thanks for the ideas! They're added to our list! :)
      - Kat

  • @Toffyc
    @Toffyc 3 года назад

    Super useful video! Thanks for this, keep up the great work!

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Thanks, Tess! Keep on doing what you do! -Arthur

  • @nilabhshark
    @nilabhshark 3 года назад

    I am new to figma this tutorial is great would love to see more such from you

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Glad to know this, Nilabh! Keep on going! :-) -Arthur

    • @nilabhshark
      @nilabhshark 3 года назад

      Can you suggest me the next video since I am confuse as what to do next

  • @msgreenswede
    @msgreenswede Год назад

    When i try to do the ellipses they don't disappear when they are off the frame. I tried to clip content but i don't have the option. IT seemed to adjust automatically for you. I moved to behind but can still see the full circle outside of the frame. Hopefully someone answers me on this old video

  • @sharmiv1060
    @sharmiv1060 4 года назад

    hii chris, common screen for all sizes of iPhone , cannot we do? . have to do seperately for each of the sizes

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Hello, technically when you do auto-layout it will automatically adjust the ui depending on the iphone that is loading it. the problem is that old iphones i(phone 8 and below )have low resolution so most of the time they will not conform to the designs made on the new iphones
      - Francis

  • @Luism-tz2ey
    @Luism-tz2ey 4 года назад +1

    thanks chris!!!

  • @glenreidy
    @glenreidy 4 года назад +1

    I know this is just for designing a prototype, but can the images be saved as individual image assets?

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Hello, yes you should be able to download the assets individually for you project, it might ask for a pro version though
      - Francis

  • @accord477
    @accord477 4 года назад +2

    It would be nice to create a video that shows how to convert all these beuatiful pics into app. I mean from these pics to an app that really works.

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Figma is just used for prototyping, so its not connected to your Storyboard and you will have to "re-create" your UI in Xcode
      - Francis

    • @adrienvillez
      @adrienvillez 4 года назад +1

      Building the app is the next step. By using the prototype, you can already have an idea of what your app looks like on a device. It’s easier to realize now that a button is too far away for a user, holding the phone single handed, than after production and waste another day or two to code it again to behave better in a certain location. It’s also nice to see if the design, text, plots match well.

  • @ngozi1052
    @ngozi1052 4 года назад +1

    Hello Chris, thanks for your videos tutorial, it helps me a lot in creating an app in the future. But first thing I've a little bit confused is that which I will start first. Because I've learned your serie "How to make an app for Beginners" by Xcode, but then I saw about Figma's function. In my first opinion, I will create a draft demo how my app animates, when I will put them on Xcode, is it true?
    Hoping for your answers ! Thank you so much, Chris !

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Yes, that's correct. Figma is just for prototyping your app. After the app design is finished, you will then have to "re-create" it in Xcode.
      - Kat

  • @ahayder
    @ahayder 3 года назад

    Yes please. More exercise

    • @CodeWithChris
      @CodeWithChris  3 года назад +1

      All right, subscribe for more! :) -Arthur

    • @ahayder
      @ahayder 3 года назад

      @@CodeWithChris 🥰 already subscribed a long time ago for iOS tutorials. Thanks for your reply. I really appreciate it.

  • @eddiega413
    @eddiega413 4 года назад +1

    Hey Chris! Recently I am trying to build a scheduling app, it can add shift and update user profile. Could you tell me how to create a week view (M T W TR F Sa Su) like some scheduling app, and make the exact date showing at the weekview bottom?

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Hello, maybe you can try looking for a calendar api that you can reuse at cocoapods.org so it will be easier for you
      - Francis

  • @wildtraveler8855
    @wildtraveler8855 3 года назад

    Thank you for sharing!

    • @CodeWithChris
      @CodeWithChris  3 года назад

      You're so welcome! -Arthur

    • @wildtraveler8855
      @wildtraveler8855 3 года назад

      @@CodeWithChris I hope you make more demonstration videos for beginners.

  • @zahretelomr
    @zahretelomr 3 года назад

    I added the circle (in the Bubbly app) but i only see full circles. They don't get automatically cropped like it happens in your video. What am I doing wrong?

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Hello, best to post your questions in the CodeCrew forum so that our technical support staff there can assist you. Go here: codecrew.codewithchris.com. Thank you! -Arthur

  • @hammoudh8410
    @hammoudh8410 4 года назад +2

    You are amazing

  • @LionEnthusiast
    @LionEnthusiast Год назад

    Thank you so much!

  • @abdullohbahromjonov781
    @abdullohbahromjonov781 4 года назад +1

    when you will make the videos swift tutorials for elementary

  • @MrIMacro
    @MrIMacro 3 года назад

    Thanks, could you please tell me the reason behind doing this. Why don't we just export these shapes to different resolutions?! why do we have to recreate them?!! you already have them.

    • @CodeWithChris
      @CodeWithChris  3 года назад

      "Hello, well technically recreating it will ensure that it doesn't loose quality even though we are making it bigger or smaller, you can also opt to go with a big resolution one and have an app like ""Prepo"" (free in the appstore) to scale it down for you in different sizes (x3, x2, x1, with x3 being the original size)
      - Francis"

  • @kaliprem3241
    @kaliprem3241 4 года назад

    super. I'm easily understand.

  • @chemicallyexplosive2902
    @chemicallyexplosive2902 4 года назад +1

    Is there instructions in Figma like how to use it? 🤔

  • @moajmasti416
    @moajmasti416 4 года назад +1

    Please sir i m your big fan
    Make a video on white spacing, space breathing in mobile app ui design

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Hello! Thanks for the suggestion!
      - Kat

  • @agnesmazur580
    @agnesmazur580 4 года назад +1

    Moooore please!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      We have more Figma videos on our channel. Check them out! :)
      - Kat

  • @anjalikumari6119
    @anjalikumari6119 2 года назад

    very helpfull. please upload video

  • @hammoudh8410
    @hammoudh8410 4 года назад +1

    And thank you

  • @naturagrup2640
    @naturagrup2640 2 года назад

    Calm explain but the infi iş unefficient.thx

    • @CodeWithChris
      @CodeWithChris  2 года назад

      Hello, can you clarify your concern? Thanks! -Arthur

  • @yixe2253
    @yixe2253 4 года назад +2

    I cheated.

    • @CodeWithChris
      @CodeWithChris  4 года назад

      I hope you still enjoyed it! Thanks for watching this.
      - Kat

    • @adrienvillez
      @adrienvillez 4 года назад

      But... I said you can’t