Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 심볼/텍스트 아이콘, 오토 레이아웃

 

 

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서

피그마 프로그램의 심볼/텍스트 아이콘, 오토 레이아웃에 대해서 알아보겠습니다.

 

 

피그마 - 심볼아이콘 

심볼아이콘

구글 머터리얼 가이드에서 확인 하고,

아이콘은 범용적으로 쓰기 위해서 간단하게 그리는 것이 좋음

 

0123

 

프레임을 24x24 생성하고 원을 20x20으로 생성합니다.

(원이 잘리는 경우는 디자인 패널에서 Clip content 체크해제)

원을 프레임의 중앙으로 이동하고 Shift+X 눌러서 면/선 색 반전하고 검은색으로 변경합니다.

직사각형 렉탱글 생성(느낌표 모양)하고 더블클릭하면 모양을  변경할 수 있습니다.

r값 변경하여 라운드화를 진행하고 원 레탱글 생성하여 검은 색의 느낌표 모양을 만듭니다.

검은 원의 스트로크 크기를 2로 변경하고 아웃라인 스트로크 진행합니다.

유니온 그룹 지정하고 플래튼 지정 병합하면 끝납니다.(더블클릭해서 수정 가능)

 

 

피그마 - 심볼, 텍스트 조합 아이콘

 

 

01234

 

프레임을 24x24 생성하고 직사각형을 18x20으로 생성합니다.

중앙으로 위치하고 여백의 픽셀은 2 이상인지 체크합니다.

면/선 반전하고 스트로크 두께를 2로 변경하고 R값은 2로 변경합니다.

 아웃라인 스트로크 진행하고 텍스트 툴을 이용해 텍스트를 폰트와 크기등을 변경합니다.

아웃라인 스트로크 진행하고 더블클릭으로 텍스트 상세 변경이 가능합니다.

다중 선택하고 알트나 옵션키를 누르면 여백의 크기를 알 수 있습니다.

미묘하게 중앙이 아닌 경우 상단의 피그마 로고 선택 Quick actions 눌러서

snap to pix grid를 헤제하면 됩니다. (자동으로 여백의 크기를 맞춰줌)

테두리 검은색으로 변경하고 플래튼 지정하여 완성합니다.

 

 

피그마 - 오토 레이아웃

 

 

오토 레이아웃

 피그마에서 제작된 UI가 화면 크기가 바뀔 때마다 정렬이 바뀌어야 하므로

UI 레이아웃을 조정할 필요 없이 자동 조정 옵션을 설정해주는 것입니다,.

 

 

레이아웃으로 설정할 수 있는 옵션은 3가지가 있습니다.

 

개체 크기

정렬, 방향, 절대 위치 등을 다 포함되어서 개체 크기가 변화한다

예를 들어 아이폰에서는 예쁜 디자인이 PC웹에서는 비슷하게 만들면 

상대적으로 작아보일 수 있고, 화면 사이즈의 비율에 따라서

오토 레이아웃에서 조절 가능합니다.

 

정렬 및 방향

아이콘이나 텍스트 개체들이 왼쪽 정렬이라고 가정한다면

왼쪽을 기준으로 정보의 값,텍스트가 늘어나고 태그 등이 추가로 붙고

왼쪽 기준에서 오른쪽으로 개체가 추가되었으면 좋겠다고 디자인한 경우

오토 레이아웃에서 명명이 가능합니다.

(모든 디바이스에서 동일하게 적용된다)

 

절대 위치

ios의 에러화면을 디자인 했다고 가정한 경우

특정 그래픽을 화면 정중앙에 꼭 있었으면 좋겠다고 

생각한 경우 정중앙이라는 절대 위치도 오토 레이아웃에서 명명 가능합니다.

 

어떤 비율로 디자인이 베리에이션 되던지 

오토 레이아웃에서 위 사항들은 자동으로 설정할 수 있습니다.

 

 

피그마 - 오토 레이아웃 설정값

 

 

라벨이라는 컴포넌트는 라벨이라는 글자와 휴지통 아이콘을

감싸고 하늘색 배경으로 구성되어 있습니다.

라벨이라는 컴포넌트의 텍스트 길이가 늘어났을 때 휴지통 아이콘과

끝 아이콘이 그에 맞게 잘 이동하는 것이 관건입니다.

오토 레이아웃을 이용하면 여백값을 동일하게 유지하면서 사이즈 변경이 가능합니다.

 

 

라벨이 강의용으로 변경되었을 때 아이콘과 하늘색 배경이 여백값에 맞게 이동하였습니다.

만약 오토 레이아웃이 따라오지 않는 경우에는 아이콘과

배경이 연장되지 않고 텍스트만 늘어나게 됩니다.

 

012

 

오토레이아웃이 적용되었고 리스트가 늘어남에 따라 여백값이 조정되어

 계속 연장되었고 안의 객체들도 동일하게 적용되었습니다.

라벨과 텍스트 사이의 거리도 늘어남에 따라 자연스럽게 연장되어 적용되었습니다.

 

 

텍스트를 적고 Add auto layout을 적용하고 디자인 패널에서 세밀한 조정이 가능합니다.

 

개체 크기

복사 붙어넣기를 하는 경우, 오른쪽으로 나오게 됩니다.

Auto layout에서 변경 가능한데 방향, 간격, 좌우 상하의 패딩 값 등을 균일하게 적용이 가능하고

좌우 상하의 패딩 값은 개별적으로도 설정이 가능합니다.

 

 

정렬 방법도 오토 레이아웃의 방향 설정 오른쪽 칸에서 설정할 수 있습니다.

 

 

절대 위치

오토 레이아웃 밑의 Contraints에서 설정 가능한데 가이드선이 나와서 쉽게 설정할 수 있습니다.

위와 오른쪽 기준으로 두면 왼쪽으로 붙여넣기 되는 것을 확인할 수 있습니다.

(기준을 어떻게 두냐에 따라 유용하게 사용 가능) 

 

---

 

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서

피그마 프로그램의 심볼/텍스트 아이콘, 오토 레이아웃에 대해서 알아보겠습니다.

 

 

 

지금까지의 내용은 강의를 통해 
보실 수 있습니다


https://mcode.co.kr/

메타코드M

• 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