38 인터페이스예제
피그마 인터페이스 예제
정보
예제파일 다운로드: https://url.kr/5qeozf
1. 캔버스와 페이지 그리고 레이어
1-1. 캔버스 속성 설정
<li>
배경색 변경하기
</li>
<li>
측정자 표시하기
우측 패널에서 설정:
좌측 패널 홈버튼에서 설정:
</li>
2. 화면 명칭
- 좌측 패널
- 메인 메뉴
- 툴바
- 파일명
- 우측 패널
- 탭 버튼
3. 좌측 패널
3-1. 레이어
<li>
툴바에서 프레임(Frame) 클릭
</li>
<li>
4:3 프레임 생성
</li>
<li>
프레임 이름 변경 → 왼쪽 패널에서 표시된 곳을 두 번 클릭
</li>
<li>
페이지 추가하기
무료 플랜의 경우 프로젝트 내의 문서는 최대 3페이지까지 생성됩니다. 생성된 페이지의 수정은 마우스 우클릭으로 합니다.
</li>
3-2. 커뮤니티에서 예제 받기
커뮤니티는 피그마 크리에이터들이 자신의 작업물을 공유하는 공간으로 유용한 리소스를 다운받아서 사용할 수 있습니다.
<li>
커뮤니티 접속: 홈 클릭 → 지구 모양 클릭
</li>
<li>
김망고 검색
</li>
<li>
하트 → Open
</li>
3-3. 레이어 조작
3-3-1. 변경
<li>
예제 파일을 열고 레이어 프레임을 찾습니다.
</li>
<li>
해당 프레임으로 바로 이동합니다.
</li>
<li>
레이어 이름 변경
</li>
<li>
일괄 변경
</li>
<li>
레이어의 누적 순서 변경: 레이어를 선택 후 원하는 위치로 드래그하다가 굵은 선이 보일 때 드랍합니다.
왼쪽 패널의 드래그 드랍으로 순서를 바꿔봅시다.
레이어 위에서 우클릭으로도 할 수 있습니다.
</li>
3-3-2. 잠금/숨김
<li>
숨기기 프레임으로 이동합니다.
</li>
<li>
왼쪽 패널의 숨김, 잠금 기능을 사용해봅니다.
</li>
<li>
아래와 같은 상태로 완성합니다.
</li>
요약
레이어의 아이콘을 더블클릭하면 해당 위치로 이동합니다.
3-4. 에셋
에셋(Asset)은 디자인 자산들을 관리하는 패널입니다.
<li>
레이어 패널 우측의 에셋을 클릭합니다.
</li>
<li>
아래와 같이 해봅시다.
</li>
4. 상단 툴바
4-1. Move
무브(Move) 프레임으로 이동하여 무브 툴과 스케일(Scale)을 사용하여 아래와 같이 만들어봅시다.
4-2. 프레임
섹션(Section)은 프레임을 정리하는 기능입니다. 프레임을 만들고 섹션 안에 포함할 수 있습니다.
프레임을 생성하고 우측 패널에서 속성을 조절해봅시다.
요약
슬라이스(Slice)는 분할해서 저장하는 기능입니다. 슬라이스로 쪼갠 후 export 해봅니다.
4-3. 셰잎
여러 가지 도형 툴을 사용하여 조정해봅니다. 우측의 속성 관리자와 도형의 조절점을 활용하여 다양하게 조절해봅시다.
4-4. 펜
4-5. 텍스트
주어진 텍스트로 화면과 같이 만들어봅시다.
- 기본 쓰기와 영역 안에 쓰기를 해봅시다.
- 우측 패널의 속성을 조정하여 폰트를 다양하게 편집해봅시다.
- 폰트의 편집이 끝나면
esc를 누릅니다. 엔터(enter)는 문단 내의 줄바꿈입니다.
우측 패널 설명
- 글씨체
- 글씨 두께
- 행간
- 문단 간격
- 문단 정렬
- 글씨 크기
- 장평
- 리사이징(Resizing): 문단의 크기 조정
- 베이스라인(Baseline): 폰트의 기준선 정렬 변경
- 세부 설정 버튼
4-6. 상황에 맞는 메뉴 (Contextual Tool)
피그마는 편집자의 상황에 따라 메뉴의 구성이 다르게 나옵니다.
4-6-1. 상단 툴바
아무것도 선택하지 않았을 때:
- 파일명 변경
- 파일 관리 메뉴
선택했을 때:
4-7. 우측 상단
4-7-1. 공유 설정
- 초대할 사람의 이메일과 권한
- 링크로 배포 시 링크에 대한 권한
- 링크 카피
- 임베드(embed) 코드 생성
- 커뮤니티에 배포하기
4-7-2. 미리보기
- 미리보기 공유
- 미리보기 창 크기 설정
- 코멘트 등록 기능
- 다시 보기
- 페이지 넘김(프레임 단위)
4-7-3. Missing fonts
없는 폰트가 있을 경우 대체하라는 메시지가 표시됩니다.
4-7-4. 보기 옵션
캔버스 화면의 표시를 설정할 수 있습니다.
5. 우측 패널
5-1. 디자인 패널
우측 디자인 패널의 정렬, 면, 선 색 등의 다양한 속성을 활용하여 아래와 같이 만들어봅시다.
5-2. 프로토타입 패널
미리보기 환경을 설정할 수 있습니다.
<li>
iPhone 8로 설정해봅니다.
</li>
<li>
그 후 인터렉션(Interaction)을 추가하고 프레임을 연결 후 미리보기를 해봅시다.
</li>
5-3. Inspect
코드나 리소스 파일의 속성 등을 코더에게 제안해주는 기능입니다.
5-4. 도움말 버튼
화면 우측 하단의 플로팅(floating) 버튼을 클릭하여 단축키 패널을 열어봅시다.