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

preview_player
Показать описание
Learn how to use auto layout to design flexible grids, hero and card components that adapt to any browser size.

#Figma #BuildItInFigma #FigmaDesign #WebsiteDesign
  1. Figma
  2. responsive website design
  3. webdesign
  4. web design
  5. fluid grids
  6. grids
Рекомендации по теме
Figma tutorial for 0:43:21

Figma tutorial for Beginners: Complete Website from Start to Finish

Introducing Figma: A 0:31:38

Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Master Figma UI 0:15:28

Master Figma UI Design in 15 Minutes | This Tutorial Is For You!

Your First Design 0:14:57

Your First Design System in Figma (Beginner Tutorial)

Create a Figma 0:13:43

Create a Figma Design System - Fundamentals (Part 1)

Build it in 0:55:27

Build it in Figma: Create a Design System — Foundations

Figma UI Design 0:24:23

Figma UI Design Tutorial: Get Started in Just 24 Minutes!

Build it in 0:54:48

Build it in Figma: Create a design system — Components

140K Designers Use 0:05:05

140K Designers Use this Figma Plugin to Work FAST

Build it in 1:17:17

Build it in Figma: Design a cohesive icon set

Design a simple 0:10:43

Design a simple UI from scratch for a Food App in Figma - For beginners

Figma For Beginners: 0:21:25

Figma For Beginners: Create designs (2/4)

3D animation of 0:00:44

3D animation of the Earth in space using #figma 🌏

Build a Design 0:09:42

Build a Design System in Figma

Figma in 55 0:00:56

Figma in 55 Seconds: Tables with auto layout and variants

Figma | Testing 0:00:21

Figma | Testing Prototype with Figma Mirror | #figma #uidesign

website design from 0:00:13

website design from the future #figma

How to use 0:00:38

How to use Figma Auto Layout wrap tutorial 2023 #figma #figmatips #figmatutorial #figmadesign #ui

MASTER Figma Components 0:09:28

MASTER Figma Components in 10 Minutes (Everything You Need To Know)

Create Lottie Animations 0:00:30

Create Lottie Animations in Figma! (Bye AE 👋)

The CORRECT (and 0:05:00

The CORRECT (and lazy) way to prototype | Figma Tutorial

How to Make 0:38:46

How to Make a Design System in Figma?

Figma Animation* How 0:00:59

Figma Animation* How to create a splash screen animation in #figma for your web or app designs

Create an action 0:01:00

Create an action menu with smart animate in Figma

Комментарии
Автор

The reason we use 8px values is mostly because every screen size is in increments of 8. Using 8px values makes it easy to design and develop responsive websites as your design will always fit seamlessly, no matter which screen size you use.

luisdezutter
Автор

14:28 AutoLayout/Vertically center
30:10 AutoLayout/image constrain edit

fajleyrabbe
Автор

Just realized all the wrong things, I was doing with Figma :P. Thanks a ton for this!!

yogeshbhatt
Автор

Does anybody know what tool he is referencing at 9:06 to stretch the child container within the parent container via auto-layout? His video is covering the tools.

adamlimo
Автор

I love these videos but I hope the sound quality will improve in the future -- mainly the volume and clarity.

jackielee
Автор

I wonder what was the article Rogie recommended 25:15

arturbecker
Автор

Well done, but i have a question how i convert my figma design to code html and css please answer me

omedali
Автор

image stacking in fill?? do tell how? b/c I can't find anything on it

StayFitResearcher
Автор

44:58 Why doesn’t the trick with dragging the object near to the edge of a frame work? It still goes out of the frame :/

ThisIsMeErnie
Автор

How to make the screenshot component in min 31:00 ?

adamvardy
Автор

How can I switch from desktop to mobile will maintaining a more realistic responsive stalking

gilbertumeh
Автор

wow! This hack on the autolayout at 31:00 is very handy!

guilhermeacardozo
Автор

I can see clearly now the error of my 10px nudge ways. I see the light of the 8px nudge and she is glorious.

cyberbrujx