Designing an e-Bike Landing Page UI Design in Figma - Speed Art Tutorial

[@whatsoeverimin]

I don't know who you are, but you are literally what I was looking for in this period of my life. Even though there are no "millions of views" yet, I want you to know - you are not just sharing your masterpiece - you inspire

[@Coen]

Hi Ne Boe, Thank you for your compliment, that's what I do it for. It's not about millions of views, subscribers or whatever. The goal is always to inspire and help people where needed.

[@markopolo2224]

there are not millions of views

[@devestrella]

@@markopolo2224 lol

[@Coen]

That’s correct.

[@believer.1204]

Does figma provide you the code for the design which you created??

[@Coen]

*Exciting News! 🔥 The download is now available for this amazing resource! 🚀* coenjanssen.gumroad.com/l/cowbow-ebike

[@lawdful2154]

saw the comments, looked at the subscribers i didnt even watch the video yet and it warms my heart how supportive they are. hope one day you’ll blow up and reach whats meant for your potential

[@believer.1204]

Does figma provide you the code for the design which you created??

[@yaxxee]

Thank you so much for the inspiration. Watching these videos is helping me to create more professional designs.

[@Coen]

Thank you Yaxxee, We'll be back soon to continue to inspire you.

[@hanaahmed9000]

​@@Coenwhy menu in put in center?

[@Coen]

Just for fun! ✨

[@fishbarbeque8540]

SIR!!! you are mad skilled OMG!

[@Coen]

OMG! 🙀

[@fishbarbeque8540]

@@Coen OMG!

[@muhamedtahiri2047]

the design is so awesome and precise keep it up btw i'm 15 and just started learning figma

[@Coen]

That’s cool! 😉

[@kani729]

that looks super pro lol

[@RajaVelforyou]

Great tutorial - I really liked it

[@devestrella]

That is my first time watching a Figma tutorial and the first is already really good. thanks for the amazing content man. All the best S2

[@Coen]

Thank you! Hope to see you back soon.✌🏼

[@devestrella]

@@Coen yeah of course I'll be here soon 👏

[@believer.1204]

Does figma provide you the code for the design which you created??

[@devestrella]

@@believer.1204 no, bro, it doesn't provide, but you'll have the final product design and get inspired and oriented by it

[@AbdullahQureshi-s9j]

Where do you get such heavenly inspiration for your designs?

[@pavilionhp2896]

i tried copying you ...tried much and got some results not as much as yours but I learned a lot about colour grading thank you!

[@Coen]

Cool! Great job 🤞🏼

[@pavilionhp2896]

@@Coen 😍

[@FatehAliTeepu-w3y]

You make me cry , developers always cry😢

[@fatimarasheed-fj6jl]

I loved it you r such an amazing designer .Ive 1 question how to get those components ?

[@MohanaKumar-xy5xm]

Clean✨

[@Coen]

Thank you, Mohana!

[@gtxstudio]

I truly love your channel. Keep doing the best work.

[@Coen]

Thanks!

[@alexandrer054]

I like this design

[@RayanAdelAlJebbawi]

😍😍 super cool

[@Coen]

Thank you, Rayan!

[@Alikk784]

i wish i one day reach your level

[@Coen]

You can, for sure!

[@manon3054]

So inspiring! Thanks!

[@Coen]

You’re welcome, Manon!

[@happyhoppers22]

Thanks a ton buddy

[@Coen]

You're welcome!

[@zapeeosheikh]

❤️❤️❤️❤️ Wow Amazing Work you work is published on telegram UI Group 😀❤️❤️❤️ great Achievement

[@Coen]

Thank you, Zapeeo!

[@GelloMello-j9z]

So good

[@keen_priya2858]

I tried to copy you..and got good results. Thank you for this inspiration!!❤️

[@Coen]

You’re welcome!

[@s7234]

this is great!

[@Coen]

This is a great comment!

[@synriser6742]

That's a really nice design.

[@Coen]

That’s a very nice comment.

[@Pavan-735]

I saw your design in someone's portfolio

[@Coen]

Where? 😱

[@reclusiveboy]

good video but it would be nice if u add voice over or captions... couldn"t catchup which options you are going and clicking.

[@Coen]

From now on, I will!

[@Faramation]

Which plugin you have used for icon's

[@mrlibes1]

You are the best

[@Coen]

Thank you! 😇

[@rajat-s-kale1771]

Awesome

[@eloketobe]

Very cool design I love it

[@Coen]

Thank you!

[@uidesignwithfigma]

Thanks for the lesson! 🔥

[@Coen]

You're welcome 😄

[@gauravthapaliya4389]

I think it's called hero section landing page means it consists the entire page that user will see when the open the website

[@helenchinweike8080]

I love your videos am a newbie I still Find it very difficult to understand your tutorials Can u explain in words next Time???🙏🙏🙏

[@blackace1996]

Me too please explain the thought process behind it

[@Coen]

Good idea! We’ll be back with ‘words’.

[@Nabhel]

Thanks

[@abdennourkoumad6276]

