오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 오토 레이아웃 버튼,플로팅 버튼과 오토 레이아웃 활용에 대해서 알아보겠습니다.
피그마 - 오토 레이아웃 버튼
텍스트 '버튼' 생성하고 오토 레이아웃 설정(shift+A)하면서
디자인 패널에서 패딩을 좌우16, 상하12로 설정합니다.
배경색은 Fill 추가해서 변경하고, 글자는 하얀색으로 변경합니다.
r값은 8로 설정하여 라운드화하고, 간격은 20으로 설정합니다.
버튼을 2개 복사하여 복사된 버튼 2개 다중선택하여 오토 레이아웃 설정합니다.
오토레이아웃_여러개에서 버튼을 복사붙여넣기 합니다.
텍스트 변경하고 왼쪽으로 가도록 절대위치 설정합니다.
복붙을 수행하고 완료하면 텍스트 앞으로 붙여넣고 간격 줄이면 완성됩니다.
피그마 - 플로팅 버튼
텍스트'메뉴' 생성하고 오토레이아웃 설정합니다.
세부 레이아웃은 좌우30, 상하38로 설정하고 리사이징옵션을 Hug에서 fixed로 변경합니다.
배경색 변경하고 글자는 하얀색으로 변경합니다.
원모양을 위해 r값을 53으로 설정하고 그림자효과(Effects)도 넣습니다.
전에 만들었던 아이콘을 텍스트 위로 넣고 아이콘 하얀색으로 변경하고 간격을 설정합니다.
텍스트'타이틀'/상세설명 입력합니다./버튼 생성하고 버튼에 오토레이아웃 설정합니다.
배경색, 글자색을 변경하고 r값을 8로 설정합니다.
타이틀과 상세설명~과 버튼을 다중선택하여 오토레이아웃 설정하고
타이틀과 버튼 사이의 간격은 12로 설정합니다.
상세설명/타이틀을 fixed로 변경하고 W값을 200으로 설정합니다.
상세설명 길게 바꾸고 색을 변경과 전체 복붙하고 다중 선택하여 오토 레이아웃 설정합니다.
패딩 없이 딱 붙는 리스트 생성되는데 사이에 패딩을 20로 설정하고 복붙하면 밑으로 리스트 생성됩니다.
피그마 - 썸네일 카드 UI
썸네일 담당할 직사각형 생성하고 가로320/세로240으로 설정합니다.
r값은 8로 변경하고 글씨체는 noto sans로 변경합니다.
텍스트 복붙(상세설명~)하고 텍스트 내용을 변경합니다.
텍스트 '태그' 생성하고 오토레이아웃 설정합니다.
세부적으로 패딩을 좌우12 설정하고 배경색, 글자색 변경합니다.
태그 변경은 없지만 fixed로 변경하고 r값은 21로 설정하고 위치를 조정합니다.
태그를 3개 만들고 다중선택 오토 레이아웃 설정합니다.
간격은 10로 설정하고 타이틀/상세설명/태그들을 다중 선택하여 오토 레이아웃 설정합니다.
'상세설명~'만 선택해서 Hug를 Fill로 변경하고 container 변경합니다.
'상세설명~' 글자 작성 방향이 세로로 변경되지만 타이틀 Fill로 변경하면 돌아옵니다.
(텍스트 레이어를 Fill 변경하면 영역과 너비가 맞춰집니다)
콘텐츠 레이어를 fixed로 변경하면 하위 레이어들은 콘텐츠 레이어 옵션을 따르게 됩니다.
하위 레이어들을 Fill 옵션으로 맞추면 상위 레이어의 옵션에 따른게 됩니다.
(디바이스나 반응형 웹처럼 가변적인 경우 유용)
프레임 이름을 썸네일로 변경하고 사진을 썸네일 위에 위치를 확인하고
썸네일 레이어를 사진보다 상단으로 올립니다.
사진 레이어를 썸네일 프레임에 넣으면 사진이 썸네일 칸에 맞게 들어갑니다.
텍스트를 썸네일 안에 넣고 텍스트만 오토 레이아웃 설정합니다.
(Clip content가 헤제되면 사진의 원래 모습이 나오게 된다)
레이어 2개 모두 선택하고 오토 레이아웃 설정하고
세부적으로 패딩을 좌우24, 상하30으로 설정합니다.
배경색을 변경하고 스트로크 두께를 1로 설정하고 r값을 8로 설정하여 라운드화 합니다.
피그마 - 오토 레이아웃 활용이 필요한 이유
UI들의 공통점은 일정한 레이아웃을 유지하면서 종종 개체 변경이 일어나는 경우가 있습니다.
홈화면, 알림, 내 정보 등 유저들이 자주 사용하는 메뉴들 위주로 만들지만
운영 정책이나 방향성에 따라 바뀔 수 있습니다.
사용자들의 디바이스에 따라 네비게이션 바의 개체 간격이 달라지는 경우에
디자이너는 모든 상황을 고려해서 디바이스에 네비게이션 바를 유려하게 보일 수 있도록 설계합니다.
모든 화면을 따로 디자인할 수 없기 때문에 오토 레이아웃 기능을 활용해서 대응하면서 서비스 관리합니다.
아이콘이나 텍스트가 바뀌더라도 오토 레이아웃을 잘 정리했다면 개체만 변경해서 사용 가능합니다.
피그마 - 오토 레이아웃 활용
네비게이션 바
프레임에서 안드로이드 라지를 불러오면 하단에 24x24 프레임 생성하고 '홈' 모양으로 렉탱글 생성합니다.
라운드화하고 프레임 여백을 2픽셀이 남도록 조정합니다(snap to pixel grid 체크)
문을 만들고 라운드화하여 위치를 조정하고 여백 2픽셀을 남기고
텍스트로 홈을 생성하고 다중 선택하여 오토 레이아웃 설정합니다.
패딩을 위12, 밑16으로 설정하고 복사 붙여넣고 텍스트를 '검색'으로 변경합니다.
'검색' 아이콘을 만들어서 홈 아이콘을 대체하고 여백을 2픽셀을 설정합니다.
동일하게 '마이' ,'전체' 아이콘을 만들어서 텍스트를 변경하고 여백을 설정하여 완료합니다.
전체 레이어 이름은 네비게이션 메뉴로 변경하고 각 레이어에 Fill로 변경하여 하단에 맞게 사이즈 변경합니다.
썸네일
60x60 정사각형 생성하고 r값을 30으로 라운드화 합니다.
텍스트 '라벨'을 생성하고 여백을 설정하고 오토 레이아웃 설정합니다.
복붙을 진행하고 다중 선택하여 오토레이아웃 설정합니다.
다시 만들어진 레이어들을 전체 복붙하여 다중 선택하여 오토 레이아웃 설정합니다.
여백을 확인하고 위에서 썸네일 프레임에 사진을 넣는 방식으로 사진을 넣고 그에 맞는 텍스트로 변경합니다.
오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 오토레이아웃 버튼,플로팅 버튼과 오토 레이아웃 활용에 대해서 알아보았습니다.
지금까지의 내용은 강의를 통해
보실 수 있습니다
https://mcode.co.kr/
메타코드M
빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다.
mcode.co.kr
- 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄
'Figma > METACODE_Figma' 카테고리의 다른 글
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_플러그인, 모바일/PC 환경 설정 (1) | 2024.02.18 |
|---|---|
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 작업환경 설정, 파일 썸네일, 리소스 (1) | 2024.02.18 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 심볼/텍스트 아이콘, 오토 레이아웃 (1) | 2024.02.16 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 불리언 그룹, Flatten, mask (1) | 2024.02.16 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 섹션/프레임/그룹과 컴포넌스와 인스턴스 및 면/선 (1) | 2024.02.16 |