Figma AutoLayout vs CSS Flex

개발자가 보는 피그마 오토레이아웃

피그마로 직접 그린 이미지

피그마로 다자인 요소들의 레이아웃(디자인 요소의 배치)을 반영할때 오토레이아웃을 사용하게 된다.

오토레이아웃을 Inspect창에서 개발자가 코드로 확인을 해보면 CSS의 Flex값들로 보인다.

오토레이아웃은 디자이너가 사용하는 객체이고 개발자가 이를 코드로 변환하기 위해서는 CSS Flex로 작성해야 한다.

피그마로 직접 그린 이미지

필자는 피그마의 오토 레이아웃에에서 레이아웃의 주요 요소를 3가지로 분류해보았다.

Direction : 디자인 객체들의 방향

Position : 디자인 객체들의 위치

Space : 디자인 객체간의 간격

피그마로 직접 그린 이미지

Direction

오토레이아웃 좌측 메뉴를 보면 아래로 향하는 화살표를 선택하면 Direction은 Column이 되고 우측으로 향하는 화살표를 선택하면 Direction은 Row가 된다.

레이아웃 기능중 가장 먼저 결정해야할 요소이다.

피그마로 직접 그린 이미지

Position

레이아웃으로 감싸고 있는 하위 디자인 요소들의 위치를 정할수 있다.

Row 방향은 좌측, 중앙, 우측에 위치 시킬수 있고 Column 방향은 상단, 중앙, 하단에 위치 시킬수 있다.

Row와 Column의 방향을 조합(ex: row 우측, column 하단)하면 총 9개의 위치를 잡을 수 있게 된다.

피그마로 직접 그린 이미지

Space

레이아웃으로 감싸고 있는 하위 디자인 요소간의 간격을 결정할 수 있다.

Packed는 하위 디자인 요소들은 묶음으로 해서 위치 이동시 같이 이동하게 된다.

Space Between 하위 디자인 요소간의 간격을 감싸고 있는 레이아웃을 기준으로 흩어지게 된다.

피그마로 직접 그린 이미지

Figma Auto layout 과 CSS Flex 비교 ( Direction 방향이 Row인 경우 )

피그마로 직접 그린 이미지

Figma Auto layout 과 CSS Flex 비교 ( Direction 방향이 Column인 경우 )

Figma vs CSS

피그마에서 방향에 따라 위치를 잡는 방법을 CSS에서는 Flex의 Align과 Justify를 사용하는것을 볼 수 있다.

Align과 Justify로 각각 가로 세로 위치를 잡을때 Direction에 따라 Row와 Column이 바뀌게 된다.

Direction이 Row일때 Align은 상단, 중앙, 하단등의 위치를 조절하지만 Direction이 Column이면 Align은 좌측, 중앙, 우측등의 위치를 조절하게 된다.

위의 두 이미지는 이런 관계를 시각적으로 비교하였기 때문에 이걸 보는 시점에서는 이해가 쉽다.

하지만, 개발자가 코드로 이부분에 대해서 작성을 한다면 굉장히 헷갈리게 되는 부분이다.

CSS Flex를 사용하여 레이아웃을 코드로 만들기 위해서는 많은 경험이 필요하다.

피그마는 이런 부분을 디자이너가 시각적으로 명확하게 구분하여 사용할 수 있게 UI와 UX를 구성함에 있어 엄청난 연구를 했을거다.

이런 부분들이 필자가 피그마를 애정하는 이유이다.