Nice design ! Where can i find the 3d product assets , like the bike or nike shoes ... ?

[@Coen]

We get our images from royalty-free websites or in the case of a redesign from the official website.

[@bhaskarrau7141]

can you share the links please ? @@Coen

[@vikahakobjanyan]

Hi, this landing page is really amazing, but I can't understand, like is the overlay considered other page.. I mean u combined two pages?

[@dmansa4035]

keren bang

[@believer.1204]

Does figma provide you the code for the design which you created??

[@titanovsky]

Nice

[@Coen]

Thank you!

[@Faramation]

Please don't forget to mention steps in subtitles.it will help to beginner's.

[@letmesay2035]

you have option to watch 0.25x

[@Coen]

We will take that with us, we will be back from September. Thank you!

[@paalzolder]

Nice design! Really like the red hue ;)

[@Coen]

Thank you, Polatic!

[@keazertan]

+ 1 SUBSCRIBER

[@Coen]

+1 LIKE

[@olaoluwaadekeye176]

nice design , what do u use to screen record

[@moiserwibutso4899]

Nice tutorial. By the way, how did you fill that last star in half (red & white)? If anyone else knows please tell me.

[@Coen]

Hi Moise, We duplicated the star, edited it with the pen tool and gave both layers a different color. There are several ways to get to this result, but this is the simplest.

[@joshfernandez8475]

U can use linear colour instead of fill. Much simpler

[@Coen]

@@joshfernandez8475 We're sorry, Josh.

[@santoryu4689]

great design thnk you are you can create a this hero section in flutter or html css js

[@عبدالملك-ي5ه3ي]

Quick question, where did you get the bike image?

[@Coen]

Honestly, just using Google.

[@techwake360]

Nice work

[@Coen]

Thank you, techwake!

[@SaranKannan-tp9kl]

where did you take this cycle images

[@RubabHanif]

Name of the software?

[@Coen]

We’re using Figma.

[@atrocitus9198]

did you also programme it yourself ?

[@Coen]

No, although I do have some knowledge of coding websites, I prefer to leave this to my developer friends.

[@uzairkhan2101]

where can I get this design???

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@nicolasbaque3335]

Hi, your work is amazing and i want to reproduce it but where can i find your assets ? Thanks !

[@Coen]

Hi Nicolas, thank you! Downloads including assets will be available later on this year, currently working on it.

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@sassy6085]

where i can find the assets? it's showing sold out

[@lekoryo5727]

Cho em hỏi làm thế nào để có được component chiếc xe đạp như trên, dùng unplash hay plugins vậy ạ? mong được hồi đáp, em cảm ơn nhiều ạ!

[@Ashiknepal-jp3ce]

bro that cowboy bicycle where to bring

[@uzmanaeem8888]

Plz tell me how did you get that bike asset and how did you made that center circle

[@Coen]

You can now download this file - assets included!

[@abdullahhaider611]

Bro amazing work can send link for assists Bike? plz

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@abdullahhaider611]

I thought Its free to download :)@@Coen

[@Coen]

It is now!@@abdullahhaider611

[@_the_Scaryfinds]

Please tell me where are you getting resources of those pictures of bicycles

[@Coen]

You can now download this file - pictures included!

[@SayanGupta4]

How do we add functionality to the designs...like the buttons working and all?

[@Coen]

Hi Sayan, after designing a website, you can make it functional by prototyping it, which is also possible within Figma. If you want an actual working website in your browser, you'll need to code it. For this, you could achieve it using HTML and CSS.

[@elhor]

Hello, thanks for sharing this. i wanna know what the role of a designer, like you give the design to a front end dev or something else. I wanna know what will come after this and thanks a lot❤

[@itsAnos77]

im not pro with ui ux design but yes i think after this you give the design to a coder or web developper and he brings the design to life, i hope this will help😊

[@leylajafarova9000]

0:40 how did you hide circle? Can you please reply?

[@rafxn3824]

Dude bring the circle in Front of the rectangle

[@pious007]

what software are u using?

[@Coen]

Figma it is!

[@anonymous_squirl]

how to get this cycle or bike any image without background in figma?????anyone

[@venkeyjakkampudi8054]

how did you create the local components like bicycles

[@adebolaadekahunsi611]

What app was used in editing this video? I want to do something like this

[@Coen]

Hi Abebola, For the design we use Figma. We also use various programs to create the videos, including: Adobe Photoshop, Illustrator, Premiere Pro, After Effects and Encoder.

[@bhaskarrau7141]

Bro, can you please provide me the assets ? if you can't can you atleaset tell me the images whether they are svg's or jpg's ?

[@eliad4135]

how to put ellipse inside rectangles

[@NikunjGupta-u2b]

What is the name of the software you used in this video. Please someone help me with it.

[@Coen]

Hi Nikunj, Figma it is! 🤞🏼

[@swatikumari2722]

hey how did u get cycle image in figma asset. ur answer will be appreciated. Thnx

[@Coen]

You have to create a component with '⌥ ⌘ K'. Hopefully this works for you.

[@whiteeagle1157]

