본문 바로가기

PM (data)

🗂️ 피그마 - 레이어와 프레임

프레임 

피그마에서 디자인의 기본 단위 , 실제 화면으로 인식되는 개체 "컨테이너"라고도 함

 

프레임은 어떻게 움직일까 , "컨스트레인트" 

프레임이 움직이는 규칙을 지정 

 

프레임 vs 그룹

프레임 그룹
코드 블록이 만들어져 실제 코드로
변환 가능

개발에 필요한 속성 적용 가능
편집, 조정 시 여러 개체를 한번에
조정하기 위해 사용

개발에 필요한 속성 적용 불가능

실무에서 거의 사용 안됨

 

정렬

단일 개체 정렬 다중 개체 정렬
서로가 서로의 기준이 되어 정렬 부모 레이어가 기준이 되어 정렬

오토레이아웃 :

레이어를 쌓고 프레임을 유연하게 배치할 수 있도록 해주는 기능

 

레이아웃을 편하게 쌓아올리는 것 

오토레이아웃 간 지정 규칙 , 리사이징 

 

코드블록 (컨테이너) 

UI = 개체의 크기 + 패딩

패딩 Padding 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더 Border 코드 블록 내부 공간 바로 밖의 가장자리, 실제 코드 블록의 테두리
마진 Margin 코드 블록 바깥의 여백, 다른 코드 블록과의 간격

 

컨테이너 쌓기 - 오토레이아웃 이용