Responsive design figma

Responsive design figma смотреть последние обновления за сегодня на .

Make an Entire Layout Responsive in Figma - In 10 Minutes

102791
3916
90
00:10:55
26.10.2021

Want to learn UI/UX? 🤍​​​​​​​​​ Written tutorial: 🤍 Today, we're going to step into Figma and I'm going to show you how to structure your layouts properly using a combination of constraints and auto-layout. This will make your life as a designer much easier, as it makes creating mobile variations super fast. Starter project file: 🤍 (Copy the frame and paste it in a new Figma document to edit it) Visit the following link to download (free) the “JavaScript Illustration” graphic to use in this project: 🤍 0:00 - Introduction 1:04 - Navigation 2:31 - Heading & Subheading 3:45 - The Cards 5:15 - The Footer 5:50 - Tablet Design 7:40 - Mobile Design Let's get started! #figma #responsive #ui - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: 🤍 My personal FB account: 🤍 Coursetro FB: 🤍 Coursetro's Twitter: 🤍 Join my Discord! 🤍 ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

Responsive Web Design with Figma: Full Walkthrough Tutorial

54412
879
41
00:26:24
28.03.2021

🎓 FREE Figma Course: 🤍 📱 Follow me on Instagram: 🤍 ............................................................................................ ✍️ Need a Design Project? Text me: 🤍 📞 Book a Call: 🤍 My Design Portfolio: 💻 Web Apps: 🤍 🖥 Websites: 🤍 📱 Mobile Apps: 🤍 About Me: I am a Sr. Designer with over 10 years of experience. Having worked with over 40 clients from all around the world, from startups to large enterprises I understand what it takes to create design experiences at scale.

How To Make Responsive Design In Figma - Figma Responsive Design Popular Video

81634
2186
85
00:05:50
28.12.2020

In this figma tutorial we will learn "how to make responsive design in figma". To know more about us, PLEASE visit our website: 👉🏾 🤍 Core Vital Optimized WordPress Theme for Blog tested by Google Lighthouse - 🤍 Our video is showing how to make responsive design in figma, but we also try to cover the following subjects related to this: - figma responsive design - responsive web design in figma - figma responsive web design Please spend 5 minutes to check out this short video, and find out how easily we present this tutorial, so you know everything about figma responsive web design. "how to make responsive design in figma" is a very popular subject searching on the web and we wish you enjoyed this video. _ After watching this figma responsive design tutorial, if you would like to learn designing in figma, we advise you to check out our other figma tutorial videos : 🤍 Grid System by Bootstrap: 🤍 What we show: 0:00 - Intro 0:38 - Responsive Design 5:16 - End Our Products Check our all Premium and Free WordPress Themes - 🤍 #figma #responsive #design Please Visit: Our Blog: 🤍 Follow us, Pinterest: 🤍 Instagram: 🤍 Facebook: 🤍 Twitter: 🤍 Let us know if you enjoyed this figma responsive design tutorial in the comment section :). If you like this, please share this clip on Facebook. Your share can help other people to learn "how to make responsive design in figma", so they can design better. Music by MBB 🤍 // DISCLAIMER ▸ This is NOT a sponsored video. ▸ Some affiliate links are used, which means that I earn a small commission if you click the link and make a purchase. It will not cost you extra but help me create more content for our Audience. ▸ I only recommend things I have had great success with.

Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)

225232
10645
541
00:11:10
22.12.2020

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 🤍 Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 🤍 Outline - Figma Wireframe Kit (350+ components and variants) 👉 🤍 Sign up to my newsletter for exclusive content: 👉 🤍 Follow me on IG (Daily updates): 👉 🤍 = Level up with me: Become a legendary designer: 🤍 Personal portfolio: 🤍 Instagram: 🤍 LinkedIn: 🤍 Twitter: 🤍

Is this the BEST Figma Plugin for Responsive Design? (Tutorial)

22904
892
48
00:11:22
08.11.2021

🤍 Learn UI/UX Like a Pro! Today, we're going to check out the Figma Breakpoints plugin. What is it? Well, it allows you to easily and accurately convey how a given layout should adapt at varying screen sizes. It's like emulating what happens to a real design in a browser when you drag the browser window in and out to simulate different devices sizes. Check out the Breakpoints plugin here: 🤍 0:00 - Introduction 1:45 - Overview 2:55 - Tablet Layout 4:11 - Desktop Layout 5:55 - Large Desktop Layout 6:40 - Using the Breakpoints Plugin 10:29 - Final Thoughts Let's get started! #figma #responsive #breakpoints - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: 🤍 My personal FB account: 🤍 Coursetro FB: 🤍 Coursetro's Twitter: 🤍 Join my Discord! 🤍 ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

Figma's Updated Auto-Layout - Tutorial with Responsive Components

19187
600
32
00:13:55
27.05.2022

