피그마 AI 자동화 오토레이아웃

피그마 AI 자동화 오토레이아웃 기능은 UI/UX디자인 뿐만 아니라 상세페이지, 광고 등 다양한 디자인 작업에서 효율성을 높이는 핵심 도구입니다.

초보자도 손쉽게 적용할 수 있으면서 실무에서 다양한 컴포넌트 제작과 반응형 디자인에 많이 활용됩니다.

그럼 지금부터 피그마 AI자동화 오토레이아웃 기능을 함께 알아보도록 할게요.

피그마 오토 레이아웃이란?

피그마 AI 자동화 오토레이아웃 기능은 프레임이나 컴포넌트 안의 요소들을 자동으로 정렬하고 간격을 유지해주는 기능이에요. 버튼, 카드, 네이게이션 바처럼 크기가 변해도 깔끔하게 정리되는 디자인에 많이 활용되며 최근에는 마케팅디자인을 완성할때에도 많이 사용되고 있습니다.

피그마 오토레이아웃으로 네비게이션 메뉴바 만들기

STEP 1 프레임 만들기

피그마 하단 도구바에서 Frame을 선택합니다. 그런다음 네비게이션 메뉴바를 만들 사이즈로 완성합니다.

STEP 2 텍스트 입력하기

네비게이션 메뉴바를 만들기 위해 텍스트를 입력합니다. 메뉴1, 메뉴2 이런식으로 텍스트를 2개 입력해주세요

STEP 3 오토레이아웃 아이콘 선택하기

메뉴 텍스트를 모두 선택한 후 오른쪽 디자인패널에서 오토레이아웃 아이콘을 선택합니다.

STEP 4 가로, 세로 간격설정하기

오토레이아웃을 적용하면 간격은 얼만큼 줄지 결정해서 적어줍니다. 80으로 설정해줍니다.

디자인 패널에서 가로방향으로 설정하면 메뉴바가 가로로 설정됩니다. 오토레이아웃을 선택하면 이렇게 간격이 일정하게 맞춰지는 걸확인할 수 있습니다.

가로가 아닌 세로로도 설정이 가능합니다. 간격은 동일하게 맞춰줍니다.

STEP 5 디자인해서 메뉴 완성하기

이번엔 도형을 그린다음 버튼형식으로 디자인에서 네비게이션 메뉴를 완성해봅니다.

도형을 이용해서 완성하는 경우 도형과 텍스트를 먼저 그룹화 한다음 오토레이아웃을 설정하면 좋습니다.

마우스 오른쪽 클릭 후 [Grop Selection]을 선택합니다.

그런다음 전체선택 후 오토레이아웃 버튼을 선택한다음 복사해서 메뉴디자인을 완성해줍니다.

이렇게 설정하면 동일한 간격으로 별도의 조정없이 피그마에서 네비게이션 메뉴 디자인이 완성됩니다.

완성예시

실무에서 피그마 AI 오토레이아웃 활용 예시

피그마 AI 자동화 오토레이아웃 기능은 반복적인 디자인 제작에 적합합니다.

그렇기 때문에 잘 활용한다면 효율적으로 디자인 시간을 단축할 수 있게됩니다.

마지막으로 이번에 배운 오토레이아웃 기능을 더 잘 활용할 수 있도록 실습예제도 준비했으니 실습예제를 활용해서 오토레이아웃기능을 확실하게 익혀보세요~!