How to wire-frame & design a landing page in Figma 

Hey thanks 🙏 appreciation motivates.. Since i am not well last 6-7 months couldn’t get time to put more videos consistently. Subscribe and will upload more and more videos to our channel in coming days👍

Thanks 😊 addling subtitles or supers will increased (now a days people don’t watch lengthy videos) our video length and that is not good for our channel views. But will do that detailed supers/subtitle video in coming days 👍

Visit Our channel press the bell icon for notification & smash that subscribe button for more videos: ru-vid.com/show-UC9j0a_lW2_qwpEq1BLolBrQ

Would you like to design it?

@@AdeniyiWaheed yes

Thank you 😊

Check this full page design of real estate with bit of prototype also How to set grid & design a full landing page in Figma. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XFrvJWOp5-4.html

sorry you felt that . its speed art video. will do a detailed code on that

Than you 😊

Thanks I think image must’ve stayed up on the text. Just go to layers panel in figma select image layer and draged down below text (all text) layers …👍

Thanks👍

Thanks man

Thanks 😊

Thanks

Hey brother firstly Figma is free. Yes you can do it ai or ps no doubt but Figma is more efficient than ai technically to work for digital also the plug-ins that helped effectively for ui design to hand over to the developer. That you can’t do it easily in ai or photoshop 😊

Just to expand on the previous reply. Figma is purpose built for designing websites and applications. Illustrator is a vector tool used typically for creating print content, logos, posters etc. Photoshop was originally intended for photo editing. So in short, Figma caters specifically for web, app design.

100% perfect 👍

Ai and ps have different purposes. Adobe XD is more comparable to Figma. Figma and XD are softwares purely made for design

True👍

Thanks

Thanks man 👍

well learning ux or ui design takes time. when you do some online course minimum it 4-6 months. but actual learning started when you start working on real projects. I do graphic design since 7-8 years. also self taught online learner. Learning ui design took me less time than usual time but ux design is bigger part than ui design still I am exploring learning. check. these link www.interaction-design.org/literature/topics/ux-design app.uxcel.com/courses you are front end developer then ux design is easier for you.

@@Howtodesign21 thank you man. It was really helpful.

Thanks

Yes wireframes are exactly that, just grey scale boxes with lines and dummy text. However it says in the title of the video "wire-frame AND design" aka user interface design (color, imagery, etc.) This video shows both UX and UI design all in one video. Keep in mind this is not the full process of UX and UI studies but just the end product of it.

Hey it’s totally fine you don’t know the things it’s. Start using figma app. In figma there there is section called plug-ins where get pre-made icon’s which you can use it for free for your design.

When you draw a box frame in inspector panel where you see fill image option there you get image replace option..

Soon Will puting a separate video on grid margin setting where you can get a idea on which artboard like desktop, iPhone iPad or random display 👍 which grid and margins you can set.

For placing image you just need to import image or drag the image in the artbord.

Link is there in video description

I can help you with it

Thanks

Well full landing page design and prototype… check our this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XFrvJWOp5-4.htmlsi=X9YgM26lSH8rIiv4 For more detailed video of all websites pages it will be tooo long video for viewers, but in coming days will be doing a part part video of full website design and prototype…

Hey bro , text panel is there , but have already made text styles to use it while designing. It’s easy. It’s useful when you have brand guidelines of your client👍

Link unsplash.com/photos/man-taking-photo-of-hot-air-balloons-eOcyhe5-9sQ

@@Howtodesign21 thank u❤

Thanks …. Yes its is 👍

Well after this you can give this file to developer and he will covert to HTML and upload it to web. Or if you have webflow, hostinger, xpert app, or framer app etc if you know all these apps you can do it your own👍☀️

Are you get it?

Thanks 🙏 We apologise for the speed of video. It’s purposely kept fast because no one clicks on longer video now a day’s. But still you still watch it. Change the playback speed of video in RU-vid to from normal to 0.25x. Video will look normal to you.👍

@@Howtodesign21 That's how I watched it. It would be very helpful if it had some captions or explanations. Great job though

Appreciated.. will think over your suggestion and used it to our next videos👍

It’s on unsplash

You talking about unsplash???

Go to figma menu select view select ruler 📏 or use shift R

@@Howtodesign21 okay thank you

its mentioned in details bro.. its from unsplash a free image gallery👍

@@Howtodesign21 I can help you

You will get it websites like unsplash, pxels, and so on.. also you creat anything in mid journey

Well that’s your design aesthetic sense, years of design learning and work experience.

@@Howtodesign21 gotcha Is there a technical rule to follow or do you just go by eye? Read some Ui Design books where like shapes/text have to be a certain pixel apart, etc.

Yes rules comes under design learning part as i said. Then there is experience cones rule i follow is 4x4

Hey, we apologise for inconvenience.. this one is speed art video not talking and if we add talking (vo). then this video became so big that no one would watch this, or even click. Because of this new world shorts and reels content. And for a small channel this you tube algorithm go’s against the channel. Soon Will be uploading talking video on different topic..👍

@@Howtodesign21 you should foresee the benefits of doing longer and explained videos. I can asure you it works.

@Decademia yes sure will try step by step increase length of videos soon, thanks again. Appreciated 😎 bro

@@Howtodesign21 I’m sure It’ll work for you. And keep working!

Yes give us time will give you link

It’s there on below video description 👍

Learn webflow its highly effective to create websites in webflow & designig in figma

Convert it into html and css code

@@sanjay6242 any tutorial?

Yes. Apology for that…this video is speed art but tried to explain the important steps from process which we are doing after the slide text slide. Now days people attention time has changed. No one wait for long videos. If you want proper 20 minutes detailed video link reply me here… Support page👍 www.buymeacoffee.com/How2design

Yes… true landing page can many different way… this just a demo little part you can se.. landing page have your best feature and call to action also other more detailed things depending on your brand.👍 if you want we will upload a new video which has a particle demo of one of my clients landing page✌️