Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_약관 동의 화면,메뉴 화면 구성

 

 

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

피그마 프로그램의 약관 동의 화면,메뉴 화면 구성에 대해서 알아보겠습니다.

 

 

피그마 - 약관 동의 화면

 

012

 

리소스 파일에서 안드로이드 스테이터스 바를 복붙하여 라이브러리에 준비합니다.

컴포넌트화 하고 다중 선택 후 컴바인 애즈 베리언츠를 이용하고

publish하면 라이브러리를 최신화하고 디자인하는 파일에서 연결되어 있는지 확인합니다.

 

0123

 

에셋에서 스테이터스바를 드래그하여 붙여넣어서 사용합니다.

라이트에서 다크로 변경하고 백그라운드 레이어를 찾아서 배경색을 안보이게 처리합니다.

로그인 프레임을 찾아서 동일하게 하고 배경색도 안보이게 처리합니다.

 

0123

 

텍스트를 적고 스타일을 저장하여 라이브러리에서 사용할 수 있도록 합니다.

create a new text style을 이용하여 새롭게 텍스트 스타일을 저장합니다.

새로운 텍스트 스타일을 publish하여 라이브러리를 최신화합니다.

 

012345

 

텍스트를 적어서 약관동의 이융를 나타내고 있습니다(Title1 스타일)

약관 동의 항목도 텍스트를 적어서 나타내고 있습니다(Body3 스타일)

약관 동의 항목 앞에는 정사각형 레탱글을 이용해 체크박스를 만듭니다.

오토 레이아웃 설정하고 정렬을 중앙으로 바꿉니다.

 

라이브러리 파일에 가서 아이콘을 다시 만듭니다.

만든 아이콘을 컴포넌트화하고 퍼블리시하여 최신화합니다.

 약관 동의의 텍스트를 변경하고 프레임 셀렉션하여 마진값 24를 두고 정리합니다.

 

01234

 

라이브러리에 화살표 오른쪽 아이콘을 만들어 최신화합니다.

화살표 오른쪽 아이콘을 사용하여 약관 동의에 사용합니다.

회원가입 버튼을 사용하여 라벨 버튼을 만들어 라이브러리에 저장하고 최신화합니다.

라벨 버튼을 넣어서 동의로 바꾸면 완료하게 됩니다.

 

 

피그마 -  메뉴 상세 페이지

 

 

안드로이드 라지 프레임 불러오고 메뉴상세라는 이름으로 프레임명 변경합니다.

상단에 스테이스터스 바를 배치하고 백그라운드 컬러는 안보이게 처리합니다.

메뉴 상세의 화면 구성을 텍스트를 통해 나타냅니다.

 

012345

 

화면명에 댕댕이 영양제를 생성하고 화살표 왼쪽을 만들어 라이브러리를 최신화합니다.

공유하기 아이콘을 만들어 라이브러리에 최신화합니다.

화면명 양쪽에 아이콘을 넣고 위치를 정하여 정리합니다.

 

01

 

직사각형 360x360 레탱글을 만들어 넣습니다.

Unplash 플러그인을 사용하여 사진을 넣습니다.

텍스트를 이용해 제품 설명을 하는 문장을 넣습니다.

그 밑에 부연설명하는 텍스트를 넣습니다.

사진과 제품명을 오토 레이아웃 설정합니다.

 

 

가격 정보 텍스트를 적고 처리한 후 오토 레이아웃 설정합니다.

직사각형 레탱글을 생성하여 선을 만들고 가격 정보 레이아웃과 오토 레이아웃 설정합니다.

 

 

텍스트 '보고 계신 제품과 유사한 제품이에요.'를 생성하고

여백 관리하고 위 레이아웃과 오토 레이아웃 설정합니다. 

레탱글 모양을 3개 만들어서 오토 레이아웃 설정하고 

Unplash 플러그인을 사용하여 사진을 넣습니다.

 

 

라벨 버튼을 통해 구매와 장바구니 버튼을 만들어서 넣습니다.

 

 

---

 

 

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

피그마 프로그램의 약관 동의 화면,메뉴 화면 구성에 대해서 알아보았습니다.

 

 

 

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



https://mcode.co.kr/

메타코드M

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