Figma tutorial: Card component with auto layout

the interface in the video is outdated. So this tutorial is not helpful. Please update your lessons. Otherwise we spend so much time to figure out how it works 🤬

Very well explained!

it is kind of complicated to me. Any tutorial describe what are the difference between Fix width, hug contents and fill container?

Hug, fill, fixed... my head 🤣

Learned something new, nice video

I am THE RAMBO Who will be going fIGMA after watching this tutorial

Next topic: Button row with autolayout

Explanation using elements- title, description, and CTA would have been cool. CTA is missing!

This is powerful. However, the connection of the instances to the main component became meaningless.

Does anyone know how I can swap the pictures in instances? This is actually why I watched the video but exactly that part is not explained at all and I cannot for the life of mine find any helpful information on how to do that on the internet.

complex 😓😓😓😓

Can we get a video update to reflect the new UI? I've been bashing my head against the 5 minute mark for the last half hour because, for whatever reason, my resizing constraints are either disabled or not behaving the same way. Really struggling to go back & forth between the video and my design file to try and translate to the new workspace.

awesome , thanks figma

is it possible to save proportion of image size in cards? so it would increase not only horizontal but vertical too?

Good explanation. For all designers, welcome to how developers would actually think and solve these kinds of problems in the real coding implementation. If you think doing this with Figma is tricky, try imagining when Figma wasn't around yet 🙃

Half way through the video and I was stuck, I literally felt my brain grinding... Why does it look like a math equation with so many contradictions? I hate math 😬

Ok, so when I take my title and description texts, and then hit the "fill container", it doesn't make the same thing as on the tutorial. The white box should follow the text being higher in terms of lines, and it doesn't. Anyone else ?

Music backgrounds for tutorials are really unnecessary. Everyone should be able to listen to the background music they like.

I like this tutorial but it no longer matches the updates we have on the current version. I feel lost while following the prompter and creating the elements. I have to figure out if I have done it right or not. I hope the tutorial series gets updated along with the versioning release.

Thank you, Figma!

Good tutorial but it would be easier to just code this than use these tools half the time, or at least it feels that way when you're learning it. Prototyping should be quicker than building the site 😅

Loviong figma, but all this auto layout is overly complex, not good for quick prototyping. it isn't saving me time

"Space between" has been converted to "Horizontal gap between items > Auto" in newer versions of Figma.

It is an excellent source, but needs to be updated.

Great Tutorial!

In fact, it's just Flex properties in CSS applies in design.

not only you made best design tool but also best tutorials for it

I wasnt able to execute vertical and horizontal resizing of cards. can anyone share or recommend any resource

The most complicated Auto layout tutorial ever!!!!!!

This is the worst tutorial I ever watched 🙄

While descriptive, I didnt expect such a dry approach to tutorials especially from figma

Great videos. Thank you

in the part of image overflow, the cmd or ctrl is not working, tf how did you do that? 😢

Thank you

❤❤❤

It's a good tutorial to learn about fixed height, hug content, and fill container. Definitely It's quiet confusing while watching for the first time , but watching it twice or trice will help to understand when to use fixed height, fill containers and hug content

As a developer coming to the Figma world: things became easier when I realized "converting something to auto layout" is effectively "wrapping it in a flexbox div".

Great tutorial on making flexible card components in Figma! Really shows how to use auto layout well.

at @3.51 why the hug content label is greyed out.

I hate the auto layout🥰

Tho thx for the turorial

Superb explanation

Been following all figma's tutorials from the ground up, buh this is way more confusing than ever, especially with the fact that the video is just the old version of figma😤😢😢

I`ve learned a lot ,thank you😍

This feels fucked up

please update this tutorial , unfortunately some parts of this video not match what is in figma now !!