피그마 Auto Layout 업데이트, 다가올 미래

클릭 한번으로 코드로 만들어지는 순간

출처 : https://www.figma.com/community/file/784448220678228461

며칠전 피그마 오토레이아웃 업데이트가 있었다.

필자는 새로워진 오토레이아웃 기능을 살펴 보았다.

기존에는 상하, 좌우 패딩값만 설정할 수 있었다.

업데이트 이후 top, bottom, left, right에 패딩값을 각각 다르게 적용 가능했다.

이와 함께 alignment 기능이 추가되어 start, center, end에 정렬을 할 수 있게 되었다.

또한 space between 설정을 통해 나브바, 탭메뉴등을 디자인할때 각 버튼의 간격을 일정하게 배치할 수 있게 되었다.

피그마로 직접 그린 이미지

이번 업데이트의 내용을 개발관점에서 살펴보자.

위 이미지는 필자가 디자인을 개발에 적용하기 위해 작업하는 순서이다.  

카드에 대한 계층구조 설계, 시각적으로 표시하기 위해 계층 순서에 따라 각기 다른 백그라운드 컬러 적용

계층 구조안에 텍스트, 이미지, 아이콘등 구성요소 삽입

계층 구조 구분을 위한 백그라운드 컬러 숨기기

피그마로 직접 그린 이미지

위 이미지는 계층구조 설계를 위해 피그마에서 적용한 오토레이아웃 설정값들을 계층별로 나열한것이다.

여기서 눈여겨볼 사항들은 Resizing 설정값이다.

설정값은 Fixed width ( height ), Hug contents, Fill container 세가지이다.  

Fixed width ( height ) : 넓이와 높이에 고정값을 주는 설정

Hug contents : 자식에 의해 나의 사이즈가 결정되는 설정

Fill container : 부모에 의해 나의 사이즈가 결정되는 설정

피그마로 직접 그린 이미지

개발에 적용했을때와 비교해보자.

아무런 설정을 하지 않으면 Hug contents,

높이나 넓이( width: 240px, height: 80px )에 고정값을 설정하면 Fixed width ( height ),

사용가능한 높이나 넓이( flex-grow: 1 )를 채우면 Fill container이다.

피그마로 직접 그린 이미지

위의 이미지는 앞서 설명한 내용을 바탕으로 개발코드로 만들어본거다.

작업영역 좌측에 있는 카드 컴포넌트가 계층구조잡기에 해당하고 우측 컴포넌트가 구성요소가 삽입된 상태이다.

우측의 코드는 좌측 계층구조에 따라 코드화된 구조라보면된다.

이렇게 코드화된 구조의 각 계층 요소들은 피그마의 inpect창을 참조하여 설정값을 넣은 것이다.

피그마로 직접 그린 이미지

이렇게 만들어진 코드를 브라우저상에서 열어 본 결과이다.

처음 피그마툴에서 디자인한 그대로 코드화 된 것이다.

이런 일련의 과정을 통해 피그마툴에서 계층 구조만 잘 잡고 디자인을 한다면 바로 개발 코드에도 적용할 수 있는 것을 확인했다.

이러한 사실을 바탕으로 필자는 앞으로 피그마 생태계 안에서 우리가 디자인한 결과물이 클릭 한번으로 코드로 만들어지는 순간이 곧 올 것이라 생각한다.