📌
1. 피그마 툴
2. 프레임
3. 그룹
1. 피그마 툴
- 스케일 툴
같은 비율을 유지한 채 크기 변화를 시켜주는 툴
이동 툴 버튼 옆의 화살표를 클릭하여 스케일 툴로 변경 가능
이렇게 내가 원하는 비율로 확대 / 축소가 가능하다.
하지만 소수점이 생기는 경우가 많아 사용을 지양한다.
- 이미지 리사이징
도형에 이미지를 삽입한 후 리사이징이 가능하다.
왼쪽부터 fill, fit, crop, tile
fill
도형 전체에 빈틈없이 이미지를 깔아줌 (이미지가 도형을 삐져나가는 경우도 있음)
fit
이미지가 도형 밖으로 나가지 않도록 끝에 딱 맞춰서 깔아줌 (빈틈이 보이는 경우도 있음)
crop
이미지가 보일 수 있도록 도형을 조정하는 기능
tile
타일이 깔리듯 이미지가 반복
- outline stroke
테두리와 면이 함께 존재하는 도형을 테두리와 면으로 분리하는 기능 (테두리 정보를 없애준다.)
- flatten
회전, 곡률 등 도형의 크기 변화와 관련된 설정들을 없애주는 기능
회전, 곡률 등이 있는 도형을 디폴트값으로 만들어주는 기능
➡️ 디폴트값이 된 상태에서 변화를 주는게 쉬워짐
배운 피그마 툴들을 이용하여 과제 수행 (🤭)
2. 프레임 (Frame)
📌
피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 계체
디자이너는 요소를 빈화면에 배치를 하지만 개발자는 코드 블록을 쌓는다.
UI를 설계할 때는 코드로 변환이 가능한 구조로 만들어야하는데 그 구조를 위한 기능이 프레임이다.
다른 계체나 프레임을 프레임 안에 넣을 수 있기 때문에 컨테이너 (Container)라고도 불린다.
특히 UI를 만들 때는 프레임으로 만들어야한다.
3. 그룹 (Group)
📌
여러 개체를 하나로 묶어주는 기능
여러 개체를 한 번에 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
프레임과 달리 그룹은 코드 블록으로 인식되지 않는다. (이미지 객체 / 벡터 객체로 인식된다.)
위의 두 사각형은 프레임으로 묶어주었고 아래 두 사각형은 그룹으로 묶어주었다.
프레임으로 묶어준 요소에 배경색을 적용하면 두 사각형을 묶는 요소의 바닥에 배경색이 적용되고 그룹으로 묶어준 요소에 배경색을 적용하면 그룹 요소 안의 두개의 사각형의 색이 한 번에 변경된다.
(테두리, 크기 변화도 동일하게 적용)
이처럼 목적에 맞게 프레임과 그룹을 적절히 사용해야겠다.
🤓 내일 학습할 내용
부모-자식 관계와 레이어 정렬
오토 레이아웃 기능
프레임과 컨스트레인트