🤍 👈 Learn UI/UX Today. Use "UI2022" for 22% Off! Today, I'm going to show you how to create a card component from scratch, which will utilize the newly updated auto-layout features. I will also show you how to quickly create a responsive variation of the component, while utilizing component variants. 0:00 - Introduction 0:45 - Designing the Card 5:26 - Utilizing Auto-Layout 10:00 - Responsive Variant 13:09 - Learn UI/UX Let's get started! #figma #tutorial #autolayout - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: 🤍 My personal FB account: 🤍 Coursetro FB: 🤍 Coursetro's Twitter: 🤍 Join my Discord! 🤍 ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

Responsive Web Design Has Never Been This Easy | Figma Breakpoints

13946
927
25
00:03:54
17.06.2022

It's never been easier to add responsive breakpoints directly into your design tool as is it is now using the plugin Breakpoints. Download the plugin and start using it today ... Remember to Subscribe 🤍 Plugin: Breakpoints 🤍 🏆 //////////// Join my members community to get access to perks: You can get this starting and ending design file 🤍 👋 ////////// Join the Discord Server and meet other creatives 🤍 00:00 Introduction 00:20 Figma Open 01:11 Adding Breakpoints 02:43 Centering Content 🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship 🤍 👋 ////////// Follow me on Social Instagram: 🤍 Twitter: 🤍 📫 ////////// Sign up for my Monthly Newsletter 🤍jesseshowalter.com/newsletter 🖥️ ////////// I build most of my websites using Webflow 🤍 🎵 ////////// Musicbed is the best place to get music for your films. Get your first month free when you purchase an annual subscription by using my coupon code JESSE at checkout. 🤍 📸 ////////// The Equipment I use 🤍

Responsive Design with Auto Layout and Constraints in Figma

40350
1220
133
00:27:04
23.12.2020

Learn how to make your design responsive with Figma's Auto Layout and constraints. In this step-by-step tutorial, I'll be walking you through the process of making a responsive design for the Google homepage that we started in my previous video. This video is part two of my Figma series on the Google search page. If you haven't watched my first video, and specially if you're new to Figma, make sure to check that out before you get into responsiveness! 🤍 If you want to follow along this tutorial with the file open, you can create a duplicate from the link below by clicking on the arrow next to the file title in the top-middle area 👇 🤍 Figma has recently updated their Auto Layout and I'm blown away by how useful it has become to bring truly responsive designs to life. A lot of the tips and practices you'll hear me say throughout the video are things I apply every single day as a product designer. Was this video helpful? Do you have any questions about Auto Layout or anything specific about Figma that you'd like to see in future videos? Any suggestions to improve my videos? Drop them in the comments below! 💬 For a weekly dose of videos and tutorials focused on the skills, practices and principles that'll help you elevate your design, don't forget to hit subscribe! Connect with me here 👋 Twitter: 🤍 Figma: 🤍 Chapters: 0:00 - Intro 2:56 - Top navigation 11:16 - Center area 14:37 - Footer 18:22 - Breakpoints

Responsive Web Design Tutorial by Figma Breakpoints Plugin - Figma Responsive Web Design Tutorial

24707
1075
102
00:12:46
25.05.2021

This responsive web design tutorial by Figma, covers breakpoint-dependent adaptive responsive design, basic typography, type scaling, and Figma constraints and resizing. Please visit: 👉 🤍 Core Vital Optimized WordPress Theme for Blog tested by Google Lighthouse - 🤍 We are BTW, a High-quality WordPress theme builder working since 2010. Figma Breakpoint plugin is a really handy Figma plugin for designers to make adaptive responsive design in Figma. It let you set breakpoints, so that it can response as per screen size. And, for this plugin, Responsive design Figma setup became more dynamic. Typography is vital for any good design. If you are learning UI Design. You should look for typography tutorials. We also covered a basic typography Figma based setup. But there are lot to cover, please comment, if you need a in depth video on Typography Figma. If you are designing a desktop video into a table view design or mobile view design. You need to understand Type Scale. Type scaling is vital for adaptive design. We did discuss in this Figma tutorial how to do type scale in Figma. In Figma constraints and resizing is another thing to understand. If don’t set the constraints properly, the frames will not resize properly. We showed how to do that too. #AdaptiveLayout #FigmaDesign #FigmaTutorial Our Products Check our all Premium and Free WordPress Themes - 🤍 Reference Links Responsive Design Figma 🤍 Google Guideline 🤍 Apple Guidelines 🤍 We Covered, • responsive web design tutorial, • figma breakpoints, • responsive design figma, • typography figma, • type scale, • figma constraints and resizing, Please Visit Our Blog: 🤍 Follow us, Pinterest: 🤍 Instagram: 🤍 Facebook: 🤍 Twitter: 🤍 If you enjoy the tutorial video, you can help us with a LIKE as well as give your feedback in the comment section. We will greatly appreciate it if you share this "Responsive Web Design Tutorial by Figma Breakpoints Plugin " on Facebook. Your share can help other people to learn Designing better UI using Figma. Music by MBB 🤍 // DISCLAIMER ▸ This is NOT a sponsored video. ▸ Some affiliate links are used, which means that I earn a small commission if you click the link and make a purchase. It will not cost you extra but help me create more content for our Audience. ▸ I only recommend things I have had great success with.

