피그마 기초를 배우기 위해 유튜브 영상을 찾아보던 중, 저의 피그마 화면과 영상 속 피그마 화면이 다르다는 점을 인지하게 되었습니다. 불과 6개월 전 영상에서도 많은 부분이 다르게 나타나는 것을 확인할 수 있었습니다. 그래서 저만의 피그마 인터페이스 정리본을 만들어보려 합니다.
Figma Interface
- Account(계정): 나의 계정. 테마/세팅/언어/세팅 등을 설정할 수 있습니다.
- Draft(시안목록): 개인 작업을 위한 임시 저장 공간 입니다.
- Design File: 팀과 실시간으로 협업하며 최종 디자인을 다듬는 공유 파일입니다.
- Tab(+): 새로운 파일을 추가하거나 기존 파일을 불러올 수 있습니다.
- FigJam board: Figma의 협업 화이트보드 도구이다. 기획 단계에서 브레인스토밍을 하고, 아이디어를 시각화하며 팀원과 함께 실시간으로 작업할 수 있습니다.
- Explore Community: 디자이너와 개발자가 템플릿, 플러그인, 위젯, 디자인 시스템 등을 공유하고 발견할 수 있는 공간입니다.
이 커뮤니티에서 다른 사람들의 프로젝트를 탐색하고 복제하여 영감을 얻거나, 자신의 작업을 공유해 협업과 피드백을 받을 수 있습니다.
- Layer(레이어 패널): 화면 왼쪽에 위치하며 디자인의 구조와 계층을 보여줍니다. 각 요소의 위치를 쉽게 파악하고 그룹화하거나 정리할 수 있습니다.
- Assets: 디자인 요소(컴포넌트, 아이콘, 색상 스타일 등)를 저장하고 관리하는 공간입니다. 프로젝트에서 자주 사용하는 디자인 요소를 이 패널에 저장해 빠르게 끌어다 사용할 수 있습니다.
- Properties(속성 패널): 화면 오른쪽에 위치하며 선택한 객체의 속성을 조정할 수 있는 영역입니다. 색상, 크기, 윤곽선, 그림자 등 다양한 스타일 설정과 속성들을 관리할 수 있습니다.
- Canvas(캔버스): 중앙 작업 공간으로, 디자인을 직접 배치하고 수정하는 메인 공간입니다. 실시간 협업이 가능해 여러 사용자가 동시에 작업할 수 있습니다.
- Toolbar(도구 바): 캔버스 하단에 위치한 툴바는 다양한 도구들을 제공하며, 셀렉션 툴, 텍스트 추가, 도형 생성 등 디자인 작업에 필요한 기능을 제공합니다.
Tool Bar
피그마는 친절한 프로그램입니다. 직관적인 아이콘으로 어떤 기능을 할 것인가 쉽게 알아 볼 수 있고 단축키를 쉽게 보고 찾을 수 있게 만들어 주었습니다.
-
Move(V): 요소 드래그 이용
-
Hand tool(H): 배경 이동
-
Scale(K): Zoom in, Zoom out
-
Frame(F): 아트보트, 도화지
-
Section(Shift+S): Frame, 요소 묶기
-
Slice(S): 선택한 부분 내보내기
-
Rectangle(R): 사각형 그리기
-
Line(L): 선 그리기
-
Arrow(Shift+L): 화살표 그리기
-
Ellipse(O): 원형 그리기
-
Polygon: 다각형 그리기
-
Star: 별 그리기
-
Image(Ctrl+Shift+K): 이미지 넣기
-
Pen(P): 벡터 형태의 직선과 곡선을 그릴 수 있는 도구
-
Pencil(Shift+P): 자유로운 손그림 스타일의 선을 그릴 수 있는 도구
-
Text(T): 텍스트 삽입
-
Comment(L): 디자인에 피드백을 남기고 팀원들과 실시간으로 의견을 주고받을 수 있도록 도와주는 도구
-
Action(Shift+/ or K): 다양한 기능과 도구에 빠르게 접근할 수 있도록 돕는 창입니다. 원하는 명령어를 검색하거나 추천 작업을 선택할 수 있습니다.
모든 툴바의 기능을 순서대로 사용해 보았다.
그리고 Shift+Ctrl+/ 를 누르면 원하는 단축키를 쉽게 찾을 수 있다. (아래와 같은 사진이 창에 뜬다.)
