본문 바로가기

[UX, UI 디자인 입문]/UX, UI 학습일지

[Figma 활용법 (1)] 2주차 학습일지


ㆍ프레임과 그룹
-피그마에서 코드 블록을 만드는 프레임과 개체를 묶는 그룹 기능의 차이를 알아야 더 정확한 구조를 설계할 수 있다.
-프레임은 UI의 기본 설계 단위인 '블록'의 개념이며 그룹은 개체를 묶는 '기능'

ㆍ오토레이아웃과 컨스트레인트
-UI 구조 설계에서 아주 핵심적인 역할
-UI 설계 외에도, 레이아웃을 조금 더 편하고 빠르게 쌓아 올리도록 도와줌
-컨스트레인트는 오토레이아웃을 사용해서 UI와 레이아웃을 설계하는 정렬과 배치 규칙

ㆍ프레임 Frame
☞피그마에서 코드 블록을 만드는 기능, 실제 화면으로 인식하는 개체
-프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다.
-프레임은 다른 개채나 프레임을 넣을 수 있기 때문에, 컨테이너라고도 부른다.

ㆍ그룹
☞여러 개체를 하나로 담는 기능
-여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
-그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용하거나 복잡한 디자인을 정리할 필요가 있을 때 그룹을 사용해서 정리하기도 한다.
-실무에서 그룹을 사용하는 빈도는 매우 적은 편

레이어 패널 앞으로 옮기기(Z값 높이기) : 레이어에서 오른쪽클릭 - Bring to front 단축키 ], 뒤로 보내기 Send to back 단축키 [

ㆍ오토레이아웃
오토레이아웃의 개념
- 개체를 패딩으로 감싸 컨테이너를 만들 때 사용한다

※오토레이아웃은 왜 알아야 할까?
- 다양한 크기의 모니터와 휴대폰의 해상도를 사용하기에 앱과 웹을 만들때 그 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어주는 기능이 바로 오토레이아웃
- 컨테이너를 간격에 맞게 규칙적으로 정렬행주는 기능을 수행한다.