Figma Tutorial: Design a Responsive Table (Master AutoLayout!!)

44933
1739
97
00:10:11
13.09.2021

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 🤍 Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 🤍 Outline - Figma Wireframe Kit (350+ components and variants) 👉 🤍 Sign up to my newsletter for exclusive content: 👉 🤍 Follow me on IG (Daily updates): 👉 🤍 = Level up with me: Become a legendary designer: 🤍 Personal portfolio: 🤍 Instagram: 🤍 LinkedIn: 🤍 Twitter: 🤍

Build it in Figma: Design a responsive website navigation [Part 1]

88459
774
40
00:58:38
02.07.2020

Part 1/3. See how Rogie uses constraints and components to build a navigation that scales from mobile to desktop. Figma Community file used in this livestream: 🤍 #Figma #BuildItInFigma #FigmaDesign #WebsiteDesign

Responsive Web Design | Adaptive Web Design Tutorial in Figma

3797
97
5
00:26:25
20.01.2022

💎Design from the video here: 🤍 🔥Build your Design Career, Interactively (25% off discount for the Pro Yearly subscription): 🤍 🔥Useful resources for DIGITAL designers: 🤍 👋Welcome to the video in which I will show you how to create a responsive web design for a medical website. You can follow these steps after me and improve your UI/ UX, Web, and App design skills. ❤️‍🔥SUBSCRIBE: 🤍 💸Donate to the channel: 🤍

Responsive Design Tutorial in Figma – Free Figma Course 2020 – Ep 3

18101
751
77
00:09:02
01.07.2020

Create Responsive Design in Figma using Constraints, Layout grid & Auto Layout features in Figma. A step by step guide to help you understand all the concepts. Follow this tutorial series to learn Figma from scratch. Timestamps - 0:00 Intro 0:35 Basics of Constraints 01:52 Left & Right Vs. Scale 02:51 Constraints + Layout Grid 06:00 Basics of Auto Layout 07:18 Creating Mobile Responsive Design Free and most complete Figma Course & Tutorials 🤍 Figma is my personal favorite Design Tool. It's one of the fastest-growing design tools right now. That's why I am creating a complete course on this to help new designers which will cover the Basics and Advance features of Figma. If you're planning to switch to Figma from Sketch/Adobe XD, please subscribe to this channel. - ABOUT ME I am Udayraj, and I’ve created this channel to share the things I learned in the last 5 years of my career. On this channel, I’ll share Figma Tutorials, Adobe XD tutorials, Various Prototyping Tools & lots of design tips. I am a UX Designer with 5+ years of experience. I have worked with Startups as well as Fortune 500 companies in various domains such as - Healthcare, E-commerce, Logistics/Supply Chain, Infotainment, Mobile Gaming & E-Learning. Please subscribe and say hi in the comments or connect with me on social media :) - SOCIAL Personal Website: 🤍 LinkedIn: 🤍 Instagram: 🤍 Twitter: 🤍 - #figma #uxdesign #designtutorial

How to make Responsive Design in Figma - Auto-Layout, Constraint & Figma Plugin

1340
55
9
00:19:44
27.04.2022

In this video we will cover how to make an entire layout in Figma Responsive. We will first use constraints then 2 plugins to make our design responsive. Want me to teach, mentor and guide you start a career as a product designer?Join the WhatsApp Group with the link below:🤍 Below is a video explaining Auto Layout and Constraints in details:🤍

Crash Course 2022 - Responsive Website with Figma in hindi #figma #responsive #breakpoints #ui

33296
1270
61
00:26:19
16.02.2022

Dear Friends, In this video we going to make actual responsive home page design and interactive prototype using figma and breakpoint plugin, so the designer can share responsive prototype with clients to showcase actual breakpoints. If you liked this video then don't forget to like, share and subscribe to our channel to receive more such tutorials! Free Ui Source files Download Link 🤍 Adobe After Effect Playlist 🤍 ...................................................... Adobe XD 2021 Playlist 🤍 ...................................................... Figma Complete Playlist 🤍 ...................................................... UX Process & Principles Playlist 🤍 ...................................................... All UI Components in XD 2021 Playlist 🤍 ...................................................... Design Inspiration 🤍 ...................................................... Icon design Playlist 🤍 ...................................................... Follow us on. 🤍 🤍 🤍 🤍 Website: 🤍 #uxdesign #designtrends #responsive #breakpoints #uidesign #uiux #design #userinterface #appdesign #graphicdesign #userexperience #webdesigner #uidesigner #pelfizz #figma

Converting Desktop Web Design to Mobile in Figma

13450
348
40
00:26:49
28.01.2022

Convert a desktop landing page to a mobile web design. Create the landing page here: 🤍 Contents 0:00 - Introduction 0:20 - Setting Up Grid Styles 2:40 - Navigation 6:00 - Hero 9:16 - Strap 10:22 - Icon Feature 12:45 - Media Feature 15:38 - Browser Stacking 17:28 - Reviews 19:43 - Footer 22:03 - Preparing The Prototype 25:00 - Creating Style Guides 25:12 - Creating Prototype Link 26:32 - Conclusion Figma plugins to have installed Iconify: 🤍 Automatic Style Guides: 🤍 Stay in touch 🤍 🤍 🤍 Music from Uppbeat 🤍 License code: OWHBD74EAQEAGQJK

