UXUI TIL 0529

오늘의 학습

 

Figma 활용법 (1) 2주차

1. 파일 가져오기

• 피그마 파일 홈에서 > 상단 맨 왼쪽 import 버튼 클릭

2. 프레임과 그룹의 차이

• 프레임 : 코드 블록 > 코드로 변환 가능하고 블록으로 인식된다.
• 그룹 :  요소를 한덩어리로 보기 위해 편의상 묶어놓는다.
• 프레임은 모든 객체를 하나의 객체로 인식하기 때문에 동시에 바뀌는 변화는 없다. 그룹은 가능

3. 레이어

• 레이어는 쌓는 구조가 거의 코드의 구조이다.
• 위에서 아래로 화면에서 뒤로 쌓이는 방향이다.

 

4. 오토 레이아웃

• 프레임을 배치하고 정렬해서 레이어를 쌓을 수 있게 한다.
• 객체를 패딩으로 감싸 컨테이너를 만들 때 사용한다.
• 컨테이너 끼리 간격을 맞춰서 규칙저긍로 정렬해주는 기능 
• 프레임, 객체를 우클릭 > out layout 선택
• 프레임 아닌 객체에 오토 레이아웃을 걸면 겉에만 패딩이 생김
• 프레임인 객체에 오토 레이아웃을 걸면 자체에 오토 레이아웃이 생김

5. 컨스트레이트

• 부모사이즈가 변할 때 자식 객체가 일정방향과 크기로 고정되는 것 

6. 리사이징

• 부모의 리사이징 값에 따라 자식 값이 변함 / 반대도 가능.
• fixed > 고정값
• hug > 자식 컨테이너의 크기가 기준 (부모만 가능)
• fill > 부모값에 맞춰 변형(자식만 가능)