할때마다 헷갈리는 피그마 리사이징...
Hug와 fill
헷갈려서 이거 적용해봤다가 저거 적용해봤다가... 이제 그런 날들은 그만...
Fixed는 고정/공통
Hug
자식 컨테이너의 크기에 맞춰 조정 - 부모만 쓸 수 있다
Fill
부모 컨테이너의 크기에 맞춰 조정- 자식만 쓸 수 있음
오토레이아웃과 컨스트레인트, 리사이징 값을 이용해서 만들어본 6가지 예제
1번- 부모를 hug하고 자식을 fill로 채우기
2번- 아래 자식만 늘어나게 fill로 하고 위에거는 fixed
3번- 위쪽 프레임은 거리가 일정하게 유지되고 아래쪽 프레임은 비율이 유지된다는데 일단 보기에 아래거랑 위에거랑 합쳐지면서 늘어나게 하는 법은 오토 레이아웃 아니고 컨스트레인트로 아래것만 scale 적용
4번- 옆에는 아래 안보이고 4번만 쭉 늘어나게 오른쪽 높이만 fill
5번- 내부 자식 컨테이너 늘리면 부모도 늘어나게 부모 hug 왼쪽 자식 fix
6번- 간단하게 넓이만 fill
그리고 래디어스나 컬러, 아무튼 ui를 구성하는 기초 요소 재료를 파운데이션이라고 한다
파운데이션의 구성은 다음과 같다
- 색상
- 서체
- 간격
- 곡률
- 그리드
- 고도
- 아이콘
컬러 스타일 만드는 방법
컬러 스타일은 2~3가지로 만들고 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합
1(포):3(센):6(백) 법칙
포인트 컬러(프라이머리 컬러, 엑센트 컬러)
핵심적인 부분에 쓰이는 컬러, 사용자가 누르는 부분 정도에만 사용
백그라운드 컬러
배경색(기본 흰색)
세컨더리 컬러
배경색에서 도드라지는 부분, 서브 컬러, 포인트 컬러를 뒷받침할 수 있도록 부분부분 사용(잘 안씀)
10단계로 만들지만 5단계로 줄여서 써도 되고 단계없이 하나의 색으로 써도 ㄱㅊ
컬러를 10단계로 만들기->이름 바꾸기->스타일 플러그인 적용하면 스타일을 한꺼번에..만들수가있...!!!!
검색창에 검색하면 상단 2번째쯤에 나온다
예전에 그냥 하나하나 노가다로 스타일 만들었던 것 같은데... oh no...
역시 피그마는 플러그인 활용이 짜세인 것 같다....
'내배캠 TIL' 카테고리의 다른 글
| Containment 요소 정리, 오토레이아웃 실습 (TIL 2일차) (3) | 2025.12.30 |
|---|---|
| 본캠프 TIL 1일차 정리 (Button,FAB,Snackbar) (2) | 2025.12.29 |
| 사전캠프 마지막!! (TIL 4일차) (0) | 2025.12.26 |
| 피그마 기초 지식 정리 (TIL 2일차) (0) | 2025.12.23 |
| 스파르타 부트캠프 시작!! (TIL 1일차) (1) | 2025.12.22 |