[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "14. 오토 레이아웃 활용하여 컴포넌트 관리하기"

반응형

https://mcode.co.kr  

메타코드M

 

 

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 오토 레이아웃을 활용해 아이콘과 썸네일을 만들어보았다면 이번엔 이를 활용해 컴포넌트를 관리하는 법을 학습하는 시간입니다.

 

1.  오토 레이아웃을 활용하여 컴포넌트 관리하기

 

 

일정한 레이아웃 내에서 개체 변경이 빈번하여 앱바, 네비게이션바, 홈화면 메뉴 등을 구성해야할 때 컴포넌트를 관리하는 방법에 대해 알아보겠습니다.

 

Subtract selection 으로 사각형을 빼서 귀여운 집을 하나 만들어보았습니다. 

 

그리고 만든 홈 버튼을 화면 하단에 배치한뒤, 세로는 Fixed로 고정, 가로는 Hug로 설정해두었습니다. 다른 아이콘들도 마찬가지로 도형을 합쳐서 Union 그룹으로 만들어준 다음에 하단에 나란히 배치해두었습니다.

 

이렇게 나란히 배치해놓고 보니 우리가 흔하게 사용하는 여러가지 앱에서 많이 봤던 익숙한 배치구도가 생각났습니다. 뭔가 점점 제가 아는 앱의 UI 형태를 구현해나가고 있는 것 같아 재미있었습니다. 

 

 

 

썸네일의 경우도 이렇게 하나의 프레임을 오토레이아웃을 설정해준 뒤에 복붙하여 나란히 도형 여러개를 배치해서 일정한 간격으로 정렬해주었습니다.

 

마스크 기능을 사용해서 다음과 같이 만들어주면 우리가 자주 사용하는 쿠x, 마x컬x 같은 앱처럼 예쁘게 정렬된 모습을 볼 수 있습니다.

 

 

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드