Frame constraints와 Auto Layout

Figma에서 CSS로 옮길 때 제일 자주 만나는 난관은 layout입니다.

사각형 색은 옮기기 쉽습니다. background 쓰면 되니까요. 그런데 부모 frame 크기가 바뀔 때 child가 어떻게 움직여야 하는지는 조금 더 까다롭습니다. 여기서 constraints와 Auto Layout이 등장합니다.

constraints는 부모 크기에 대한 식이다

Figma constraints는 child의 위치를 부모의 어느 edge에 묶을지 정합니다.

left fixed:
child.x = left

right fixed:
child.x = parent.width - right - child.width

left and right:
child.width = parent.width - left - right

CSS에서는 보통 position: absolute와 left/right/top/bottom으로 옮깁니다.

.child {
  position: absolute;
  left: 24px;
  right: 24px;
}

이건 단순한 스타일이 아니라 부모 크기가 바뀔 때 다시 계산되는 제약식입니다. CSS가 식을 대신 풀어주는 셈입니다.

Auto Layout은 flex와 닮았다

Figma Auto Layout은 CSS flex와 상당히 닮았습니다.

direction -> flex-direction
gap -> gap
padding -> padding
alignment -> justify-content / align-items

하지만 완전히 같지는 않습니다. Figma의 hug contents, fill container, fixed size를 CSS의 width, min-width, flex, align-self 조합으로 옮겨야 합니다.

fixed -> width: Npx
hug -> width: fit-content 또는 content 기반 크기
fill -> flex: 1 또는 align-self: stretch

여기서도 핵심은 정책입니다. 모든 것을 absolute로 export하면 픽셀은 잘 맞을 수 있지만 responsive behavior는 약해집니다. 반대로 무리하게 flex로 바꾸면 Figma와 픽셀이 달라질 수 있습니다. 이 둘 사이에서 “이 화면은 고정형인가, 반응형인가”를 먼저 정해야 합니다.

데모에서 볼 것

데모에서는 frame 크기와 gap을 바꾸며 child의 위치식이 CSS flex/absolute 규칙으로 어떻게 바뀌는지 확인합니다.

오늘의 핵심은 layout 속성을 암기하는 게 아닙니다. 부모가 바뀔 때 child 식이 어떻게 다시 계산되는지를 보는 겁니다. Figma도 CSS도 결국 제약식을 풀고 있습니다.