Make a design responsive in Figma with constraints & auto-layout

12215
466
31
00:10:45
01.08.2021

Follow along this step-by-step guide and and learn how to use #constraints, #autolayout, and the #Responsify-plugin to make an app responsive on all IOS devices. The Responsify plugin saves so much time and effort by creating multiple screens of different sizes with one click. The original app we're copying is made by Figma and provided to new users to showcase prototyping in Figma. You should find it in your drafts folder. In the previous video- 🤍 I copied an IOS app to learn the basics of Figma. In this one I take it a step further by turning this non-responsive app into a responsive one. If we started the design using auto-layout from the beginning we would have reached a more elegant solution. But this one works well enough, for now. LINKS - Link to the Figma community file - 🤍 (Duplicate it and you'll have a copy of it in your drafts folder) - Responsify - 🤍 - My personal website - 🤍 CHAPTERS 00:00 - Intro 00:30 - How to use the Responsify plugin 01:27 - How to install the Responsify plugin 01:46 - Adjust the constraints of the elements inside the Logged out frame to make them responsive 05:00 - A quick intro to auto-layout in Figma 07:29 - Adjust the constraints of the elements inside the Register frame 08:04 - Add auto-layout to the text boxes and button to make them responsive 09:32 - The log in frame 09:59 - Check the app on an iPhone SE by presenting the prototype ATTRIBUTIONS - Music: 🤍bensound.com - Sci fi - 🤍 - Intro: Canva.com #Ui #Ux #FigmaConstraints #FigmaTutorial

How to Calculate Responsive Grid Layouts (STEP BY STEP!!)

17543
794
55
00:09:01
18.10.2021

