1. 위치와 크기 속성
1. 정렬
따로 그룹화를 하지 않아도 shift를 누른채로 정렬하면 함께 정렬된다.
오른쪽 탭이 아닌 캠버스에서도 정렬 설정이 가능하다.
가운데 원을 선택하면 정렬을 유지하면서 객체들의 순서를 바꿀 수 있다.
2. 위치 및 크기
수를 입력할 때 사칙연산도 가능하다.
모서리 둥글기 설정
ios의 모서리 이미지 문제를 처리하기 위해 Corner smoothing 을 처리할 수 있다.
Frame의 Clip content 기능을 이용해서 Frame 밖의 Content 를 자를 수 있다.
자른 Content는 사라지지 않고 숨김 처리 된다.
* X, Y 부분을 더블 클릭 하면 소수점을 정리할 수 있다.(오름차순)
또는 Snap to pixel grid 기능을 이용하면 자동으로 pixel 단위로 떨어지게 된다.
2. 프레임과 콘스트레인츠
1. 프레임 그리기
- 프레임 툴 선택 후 화면에 드래그
- 프레임 툴 선택 후 프레임 프리셋 이용
프레임 옵션
프레임의 형태를 바꿀 수 있다.
* Frame은 내부 Content에 영향이 없으나, Group은 Content에 영향이 가므로 상황에 맞게 사용한다.
2. 콘스트레인츠
Frame 내부의 Content 위치를 고정할 수 있다.
파란색 핀으로 고정 위치를 설정할 수 있다.
* 반응형 UI 작업에 많이 사용!
3. 레이아웃 그리드
화면을 일정한 규칙으로 나누는 것 -> 일관성 있는 디자인!
그리드 용어
- margin : 양 끝 여백
- Columns(width or height) : Content 넓이
- Gutter : 간격 넓이
Frame 선택 후 Layout grid를 설정하면 그리드 설정이 가능하다.
Type==Stretch를 설정하면 자동으로 넓이가 설정된다.
* Shift+G 로 그리드 보임/숨김 설정을 할 수 있다.
설정한 그리드를 저장할 수 있다.
4. 레이어 합성 모드
Layer 합성 메뉴 종류
Layer를 합성 후 채도, 명도, 색을 조절한 후 합성 설정으로 이미지를 다양하게 바꿀 수 있다.
5. 텍스트툴
자간(Line height), 줄간격(Letter spacting)은 %로 설정할 수 있다.
텍스트 박스의 고정 설정을 할 수 있다.
Auto Layout 설정과 함께 자주 사용되며 반응형에 특히 많이 사용된다.
* Shift + A 를 통해 Auto Layout 설정 가능
더 자세한 Text 설정을 할 수 있다.
6. Fill과 Stroke
* 커서 상태에서 I 를 클릭하면 스포이드로 색을 추출할 수 있다.
이미지를 삽입하면 해당 이미지를 도형에 알맞게 설정할 수 있다.
Stroke 의 세부 설정
Line을 선택하는 경우 Stroke에서 끝 모양을 설정할 수 있다.
7. Effects
요소 선택 후 요소에 주는 효과 설정
4가지 효솨를 설정하고 왼쪽에서 효과를 자세하게 설저할 수 있다.
Backgroud Blur는 보통 요소 뒤에 있는 객체에 주는 효과.
만든 효과를 Style로 설정해 저장할 수 있다.
8. Import&Export
1. 이미지 import 하는 법
- 로컬 파일 드래그앤 드롭
- 웹 파일 복사 후 Ctrl + V
- 도형 툴의 플레이스 이미지 사용하기
2. 피그마 파일 import
- 피그마 파일 저장 및 불러오기
- 스케치 등 다른 확장자 파일 불러오기 가능
3. 파일 export
Ignore overlapping layers 를 선택하면 뒤에 있는 배경은 투명처리 되어 export한다.
텍스트를 export하는 경우(svg) 추가 설정이 가능하다.
텍스트 박스의 영역, id 태그, 텍스트 백터 설정 등을 추가로 할 수 있다.
여러 이미지를 선택 후 한번에 export할 수 있다.
* Ctrl + Shift + E 를 이용해 특정 요소는 제외할 수 있다.
하나의 pdf 파일로 내보낼 수 있다.
#회고
디자인을 할 건 아니고..그냥 어느정도 툴만 익히려고 빠르게 보고 있다.
디자인은 진짜 다른 영역인 것 같아...디자인팀 하는거 보면 신기하다.
'Figma' 카테고리의 다른 글
| 핵심 기능으로 빠르게, 피그마 실무 50강사전(5) (0) | 2024.12.21 |
|---|---|
| 핵심 기능으로 빠르게, 피그마 실무 50강사전(4) (0) | 2024.12.21 |
| 핵심 기능으로 빠르게, 피그마 실무 50강사전(3) (0) | 2024.12.21 |
| 핵심 기능으로 빠르게, 피그마 실무 50강사전(1) (1) | 2024.12.14 |
