1. 캔버스와 페이지 그리고 레이어

1-1 캔버스 속성설정

1. 배경색 변경하기

2. 측정자 표시하기
1. 우측패널

2. 좌측패널 홈버튼

3. ~R

2. 화면명칭

1. 좌측패널
2. 메인메뉴
3. 툴바
4. 파일명
5. 우측패널
6. 탭버튼

3. 좌측패널

3-1 레이어

1. 툴바에서 프레임 클릭
2. 4:3 프레임생성
3. 프레임이름변경→왼쪽패널
1. 표시된 곳을 두번 클릭

4. 페이지 추가하기
1. 무료플랜의 경우 프로젝트 내의 문서는 최대 3페이지까지 생성됨

생성된 페이지의 수정은 마우스 우클릭

3-2 커뮤니티에서 예제받기

1. 커뮤니티는 피그마 크리에이터들이 자신의 작업물을 공유하는 공간으로 정말 유용한 리소스를 다운 받아서 사용할수 있다

🔗예제파일주소

1. 커뮤니티 접속
1. 홈클릭 → 지구모양 클릭

2. 김망고 검색

3. 하트⇒open

3-3 레이어조작

3-3-1 변경

1. 예제 파일을 열고 레이어프레임을 찾는다

2. 해당프레임으로 바로 이동
3. 레이어이름변경

2. 일괄변경

3. 레이어의 누적 순서변경
1. 레이어를 선택후 원하는 위치로 드래그 하다가 굵은선이 보일때 드랍한다

2. 왼쪽패널의 드래그드랍으로 순서를 이렇게 바꿔보자

3. 레이어 위에서 우클릭으로도 할수있다

3-3-2 잠금/숨김

1. 숨기기 프레임으로 이동
2. 왼쪽 패널의 숨김, 잠금 기능을 사용해본다

3. 아래와 같은 상태로 완성한다


4. 레이어의 아이콘을 더블클릭하면 해당 위치로 이동한다

3-4. 에셋

에셋은 디자인 자산들을 관리하는 패널

1. 레이어패널 우측의 에셋을 클릭

2. 요렇게 해보자

4. 상단툴바

📢

4-1 Move

1. 무브 프레임으로 이동
2. 무브툴과 스케일을 사용하여 아래와 같이 만들어보자

4-2 프레임

섹션: 프레임을 정리하는 기능

프레임을 만들고 섹션안에 포함할수 있다

프레임을 생성하고 우측 패널에서 속성을 조절해보자

슬라이스 는 분할해서 저장하는 기능이다

슬라이스로 쪼갠후 export 해본다

4-3 셰잎

여러가지 도형툴을 사용하여 조정해본다

우측의 속성관리자와 도형의 조절점을 활용하여 다양하게 조절해보자

4-4 펜

4-5 텍스트

주어진 텍스트로 화면과 같이 만들기

• 기본쓰기와 영역안에 쓰기 를 해보자
• 우측패널의 속성을 조정하여 폰트를 다양하게 편집해보자
• 폰트의 편집이 끝나면 esc 를 누른다 . 엔터는 문단내의 줄바꿈이다.

📢

우측패널의 설명

1. 글씨체
2. 글씨두께
3. 행간
4. 문단간격
5. 문단정렬
6. 글씨크기
7. 장평
8. 리사이징:
1. 문단의 크기 조정

9. 베이스라인:
1. 폰트의 기준선 정렬변경

10. 세부설정버튼

4-6 상황에 맞는 메뉴 (Contextual Tool)

피그마는 편집자의 상황에 따라 메뉴의 구성이 다르게 나온다

4-6-1 상단툴바

• 아무것도 선택하지 않았을때

1. 파일명 변경
2. 파일관리메뉴
• 선택했을때

4-7 우측상단

4-7-1 공유설정

1. 초대할 사람의 이메일 과 권한
2. 링크로 배포시 링크에 대한 권한
3. 링크카피
4. 임베드코드 생성
5. 커뮤니티에 배포하기

4-7-2 미리보기

1. 미리보기 공유
2. 미리보기 창크기 설정
3. 코멘트 등록기능
4. 다시보기
5. 페이지 넘김(프레임단위)

4-7-3 Missing fonts

없는 폰트가 있을경우 대체하라는 메시지

4-7-4 보기옵션

캔버스 화면의 표시를 설정할수 있다

5. 우측패널

5-1 디자인패널

우측 디자인패널의 정렬, 면, 선 색등 의 다양한 속성을 활용하여 아래와 같이 만들어보자

5-2 프로토타입패널

• 미리보기 환경을 설정할수 있다

1. iphone8로 설정해본다

2. 그후 인터렉션을 추가하고 프레임을 연결후 미리보기를 해보자


5-3 inspect

코드나 리소스 파일의 속성 등을 코더에게 제안해주는 기능

5-4 도움말버튼

화면우측 하단의 플로팅버튼을 클릭하여 단축키 패널을 열어보자