My Ultimate Figma Design Masterclass (1,800+ students. 90+ Videos. 10+ hours.) 👉 🤍 Shipfaster UI - Advanced Figma Design System (1,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉🤍 Sign up to my newsletter for exclusive content: 🤍 Follow me on IG (Daily updates): 🤍 = 🔗 Links Personal portfolio: 🤍 Instagram: 🤍 LinkedIn: 🤍 Twitter: 🤍 Level up with all my design courses and resources: 🤍

Figma in 5: Auto Layout

332329
7472
226
00:06:50
08.12.2020

Ready to level up your skills? Got five minutes? Join us for this brand new series, meant to level you up in a rapid-fire, tip stacked deep-dive on a topic. This time, we're talking Auto Layout. Stay tuned by subscribing for next week's Figma in 5, dropping on Tuesday. #Figma #FigmaIn5 #AutoLayout

Figma Eğitimi - Responsive Design Nasıl Yapılır? | Constraints Tool

5590
149
13
00:05:03
21.09.2019

Su an Figma için web sektöründeki en populer tasarım programı dersek abartmış olmayız. Web designers, UI designers ve product designers... yani web yada mobile tasarım yapmak isteyen tüm tasarımcıların ruhundan anlayan mükemmel bir program. Bu videoda responsive design için çok onemli olan Constraints Tool inceleyeceğiz. Figma’nın tasarım araçları, menüleri ve önemli özellikleri gibi temel bilgiler, kısa yollar, programla ilgili faydalı ipuçlarının yanında renk stilleri, karakter stilleri ve componentler yaratarak Figma’nın derinliklerine daldığımız videoyu bu linkten izleyebilirsiniz 🤍 DesignGost Usta-Çırak Platformu: 🤍 .................................................................................................. Tasarim ilkeleri video serisi 🤍 Basit Bir Stratejiyle Hayatımı Nasıl Değiştirdim? / New York'a Geliş Hikayem 🤍 Logo tasarım video serisi 🤍 Altın Oran "Fi Sayısı" Nedir, Logo Tasarımında Nasıl Kullanılır? 🤍 Bunları okulada öğretmiyorlar video serisi 🤍 FOLLOW ME: Dribbble: 🤍 Behance: 🤍 Twitter: 🤍

Tuto Figma • Responsive Design & Auto Layout

47070
1740
99
00:22:11
04.01.2021

Vous avez un projet UX UI ? Un besoin de formation ? 💌 Contactez moi → 🤍 ⇩ Déroulez-moi ⇩ Je vous partage à travers 3 exemples mes explications et mes astuces pour faire du Design Responsif sous 🤍Figma à l'aide des Contraintes et de l'Auto Layout. N'hésitez pas à écrire en commentaire si vous avez des questions, je lis tous vos messages 😗 0:00 – Introduction 1:20 – Résultat final 2:28 – Qu'est-ce que l'Auto Layout ? 4:15 – Exemple 1 : Masonry Grid 11:22 – Exemple Bonus : Bouton 12:00 – Exemple 2 : Social Card 17:28 – Exemple 3 : Google Meet 20:17 – Conclusion Télécharger le fichier source Figma : 🤍 Voir le fichier source Figma : 🤍 #Responsive #AutoLayout #Figma 👀 ABONNEZ-VOUS → 🤍 👕 MA BOUTIQUE → 🤍 ● SOUTENEZ-MOI 📺 UTIP → 🤍 💰 PAYPAL → 🤍 ● SUIVEZ-MOI 📺 Twitch → 🤍 👾 Discord → 🤍 📸 Instagram → 🤍 🐦 Twitter → 🤍 👤 Facebook → 🤍 🏀 Dribbble → 🤍 😉 Merci d'avoir regardé la vidéo ! Je remercie Nath pour la composition de la musique (son Insta : instagram.com/lunath) Contact Pro et Partenariat : bastien.marecaux🤍gmail.com © 2021 Bastien Marécaux | 👀 basti.fr PC DE STREAM 👾 • AMD Ryzen 7 3700X (3.6 GHz) : 🤍 • MSI MPG B550 Gaming Plus : 🤍 • DDR4 HyperX Fury - 16 Go (2 x 8 Go) 3200 MHz : 🤍 • Samsung Série 980 PRO 500 Go : 🤍 • Corsair Carbide 275R Airflow Tempered Glass, Noir : 🤍 • Seasonic FOCUS GX - 750W : 🤍 • Gigabyte GeForce GTX 960 Gaming G1 - 2 Go STREAM 📺 • Elgato Cam Link4K : 🤍 • Elgato Game Capture HD60S : 🤍 • Elgato Stream Deck : 🤍 SCREENS 🖥 • Dell P2419HC 24’’ : 🤍 • Dell P2719H 27’’ : 🤍 • Double Support Ecran PC BONTEC : 🤍 APPLE 🍏 • Macbook Pro 16 : 🤍 • Magic Mouse 2 : 🤍 • AirPods : 🤍 • iPhone XS : 🤍 • iPad Pro 11’’ : 🤍 | 🤍 BUREAU 🪑 • Flexispot : 🤍 SON 🎙 • Yamaha HS5 : 🤍 • Micro AT2020 : 🤍 • Blue Compass : 🤍 • Focusrite Scarlett 2i2 3rd : 🤍 • Casque DT 770 Pro : 🤍 • Filtre Anti-Pop Micro : 🤍 • Micro Cravate Rode Smart Lav Plus : 🤍 • Line 6 Wireless : 🤍 VIDEO 📷 • Sony a6400 : 🤍 • Objectif Sigma : 🤍 • Elgato Multimount : 🤍 • Dummy batterie pour Sony A6400 : 🤍 LIGHT 💡 • Aputure Panneau LED : 🤍 • Neewer 480 Panneau LED : 🤍 • Elgato Key Light : 🤍 AUTRES 🎮 • HDMI Switch : 🤍 • Nintendo Switch : 🤍 • Grille pour multiprise : 🤍 • Manette Xbox 360 : 🤍 • Boite cable : 🤍 • D Link Routeur : 🤍 • Serre Cable : 🤍 • Embases Adhésives : 🤍 • Fisheye : 🤍

Design A Responsive Website | Figma to HTML, CSS & JavaScript | FULL VIDEO

19825
701
37
04:37:05
06.01.2022

Hi guys, I have combined all the videos in the responsive homepage playlist into this single long video. I hope you find this useful. Figma File: 🤍 Source code: 🤍 Check out my courses: 🤍 Timestamps: 00:00 - Introduction 02:17 - Components (Heading & Button) 21:31 - Components (Testimonial Cards) 30:28 - Components (Course Cards) 38:47 - Hero Section 49:59 - Testimonials & Courses Section 1:00:04 - App Section & Footer 1:11:52 - Tablet Version 1:24:00 - Smartphone Version 1:39:21 - Mobile Navigation Menu 1:45:59 - Figma to Code (Introduction) 1:49:07 - Setting Up The Project 1:57:30 - The HTML 2:20:03 - The CSS (Hero Section) 2:47:49 - The CSS (Testimonials Section) 3:06:06 - The CSS (Courses Section) 3:17:43 - The CSS (App Section & Footer) 3:31:49 - Tablet Version (Hero Section) 3:44:48 - Tablet Version (The rest of the sections) 3:59:32 - Tablet Version (Smaller Screen Sizes) 4:11:22 - Smartphone Version 4:26:45 - Deploying the Website

Responsive Website/Web Design and Prototype with Figma

56802
1224
115
00:34:36
09.10.2020

Learn how to design a professional and responsive website/web UI using Figma. Also, you will learn how to prototype your design and use Smart animate feature in Figma to animate your design. Here is the link to the Figma design: 🤍 Here is the link to the colour theme on colours.co: 🤍 Let me know what you think about this video and should in case you have any challenges, let me know in the comment section. Remember to like, share, comment and subscribe. Also, hit on the notification bell to get notified when I upload a new video. Subscribe to my channel my licking this link: 🤍 You can also reach me on : Website: 🤍 Facebook: 🤍 Twitter: 🤍 Instagram: 🤍 Youtube: 🤍 #figmawebdesign #figma #webdesign #webdesigninfigma #webdesignwithfigma #howtodesignwebsiteinfigma #webdesignfigma #designwebfigma #designwebinfigma #designwebwithfigma #howtodesignwebinfigma #howtodesignwebwithfigma #webdesigntutorial #webdesigntutorialinfigma #webdesigntutorialwithfigma #webdesigncourse #webdesigncoursefigma #webdesigncourseinfigma #webdesigncoursewithfigma #figmatutorial #ui #ux #web #design #website #figmatutorial #figmasmartanimate #figmaprototype

Figma Tutorial - Creación de Responsive Layout Grid

30178
1005
77
00:27:19
07.07.2020

Un grid es la estructura invisible sobre la cual se apoyan todos los elementos visuales. Su función es la de separar cada uno de los componentes de la interfaz en un espacio ordenado, organizando los sitios que quedarán en blanco y aquellos que contendrán formas. Un grid bien definido se transforma en una ayuda al diseño que, generando orden y simplicidad, mejora la usabilidad de la app. 👕 Playeras para UX/UI Designers: 🤍 Libros de UX/UI que recomiendo 📘 Design Sprint: 🤍 📗 Design Is Storytelling: 🤍 📙 The Design of Everyday: 🤍 📕 Don't Make Me Think: 🤍 La mejor librería de ilustración 🎨 🤍 ¿Te gusta este contenido? Apoya al canal y seguiremos mejorando juntos;) PayPal: 🤍 Redes sociales Instagram: 🤍 Twitter: 🤍 Dribbble: 🤍 Información utilizada en el video : 🤍 #UX #UI #Figma #Sketch #Invision #Platzi

Responsive Navigation bar in Figma - How to Design auto layout navbar

3832
68
10
00:09:07
03.03.2022

In this video, you will learn how to design a responsive navigation bar in Figma using Auto Layout. Some also call it a menu bar so let's see how we can design and create a responsive navbar in Figma. I teach about UI UX Design to more than 100K+ students from 188 countries. Watch FREE - 5h Video Course - Visual Design for UI Designers & Developers ► 🤍 17+ Pro UI UX Design Course bundle for $199 only (Life Time Updates) ► 🤍 Kit Camera, Microphone used in the making of this Video ►🤍 Follow me here, Thanks - 🤍 (website) 🤍 🤍 🤍 🤍 🤍 🤍

Figma Masterclass for Beginners (2022 Updated)

153546
4981
107
00:31:57
14.03.2022

Want to learn Figma but don’t know where to start? This 2022 updated, step-by-step tutorial will give you everything you need to start using Figma in your Web and UI design projects....Remember to Subscribe 🤍 I have been using Figma for 4 years in my design work and just love the tool so much. In this video, I cover all the basics you would need to know you start using Figma today in your professional design work. By the time you're done watching the video, you should be able to download the program, install, start making amazing things, and wonder why you ever waited to make the switch. 0:00 Intro 0:30 Getting Figma 1:40 Projects 2:43 Community 4:00 UI Tour 4:51 Assets and Libraries 8:20 Frames 10:00 Making Buttons 11:40 Auto Layout 14:30 Components 17:00 Responsive Resizing 17:58 Layout Grids 20:00 Basic Commands & Styling 21:59 Exporting 22:56 Sharing & Collaborating 24:30 Prototyping 28:00 Interactive Components 🏆 //////////// Join my members community to get access to perks: You can get this starting and ending design file 🤍 👋 ////////// Join the Discord Server and meet other creatives 🤍 🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship 🤍 👋 ////////// Follow me on Social Instagram: 🤍 Twitter: 🤍 📫 ////////// Sign up for my Monthly Newsletter 🤍jesseshowalter.com/newsletter 🖥️ ////////// I build most of my websites using Webflow 🤍 💻 ////////// I host all my websites with Hostinger 🤍 🎵 ////////// Musicbed is the best place to get music for your films. Get your first month free when you purchase an annual subscription by using my coupon code JESSE at checkout. 🤍 📸 ////////// The Equipment I use 🤍

Figma Tutorial: New Figma Auto Layout & Constraints (W/ UI DESIGN EXERCISE)

98347
4848
224
00:13:29
06.01.2021

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 🤍 Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 🤍 Outline - Figma Wireframe Kit (350+ components and variants) 👉 🤍 Sign up to my newsletter for exclusive content: 👉 🤍 Follow me on IG (Daily updates): 👉 🤍 = Level up with me: Become a legendary designer: 🤍 Personal portfolio: 🤍 Instagram: 🤍 LinkedIn: 🤍 Twitter: 🤍

Figma tutorial for Beginners: Complete Website from Start to Finish

117934
4177
160
00:43:21
20.05.2022

Today, Ran shares a Figma Tutorial with you guys, where he'll build a very cool website. Build alongside Ran by downloading the starter file here 👉 🤍 See part 2 on how to build this site with Webflow: 🤍 📽️ CHAPTERS 00:00 - Introduction 01:00 - Figma interface overview 04:30 - Page & grid setup 09:30 - Designing the hero & navigation 21:20 - Creating the background effect 25:00 - Building the content section 30:50 - Masking & blend modes 36:30 - Using Gradients 39:00 - Building the footer 40:40 - Designing a form 42:00 - Next steps ⬇ If you would like to watch more Figma Tutorials, please let us know in the comments ⬇ Don't forget to subscribe to our channel for more Design Content. Click here 👉 🤍 🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 🤍 📱 Find us on SOCIAL MEDIA Flux Academy's Instagram 👉 🤍 Ran's Instagram 👉 🤍 Thanks for watching our video! #Figma #WebDesign #FluxAcademy

Make Responsive Data Tables with Auto Layout in Figma (Hindi) #figma #responsive #enterpriseux #ui

8707
277
24
00:20:17
23.03.2022

Dear Friends, In this video we going to make responsive Data tables using Auto layout and Component feature in figma, so the designer can speed up the design process and save more time on delivery. If you liked this video then don't forget to like, share and subscribe to our channel to receive more such tutorials! Free Ui Source files Download Link 🤍 Adobe After Effect Playlist 🤍 ...................................................... Adobe XD 2021 Playlist 🤍 ...................................................... Figma Complete Playlist 🤍 ...................................................... UX Process & Principles Playlist 🤍 ...................................................... All UI Components in XD 2021 Playlist 🤍 ...................................................... Design Inspiration 🤍 ...................................................... Icon design Playlist 🤍 ...................................................... Follow us on. 🤍 🤍 🤍 🤍 Website: 🤍 #uxdesign #designtrends #responsive #enterpriseux #uidesign #uiux #design #userinterface #appdesign #graphicdesign #userexperience #webdesigner #uidesigner #pelfizz #figma

Responsive Design and Breakpoints in Figma – Advanced Tutorial

8432
228
22
00:11:14
24.02.2021

Learn how to nail down responsive design and breakpoints in Figma with this advanced tutorial where I'll be walking you step-by-step through some tips to recreate and animate a real, responsive sign in form. ✨ Duplicate my design to follow along: 🤍 To speed up our design workflow and work with production-ready design assets and breakpoints off the bat, we're using Chakra UI, a simple, modular and accessible components library. I'm currently working on a file that bridges the gap between Chakra and Figma that makes the full library natively available for your Figma projects. More news on that soon! How to use the Chakra UI Kit to seamlessly design this page: 🤍 New to Figma? Start here! 🤍 More examples of breakpoint design: 🤍 Let me know in the comments if you enjoyed watching this video, and if there's anything related to Figma or responsiveness I haven't covered yet that you'd like to see in the near future! 💬 If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life. Don't be a stranger and connect with me here 👋 Twitter: 🤍 Figma: 🤍 LinkedIn: 🤍 Chapters: 0:00 - Intro 1:12 - Breakpoints intro 3:12 - Responsive layer structure 4:34 - Breakpoint frames 10:23 - Prototype 11:01 - Conclusion

Responsive Card Component UI Design in Figma with ease - Figma Tips and Tricks Tutorial

862
45
10
00:12:46
22.06.2022

In this video, you will learn how to design responsive Cards which is a popular UI feature introduced by Google Material Design. So to design a card that can expand vertically with more text and can be resized. I am sharing tips and tricks to design a responsive card UI in Figma. Auto Layout will help you design a Card Component easily in Figma with responsive resizing I teach UI UX Design to more than 100K+ students from 188 countries. Watch FREE - 5h Video Course - Visual Design for UI Designers & Developers ► 🤍 17+ Pro UI UX Design Course bundle for $199 only (Lifetime) ► 🤍 Kit Camera, Microphone used in the making of this Video ►🤍 Follow me here, Thanks - 🤍 (website) 🤍 🤍 🤍 🤍 🤍 🤍

Figma Auto Layout Responsive UI Card | Figma Tutorial 2021 | Auto Layout

1948
55
4
00:08:35
29.03.2021

In this tutorial you will learn to create responsive UI Card in Figma using auto layout. Pardon me for the dogs barking in the background. . Twitter - 🤍 Instagram - 🤍 Dribble - 🤍

Figma Web Design and Smart Animation

267664
8482
645
00:35:04
23.09.2020

In this Figma Web Design Tutorial, you are going to learn how to design a Professional website/web UI in Figma. Also, you will learn how to create animations in this tutorial using Figma Smart Animate Tool. Figma is a free UI Design tool used creating Website/web UIs. Here is the link to the Figma project: 🤍 Get Images of the Project here: 🤍 Let me know what you think about this video and should in case you have any challenges, let me know in the comment section. Remember to like, share, comment and subscribe. Also, hit on the notification bell to get notified when I upload a new video. Subscribe to my channel my clicking this link: 🤍 You can also reach me on : Website: 🤍 Facebook: 🤍 Twitter: 🤍 Instagram: 🤍 Youtube: 🤍

การออกแบบ Responsive Website ด้วย Figma

5756
147
7
00:17:11
03.11.2020

#Figma #คอร์สออนไลน์ #ออกแบบเว็บ ในการออกแบบ Responsive ในดีไซน์ที่เป็น Layout แบบเดียวกันนั้นจะมีวิธีการอย่างไร ดูได้จากในคลิปนะครับ วีดีโอคลิปนี้เป็นหนึ่งในบทเรียนของการออกแบบ UI/UX Mobile App, Website ด้วย Figma รายละเอียดตามลิงค์นี้นะครับ ออกแบบ UI/UX Website, Mobile App ด้วย Figma 🤍 รับออกแบบ UI/UX รับออกแบบ Website, Mobile App คอร์สเรียนออนไลน์ เรียนซ้ำได้ตลอด ไม่มีวันหมดอายุ How to ออกแบบแอพส่งอาหาร 🤍 ออกแบบ Interactive Prototype ด้วย Adobe XD 🤍 ออกแบบ Responsive Website ด้วย Adobe XD 🤍 ออกแบบ UI/UX และ Digital Product ด้วย Adobe Xd 🤍 ออกแบบ UI/UX แอพโรงแรม ด้วย Adobe XD 🤍 ออกแบบ UI/UX Website, Mobile App ด้วย Figma 🤍 ————————————————————————————— สนับสนุนช่อง Uncle Ake Paypal 🤍 PromptPay 0815925590 ————————————————————————————— facebook : 🤍 Line: 🤍 Messenger: 🤍

Responsive web design in Figma

336
26
6
00:14:02
14.12.2021

A short intro to auto-layouts and other techniques in Figma that make responsive web design easier than ever for beginners. • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Socials: Insta: 🤍 LinkedIn: 🤍 Free Music on YouTube: 🤍 Rarible: 🤍

Quick responsive workflows

24200
1325
27
00:02:11
21.07.2021

Speed up your design workflows by combining these two Figma plugins: • Responsify: 🤍 • Breakpoints: 🤍 Follow along in this Figma Community file: 🤍 #Figma #FigmaTips #ResponsiveDesign

Set A Responsive Grid Layout In Figma Using Material Design

3536
161
4
00:09:27
13.09.2021

Welcome To Migrant Solutions. In This Video We are going to walk you through the process of setting up a responsive Grid Layout in Figma Using The Material Design Guide. Support Channel Via Patreon : 🤍 Connect With Instructor On LinkedIn : Joseph Brendan Twitter : 🤍joe_brendan_ Instagram : 🤍joseph_brendan_

[Tự học Figma] - Responsive không còn cao siêu | Constraints

744
25
1
00:10:02
30.10.2021

Khi làm việc với các Developers, một trong những điều mà họ quan tâm đó chính là Responsive - sự thay đổi của thiết kế trên trên từng thiết bị. Responsive là một trong những yếu tố giúp chúng ta đạt được tính tiếp cận (Accessibility) trong thiết kế UX/UI. Sẽ thật là bỏ xót nếu chúng ta chỉ chăm chăm vào Website, hoặc App, hoặc Tablet, ... Trước khi hiểu và giải thích thật sâu, chúng ta phải học cách thể hiện và trình bày được bằng công cụ. Và Constraints trong Figma giúp chúng ta điều đó gần như là triệt để. Hãy xem cách để ứng dụng và thành thạo được công cụ Constraints thông qua video này nhé. Hiện tại mình đang triển khai khoá học Figma UI Thực Chiến [2.000.000 VNĐ] trong vòng 7 buổi trải nghiệm làm sản phẩm thực tế và sát sàn. Các bạn có thể liên hệ để được tư vấn qua số điện thoại: 0364.377.627 (gặp Khang) Hoặc đăng ký ở đường link bên dưới: 👉 🤍 #uxuidesign #hocfigma #tuhocfigma #kythuatfigma #responsive #constrainst #rebovietnam Liên hệ ■ Website: 🤍​ ■ Facebook: 🤍 ■ Instagram: 🤍 ■ Twitter: 🤍 © Bản quyền thuộc về Rebo Vietnam

Landing Page Design Tutorial | Web Design in Figma

94892
2270
54
00:19:32
06.09.2021

💎Design from the video here: 🤍 🔥Build your Design Career, Interactively (25% off discount for the Pro Yearly subscription): 🤍 🔥Useful resources for DIGITAL designers: 🤍 👋Hello everyone, in this video we will create a landing page for a web product. You can repeat the steps after me and improve your skills in UI/UX design. 3D Illustration Pack: 🤍 ❤️‍🔥SUBSCRIBE: 🤍 💸Donate to the channel: 🤍

Назад
Что ищут прямо сейчас на
responsive design figma sdkmanager shocking videos Как сделать из вертикального видео горизонтальное в Adobe Premiere Pro Golang package osram ledriving login error in bgmi Hardware Based FX Emoji смешное видео web designing course for beginners Milka Smilevska Rap de los Países figma grids recipes using naan bread Musa Office 365 GCC High mobile app ui figma airpods 2 копия обзор xbox one