Figma UI Design Tutorial: Make a Coffee Café Landing page

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ส.ค. 2024
  • In this tutorial, I have designed (Coffee Café) Landing page and how to add our ideas in designs using Figma software, please comment if any suggestions
    Download Design Reference: bit.ly/3Mxj4Tw
    🛠Free resources mentioned in this video:
    1️⃣ Figma website - www.figma.com/
    2️⃣ Free Figma icons - www.figma.com/....
    3️⃣ Pexels (Free images) - pexels.com/
    4️⃣ Storyset (Free vectors) - storyset.com/
    Music I use: www.bensound.com
    License code: MLVHPXIUU4M18IWT
    -
    Thanks for watching!
    ----
    #Figma #FigmaTutorial #uxdesign #whitespacs #coffee
    Copy Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for 'Fair Use'
    for purposes such as criticism, comment, news reporting, teaching, scholarship and research, Non-profit, educational or personal use tips the balance in favor of fair use.

ความคิดเห็น • 38

  • @ideatechgraphics
    @ideatechgraphics 6 หลายเดือนก่อน +1

    God bless, i have been using your landing page design to practice big time

    • @whitespacs
      @whitespacs  6 หลายเดือนก่อน

      Glad it was helpful!

  • @jyliansmm
    @jyliansmm 6 หลายเดือนก่อน +1

    Great video! The links provided made this easy to recreate with a bakery cafe too!

    • @whitespacs
      @whitespacs  6 หลายเดือนก่อน

      Glad it was helpful!

  • @Bilson_Curioso
    @Bilson_Curioso 5 หลายเดือนก่อน +2

    Nice

    • @whitespacs
      @whitespacs  5 หลายเดือนก่อน

      Thanks

  • @mdgolamrabby156
    @mdgolamrabby156 8 หลายเดือนก่อน +2

    very good pls always provide imges icons and fonts i'm your subscriber .

  • @sinanshakeri-mp7cd
    @sinanshakeri-mp7cd ปีที่แล้ว +1

    i love this
    😍😍😍😍

  • @qara8811
    @qara8811 ปีที่แล้ว +1

    So that we can get the exact resources. With the links provided, we would have to go look for the resources and that will be difficult finding

    • @whitespacs
      @whitespacs  ปีที่แล้ว +2

      Sure
      drive.google.com/drive/folders/1Et893L39hXHM5wNPPL1gd0ScKtmDKYkL?usp=sharing

  • @henrasimanjuntak5920
    @henrasimanjuntak5920 ปีที่แล้ว +2

    I changed it to 1080*2 like in the 06.20 minute video and I ran the results which were huge.
    why is that please?

    • @whitespacs
      @whitespacs  ปีที่แล้ว +1

      First, choose the main frame, and then multiply the height by 2.

    • @whitespacs
      @whitespacs  ปีที่แล้ว +1

      Another way is to choose the main frame and drag it down while pressing control.

    • @henrasimanjuntak5920
      @henrasimanjuntak5920 ปีที่แล้ว +1

      @@whitespacs hello sir, I have tried both methods but it still doesn't work. is there any other way?

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      @@henrasimanjuntak5920 You can share your figma file with me on my email.

  • @sweetybindu2239
    @sweetybindu2239 10 หลายเดือนก่อน +1

    Hello sir/madam I'm becoming better at design because of your videos. If possible can you please make a video on photoshop because how to make that background image shape (Curves)

    • @whitespacs
      @whitespacs  10 หลายเดือนก่อน +1

      Thankyou. I am glad to hear that. You can use any custom shape PNG images and mask it in Figma with rectangle and change the color of your choice.

  • @ankitapandey-oi1hm
    @ankitapandey-oi1hm ปีที่แล้ว +1

    My texts are not coming over the image, I did bring to front but I can't see them

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      I think the text is outside the main frame; check the left panel.

  • @nathan-sg7cu
    @nathan-sg7cu 9 หลายเดือนก่อน +1

    Great work, but you need to work on your typography, and button design. Your micro layouts needs some work.

    • @whitespacs
      @whitespacs  9 หลายเดือนก่อน

      Thank you for your feedback and i will certainly take it into consideration.

  • @mirkomihailo8298
    @mirkomihailo8298 2 หลายเดือนก่อน

    What typography scale do you use?

  • @sonamtamang4154
    @sonamtamang4154 ปีที่แล้ว +1

    how do you cut that background pic in that types of texture

    • @whitespacs
      @whitespacs  ปีที่แล้ว +1

      Download any custom-shaped images and make a mask with a background image.
      images: drive.google.com/drive/folders/1Et893L39hXHM5wNPPL1gd0ScKtmDKYkL

  • @user-rh2po7on5k
    @user-rh2po7on5k ปีที่แล้ว +1

    Hi. Please what font was used ?

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      Yanone Kaffeesatz and Poppins

  • @maha2531
    @maha2531 ปีที่แล้ว +1

    how to do that cuts in the bottom??

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      Download any custom-shaped images and make a mask with a rectangle to change colors.
      images: drive.google.com/drive/folders/1Et893L39hXHM5wNPPL1gd0ScKtmDKYkL

  • @user-vg3fq3ue6q
    @user-vg3fq3ue6q 10 หลายเดือนก่อน +1

    How you added video ?

    • @whitespacs
      @whitespacs  10 หลายเดือนก่อน +1

      This features is available in professional and higher plans, however you can use GIF in the starter plan by converting your video to GIF and importing the GIF file.

  • @mdgolamrabby156
    @mdgolamrabby156 8 หลายเดือนก่อน

    Could you pls profide figma pro for free

  • @devakichandrika3516
    @devakichandrika3516 ปีที่แล้ว +1

    Where did you get the images

    • @whitespacs
      @whitespacs  ปีที่แล้ว +2

      freepik, Canva, pexels

  • @user-rh2po7on5k
    @user-rh2po7on5k ปีที่แล้ว +1

    Hi. Please what font was used ?

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      Yanone Kaffeesatz and Poppins

  • @user-rh2po7on5k
    @user-rh2po7on5k ปีที่แล้ว +1

    Hi. Please what font was used ?

    • @whitespacs
      @whitespacs  ปีที่แล้ว

      Yanone Kaffeesatz and Poppins