- 단축키
Ctrl + 0 아트보드 화면에 꽉차게 만들기
Ctrl + +,- 아트보드 사이즈 확대, 축소
Ctrl + [,] 레이어 순서 변경
Ctrl + Shift + [,] 레이어 순서 제일 위, 밑으로 변경
Ctrl + G 그룹으로 묶기
Ctrl + R 이름 바꾸기
Ctrl + Shift + L 잠금
Ctrl + Shift + H 보이게 하기
Ctrl + D 복제
키보드 상하좌우 레이어 순서 바꾸기
Shift + A 오토레이아웃 만들기
Shift + R 자
Shift + 1 화면 전체 보이기
Ctrl + Alt + K 컴포넌트 생성
프레임 두 개 이상 선택시 서로의 간격을 정할 수 있음
프레임 밖으로 벗어난 도형 안 보이게 하기 / 보이게 하기
레이어 순서가 곧 보여지는 순서인데
Ctrl + [ , ]로 순서를 바꿀 수 있다
그룹으로 묶기
이름 한꺼번에 바꾸는 법
이름의 숫자만 변경하는 법 (\d), 여러 개 이름의 숫자 변경(\d+)
Tidy up = 모두 같은 간격으로
도형의 O = 잡고 위치 변경 가능
도형 사이의 I = 간격 조절 가능
프레임 사이즈를 변경할 때 레이어 위치 고정하기 위한 툴
오토레이아웃
안에 있는 텍스트와 도형의 간격을 자동으로 조절해주는 기능
크기 안 맞는 이미지를 오토 레이어 안에 삽입시 Ctrl 누른 채로 넣으면 됨
- 레이아웃 그리드
8dp 그리드를 위해
그리드 1 = 사이즈 1, 오퍼시티 3%
그리드 2 = 사이즈 8, 오퍼시티 20%로 생성
컬럼 사용시
해당 표를 참고하여
그리드 생성
Grid Calulator
이상한 이유로 페이지 너비의 4px이 계산되지 않는데 이럴 땐 남는 너비를 마진으로 넘긴다
이렇게 설정하면 프레임이 커지고 작아지는 거에 따라서 구성품들의 크기도 같이 커짐
- 컴포넌트와 베리언트
원본 : 컴포넌트, 복제품 : 인스턴스
위 그림에서 마름모꼴 네개가 합쳐진 모양이 컨포넌트
컴포넌트는 등록하여 사용 (Crtl + Shift + K)
컴포넌트 변경시 인스턴스도 함께 변경됨
변경한 인스턴스를 원래 컴포넌트로 변경
변경한 인스턴스를 원래 컴포넌트에 적용
인스턴스를 컴포넌트에 귀속되지 않는 개별 개체로 변경
해당 컴포넌트 검색시 '버튼'이라고 검색해도 됨
https://fontawesome.com/v5/cheatsheet/free/regular
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
해당 사이트에서 원하는 아이콘 복사 후 피그마에서 붙여넣기
폰트 이름과 종류를 선택해준다
베리언트 생성 후 Properties에서 각각의 옵션을 생성해서 구분시켜줌
그리고 어셋에서 버튼을 가져와서
옵션을 바꾸는 것으로 쉽게 변경 가능
오늘은 피그마에 대해 더 배웠는데
피그마,,,꽤 어렵다
어도비랑 다른 기능들이 나오니 낯설기도 하고
강의 버전과 실제 버전이 달라서 헷갈리기도 한다
원래 오늘 파트3 완강을 목표로 했지만
너무 힘드러,,
집중력이 떨어져서 월요일 완강을 해야겠다
'마케터 일지' 카테고리의 다른 글
| 제로의 마케터 일지 - 일러스트레이터 (1) (0) | 2023.01.10 |
|---|---|
| 제로의 마케터 일지 - 피그마 시작하기(3) (0) | 2023.01.09 |
| 제로의 마케팅 일지 - 피그마 시작하기 (1) (0) | 2023.01.06 |
| 제로의 마케터 일지 - 카피라이팅(2) (0) | 2023.01.05 |
| 제로의 마케터 일지 - 카피라이팅(1) (1) | 2023.01.04 |
