[피그마] 와이어프레임 그리기 - 상세 페이지

Udemy의 하루 10분으로 끝내는 UXUI 디자인을 위한 실전 피그마 Figma 강의를 듣고 실습해보았다

 

 

 

1. 상세 페이지 및 오토레이아웃

위와 같이 메인페이지 작업시에 했던 내용들을 가져왔다

 

 

오토레이아웃을 적용하기 위해서는 그룹화 작업을 해줘야 한다

 

 

그룹화를 해주면 오른쪽에 Auto layout이 나타난다

 

 

여기서 fill을 클릭해 수정하면 배경화면이 변경된다

 

 

command키를 누르고 글자를 클릭하면 글자 색상 변경이 가능하다

 

 

그리고 기준선?? 을 잡으려고 하면 줄자 모양에다가 마우스를 올려놓그 드래그를 하면 된다

 

 

오른쪽, 왼쪽 모두 20의 공간을 두고 맞췄다

 

 

기준선을 기준으로 나머지도 맞춰주었다

 

 

전체 선택을 하고 가운데 정렬버튼을 클릭한다

 

 

Distribute horizontal spacing을 하면   강의 소개   사이의 간격을 자동으로 조절해준다

 

 

선은 네모를 이용해서 만들었다

 

 

play버튼과 ot를 먼저 오토레이아웃으로 묶는다

다음으로 shift키를 누르고 03:13을 오토레이아웃으로 묶는다

 

이후 오토레이아웃 기능을 이용하여 안쪽 여백을 증가시키고 선을 만든다

 

 

안쪽에서 ot를 추가하고 싶으면 복사 붙여넣기 단축키를 하면 자동으로 늘어나면서 아래쪽에 생성된다

 

 

내용을 바꾸면 오른쪽의 화살표 모양이 변경되는것을 확인할 수 있다

 

 

빨간색 길이를 조절해서 우선 대충 맞춰준다

 

 

전체 완성된 모습은 위와같다

 

 

 

 

강의자료
https://www.udemy.com/share/109mqS/