which website used for downloading cycle pictures?

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@pavithradesilva6147]

where can i get those icons?

[@dmansa4035]

backsound title sir ?

[@nswathi4822]

Hi...How did you add those images? I am not able to add them exactly like you do. I am not able to add exactly like you as I am able to paste a whole image with a background.

[@mech04tech50]

Are you doing any project in this

[@nswathi4822]

@@mech04tech50 just learning

[@Coen]

What do you mean?

[@Coen]

You can mask images or fill a rectangle for example, within the right panel.

[@hasseebrajpoot4860]

Kindly yh bta dy itni HD pics kesy lae waha,,, Main to Background remove kr rha hu lekin Quality ni thk aa rhi, Kindly bata dy....

[@Coen]

I couldn’t understand it.

[@FatehAliTeepu-w3y]

Im a developer trying to learn ui/ux deisgn , and i will give this service free with development, so i can make things tgat i know😂

[@umarnabiev36]

how you guys are doing this tutorial? By slowing playback speed?

[@Coen]

You can slow down the speed, but it is more a video to inspire you instead of a tutorial.

[@santoshs6586]

0:40 sec how to do it?? can anyone know it???

[@aravinth4745]

LAYER BLUR

[@Coen]

Just try and be creative.

[@budembergdesign95]

The layer blur effect? It's located on the right bottom corner on the effects pannel, just make the blur very exaggerated

[@kentaviotiziano4630]

@@Coen a simply reply would do man some people are trying to learn 🤦🏽‍♂️

[@Coen]

@@kentaviotiziano4630 You got that absolutely right. We sometimes do not have all the time to respond in detail, we apologize.

[@musasibeko9216]

What do you use to export Figma files to html&css

[@Coen]

Hi Musa, There are several ways - from the 'inspect' tab to a plugin to export it. It depends on how you work together in your team or company to build projects from A to Z.

[@kajaljaiswal9846]

Can we please get the project file, like the pictures, font, colours. please

[@Coen]

From the new year we will make any screens available for download. Unfortunately, this does not apply to this one yet, if you are interested, you can always send an email.

[@Fitnesswithsam0]

Your design is amazing bro ..❤️ I will also try this

[@Coen]

Maybe the working file will help you to compare. Thanks for your compliment and good luck!

[@hamedyoube2149]

How you get a bik

[@devcj8962]

I need this but in html and css lol

[@Coen]

Maybe we should do that soon?

[@ezeanaechechinaemerem1979]

Please where can I get the fonts. Cowboy, bycicle etc

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@thefreshprince-t4m]

Laugh out loud, so this software really is just like PowerPoint. Without the slides.

[@Coen]

I think it’s more than that. Why?

[@chelfreyucheoma5362]

Does anyone know how he made the colour of the circle enter inside the square?

[@charlesm.2604]

The "square" is the actual Figma frame, the circle sits inside the frame but its position is in the minus so only a part of it is in the viewport. To make the color "blend" he used a specific effect called "Layer Blur" which gives off this sort of result if you crank it up.

[@chelfreyucheoma5362]

@@charlesm.2604 oh thank you. How did he get the minus position?

[@rxml5]

0:39 how you do it :(

[@bst_bambie1767]

Application ??

[@Coen]

Figma it is!

[@FatihAlhijri]

how to get bike? and logos

[@Coen]

Just create it!

[@Faramation]

Resources?

[@Coen]

Download is now available!

[@ОксанаГрицей]

Hi, why is one part of the circle visible and the other is not? 0:40

[@Coen]

What do you mean?

[@ОксанаГрицей]

@@Coen I don't understand how you put a circle behind a rectangle and then one part of the circle disappears and the other part is on top of the rectangle

[@krishnanandjha785]

​@@ОксанаГрицей its very easy to understand because if your art is in the frame then only in part seen of the circle and out part not visible . And if you out your circle totally from frame then it should be visible whole.

[@dos.santos.trader]

share the project link on figma

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@isumitd9586]

Do you do the code to develop web

[@Coen]

Hi Sumit, what do you exactly mean?

[@isumitd9586]

@@Coen do you code using html css

[@romickkundu6118]

Bro can u pls provide us cycle png.

[@Coen]

Why do you need the exact same image, if I may ask?

[@sneaky_dhaireya]

1:11

[@denisturnsek7217]

Why is everyone starting to design for desktop and not mobile? Isn't mobile use like 95% these days?

[@Coen]

Hi Denis, mobile is used more than desktop these days, that's right. The videos are for inspiration and do not show a realistic process. From January new videos will start in which mobile will certainly be discussed a lot, so who knows that will help you!

[@souravde2029]

so much extra work with the manual spacing and stuff. Why?

[@Coen]

Because it's a kind of 'Dribbble' shot for inspiration. This is not very realistic, but an experiment looking for new catchy elements.

[@erasmus_dickson]

u are to fast

[@gokulsmiley7434]

i am not satisfied

[@Coen]

That’s ok

[@jihadal-nefs-4302]

Hi this video was awsome. How can i contact you? I have a gig for you.

[@Coen]

Just send an email!