Загрузка видео...

Не удалось загрузить видео

На главную

#FigmaTip: Use Layout Grids paired with Constraints to anchor elements to columns or rows when resizing. Thanks, Ana for the tip!

figma's profile picture

Figma

573,880 subscribers

64,531 просмотров • 3 лет назад •via X (Twitter)

#FigmaTip
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 8

Фото профиля Dave McNally
Dave McNally3 лет назад

@_AnaBoyer I had no idea that constraints interacted with the layout grids this way! Always just viewed them as an overlay of sorts. Very helpful! 👏🔥

Фото профиля Breadcrumb
Breadcrumb1 год назад

Looking to automate reporting? Use AI agents to turn spreadsheets to reports in minutes without any coding.

Фото профиля Boyce Chi
Boyce Chi3 лет назад

@_AnaBoyer I have some questions about what the difference is between using grid and autolayout to achieve a particular effect？

Фото профиля Figma
Figma3 лет назад

Hi Chi, we followed up via DM due to the character limitations. Please take a look when you have a moment. Thank you!

Фото профиля 6ixx (aka BIG DADDY)
6ixx (aka BIG DADDY)3 лет назад

@_AnaBoyer @Ridwan_alaps

Фото профиля Abinash Mohanty
Abinash Mohanty3 лет назад

@_AnaBoyer This is really helpful 👋🔥

Фото профиля BCGTS
BCGTS3 лет назад

@_AnaBoyer @SaveToNotion #thread

Фото профиля ux.anand
ux.anand3 лет назад

@_AnaBoyer Wow

Похожие видео

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids
0:50

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids

Figma

103,767 просмотров • 1 год назад

We’re Gridmaxxing → Drag to reorder columns/rows → Automatic positioning → Automatic rows
0:42

We’re Gridmaxxing → Drag to reorder columns/rows → Automatic positioning → Automatic rows

Figma

154,013 просмотров • 3 месяцев назад

You can finally lock aspect ratio on obects in Figma! Apply it to media inside of your Auto layout components for better resizing! Tip: hold control to temporarily disable it when resizing! Let's go!!!! 🔒 it down!
1:45

You can finally lock aspect ratio on obects in Figma! Apply it to media inside of your Auto layout components for better resizing! Tip: hold control to temporarily disable it when resizing! Let's go!!!! 🔒 it down!

miggi from figgi

50,071 просмотров • 1 год назад

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 просмотров • 3 лет назад

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇
0:28

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

507,746 просмотров • 3 лет назад

‘Japanese Layout Design’ interprets Japanese layout design from theory to practice. With 76 distinctive layout design strategies and 18 Japanese layout design masters it passes the critical layout design elements and skills to readers.
0:51

‘Japanese Layout Design’ interprets Japanese layout design from theory to practice. With 76 distinctive layout design strategies and 18 Japanese layout design masters it passes the critical layout design elements and skills to readers.

Counter-Print

117,796 просмотров • 3 лет назад

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025
0:39

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Figma

161,275 просмотров • 1 год назад

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →
1:20

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

Figma

124,411 просмотров • 2 лет назад

Introducing Templates. Add your touch to any layout. Swap in your product, copy, or brand, and watch the elements harmonize.
0:32

Introducing Templates. Add your touch to any layout. Swap in your product, copy, or brand, and watch the elements harmonize.

Reve

326,410 просмотров • 1 месяц назад

0 clipping magic trick for Vtuber creators use bone constraints in unity or blender, to make the skirt follow the leg movement! when you apply physics together with this you will have 0 clipping with minimal effort on collision settings!
1:01

0 clipping magic trick for Vtuber creators use bone constraints in unity or blender, to make the skirt follow the leg movement! when you apply physics together with this you will have 0 clipping with minimal effort on collision settings!

Gloria - 3D artist 🪡✂️

19,740 просмотров • 1 год назад

#Config2023 Launch 4: Auto layout updates Three words: Wrap, min, max—that’s right, spend less time manually resizing and more time creating components and layouts that are much more responsive. 👇 Here’s what’s new
0:35

#Config2023 Launch 4: Auto layout updates Three words: Wrap, min, max—that’s right, spend less time manually resizing and more time creating components and layouts that are much more responsive. 👇 Here’s what’s new

Figma

205,395 просмотров • 3 лет назад

With the new Layouts tool, you can connect elements to or between layouts using bones, targets, and constraints. This lets you create responsive designs without compromising creativity. By JcToon
0:36

With the new Layouts tool, you can connect elements to or between layouts using bones, targets, and constraints. This lets you create responsive designs without compromising creativity. By JcToon

Rive

27,112 просмотров • 1 год назад

Another Blender retopology tip: When to use Snap to Face Project or Face Nearest? #Blender #B3D #Blender3D
0:59

Another Blender retopology tip: When to use Snap to Face Project or Face Nearest? #Blender #B3D #Blender3D

Jan van den Hemel

38,347 просмотров • 6 месяцев назад

reminder to use `scrollbar-gutter: stable` if your layout shifts when the scrollbar disappears
0:20

reminder to use `scrollbar-gutter: stable` if your layout shifts when the scrollbar disappears

Hugo

86,188 просмотров • 2 месяцев назад

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇
0:36

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,649 просмотров • 3 лет назад

A few more updates to Figma Make → Review changes with a to-do list → Navigate to specific pages → Edit text and delete elements directly in preview
0:26

A few more updates to Figma Make → Review changes with a to-do list → Navigate to specific pages → Edit text and delete elements directly in preview

Figma

62,566 просмотров • 7 месяцев назад

Did someone say auto layout? Whether you're a beginner or a pro, Designer Advocate Lauren Andres has some tips for you.
9:26

Did someone say auto layout? Whether you're a beginner or a pro, Designer Advocate Lauren Andres has some tips for you.

Figma

43,386 просмотров • 3 лет назад

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,602 просмотров • 2 лет назад

i think i need to update this in the future. or make a new layout with the new ones when the year ends :3
0:29

i think i need to update this in the future. or make a new layout with the new ones when the year ends :3

JONOTTODAY

28,683 просмотров • 5 месяцев назад