무료 플랜으로 웹사이트에 접속하셨나요? 어플리케이션을 설치할 수도 있어요. 그럼 이제 화면 구성을 살펴보고 이 툴로 무엇을 할 수 있는지 살펴봅니다.
화면 구성 – 주방과 비슷한 프로그램(스케치처럼!)
피그마는 일반적인 그래픽 디자인 툴과 바찬가지로 4개의 영역으로 구분됩니다. 상단의 Toolbar, 좌측의 Layer 패널, 가운데 Canvas, 우측의 Sidebar로 구성됩니다. 스케치와 거의 비슷한 구성을 보여주며 작동도 거의 비슷합니다. 다만 조금씩 차이가 있습니다.
툴바 – 칼, 가위, 젓가락 같은 도구
피그마의 툴바는 삽입 가능한 요소들과 도구가 좌측에 모여 있고, 가운데는 프로젝트의 이름과 위치, 오른쪽에는 계정정보, 공유하기, 프레젠트 기능이 모여 있습니다. 툴바의 가운데 영역은 사용자가 선택하는 요소에 따라 다른 툴이 표시됩니다.
캔버스 – 재료를 꺼내놓고 요리하는 도마
시각 구현물이 표시되는 영역입니다. 프레임, 컴포넌트, 레이어 등 다양한 요소들이 표시되는 공간입니다. 스케치나 일러스트레이터의 아트보드 개념 대신 피그마에서는 프레임이라는 개념을 사용합니다.무한한 공간으로 프레임을 이용해서 공간을 한정합니다.
레이어 패널 – 꺼내 놓은 재료와 자주 쓰는 요리 재료 목록
페이지와 레이어 목록이 표시되는 영역입니다. 페이지를 이용해 큰 그룹을 나누고, 레이어 리스트에서 다양한 요소를 확인할 수 있습니다. 레이어 목록 뿐만 아니라 에셋을 따로 확인할 수 있습니다. 에셋에서는 반복해서 사용하는 요소를 정의한 컴포넌트와 라이브러리를 찾을 수 있습니다. 라이브러리를 검색할 수 있고 업데이트를 관리하기도 합니다.
사이드바 패널 – 사람에 맞춰 재료 다르게 설명하기
레이어 요소에 대한 자세한 정보를 표시하는 영역입니다. 스케치와 다르게 레이어를 용도에 따라 다르게 살펴볼 수 있습니다. 레이어의 디자인 요소를 편집하기 위한 Design, 구체적인 인터렉션을 정의하기 위한 Prototype, 개발을 하기 위한 정보를 표시하는 Inspect로 구성됩니다.
