피그마에서 반응형 웹 만들기 - 오토레이아웃

오늘은 새롭게 업데이트된 피그마의 오토레이아웃 Wrap과 min/max width를 이용하여 반응형 디자인을 해볼게요~

이번 업데이트로 반응형 디자인도 피그마에서 쉽게 작업할 수 있습니다.

또한 Variable을 이용하면 여러 벌의 디자인을 만들지 않아도 퍼블리싱의 break point 표현도 가능하게 되었습니다.

​

Break Point란?

브레이크 포인트란 반응형 웹에서 사이즈가 변하는 지점을 말합니다.

예를 들어 앱 가로 사이즈는 375인데, 태블릿 744 사이즈로 앱을 본다고 한다면 보이는 형태가 달라질 것입니다.

노트북이나 데스크톱에서는 말할 것도 없고요. 그래서 디바이스에 맞게 디자인도 최적의 형태로 변하게 되는데요.

퍼블리싱의 변하는 지점을 Break Point라고 합니다.

대부분 앱사이즈, 태블릿 사이즈, 데스크톱 사이즈 등 3 지점을 브레이크 포인트로 둡니다. (예외의 경우도 많습니다. 서비스의 목적에 따라 달라질 수 있어요.)

 

 

피그마에서 반응형 웹 디자인 만들기 - 오토레이아웃, min/max

위 영상을 보시면 break point마다 디자인이 변하는 걸 볼 수 있습니다.

그런 의미에서 피그마에서 여러 디바이스에 대응 가능한 반응형 디자인을 만들어 보겠습니다.

이번 피그마 업데이트로 인해 효율적이고 편리한 작업이 되었어요~

​

 

반복될 디자인을 만들어줍니다. 저는 쇼핑몰형 카드를 만들어 줬어요.

이미지와 텍스트를 만들어주고 오토레이아웃을 적용해 줍니다. (오토레이아웃 단축키 Shift + A)

 

 

그리고 오토레이아웃이 적용된 프레임에 Min width와 Max width도 입력해 줍니다.

기존의 Width 입력하는 곳에 추가 메뉴가 생겼으니 눌러보시면 찾을 수 있어요~

하단의 Remove min and max 버튼은 적용된 min/max 값을 모두 지울 수 있는 메뉴예요.

Frame 설정은 fill x hug로 해주세요~

 

 

만들어 놓은 오토레이아웃 프레임을 위와 같이 복사해서 정렬해 줍니다. (복사 단축키 Ctr + D)

​

 

 

이미지와 내용을 바꿔주고 전체 선택한 다음 오토레이아웃으로 감싸줍니다.

전체 프레임은 Auto layout Wrap으로 해주세요.

프레임 설정은 Fixed x hug입니다.

 

 

이제 만들어놓은 상품 목록을 디자인 프레임 안에 넣고 Constraints을 Left and Right로 설정해 줍니다.

Constrants은 상품목록이 들어간 프레임, 즉, 나를 포함한 프레임에 종속되는 위치 설정값입니다.

나를 포함한 프레임이 늘어나면 같이 늘어나고 줄어들면 같이 줄어들게 세팅해 줍니다.

​

Constraints란?

Constraints(제약 조건) 기능은 디자인 요소의 크기와 위치를 상대적으로 설정하여 반응형 디자인을 구현하는 데 도움을 주는 기능입니다.

Constraints를 사용하면 디자인 요소를 부모 요소에 상대적으로 정렬하고 크기를 조절할 수 있습니다. 이를 통해 부모 요소의 크기나 위치가 변경되어도 자식 요소는 일관된 비율과 간격을 유지할 수 있습니다.

​

Constraints에는 다음과 같은 설정 옵션이 있습니다:

1. Left: 부모의 크키가 늘어나도 자식은 왼쪽에 정렬됩니다.

2. Right: 부모의 크기가 늘어나거나 줄어들어도 자식은 오른쪽에 정렬됩니다.

3. Left and right: 부모의 크기가 늘어나거나 줄어들면 자식도 그에 따라 너비가 조정됩니다.

4. Center: 부모의 크기가 늘어나거나 줄어들어도 자식은 그에 따른 중앙정렬이 됩니다.

5. Scale: 부모의 크기가 늘어나거나 줄어들면 자식도 그에 비례하여 크기가 늘어나거나 줄어듭니다.

​

Constraints를 사용하면 디자인 요소의 반응형 동작을 쉽게 구현할 수 있으며, 다양한 화면 크기나 장치에 대응하는 디자인을 만들 수 있습니다.

 

 

 

프레임의 크기를 조절하여 브레이크 포인트에 맞게 변화되는지 테스트해 봅니다.

오늘은 피그마에서 반응형 디자인을 만드는 과정을 알아봤습니다.

Variables로 반응형 디자인도 가능하다고 하니 조금 더 스터디해 보고 공유하도록 할게요~

 

 

 

피그마에서 반응형웹 만들기 - Auto layout

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

레탑피그마 오픈 채팅방 문의

https://open.kakao.com/o/sJdtEyCe

레탑 피그마