안녕하세요, 9년차 UIUX 디자이너 써니입니다.
프로그램을 배우려 할때 항상 인터페이스부터 훑고 수업을 진행하죠?
오늘은 피그마의 각 패널과 실무에서 자주 사용하는 단축키에 대해서 먼저 간단하게 공유하고자 합니다.
오늘 바로 외우지 않으셔도, 작업을 하면서 실제로 사용하다보면 점점 몸에 익으니
급하게 외우려하지는 않으셨으면 합니다.
그러니까 일단, 이런 단축키가 있다 정도만 알아두세요.
1. 피그마 인터페이스 살펴보기 - 시작 화면
- 왼쪽 사이드바 : 계정 정보 / 중요 파일 / 프로젝트 그룹
- 콘텐츠 상단 : 피그마 작업 화면 생성 버튼 3가지 (뉴 디자인 피그마 / 뉴 피그마잼 / 피그마 파일 불러오기)
- 콘텐츠 하단(썸네일) : 최근 작업한 프로젝트 목록
왼쪽 사이드바에 있는 'Favorite files(중요 파일)'은, 우측 썸네일 화면에서 별 아이콘을 클릭한 프로젝트들이 나오는 목록입니다.
저 같은 경우는 작업시에 자주쓰이는 아이콘들은 별도의 'Icon'이라는 프로젝트 파일을 하나 생성하여 그 안에 모아 놓고 쓰고있는데요, 그리고 나서 중요파일로 설정을 해 놓으면, 굳이 썸네일 화면에서 찾을 필요없이 Favorite files목록에서 바로 접근이 가능하기때문에 아주 유용하게 쓰고 있는 기능입니다.
2. 피그마 인터페이스 살펴보기 - 작업 화면
시작화면에서 'New design file'버튼이나 'Ctrl/Command + N' 단축키를 누르면 새로운 디자인 파일을 생성할 수 있습니다.
피그마의 작업 화면의 인터페이스는 다른 프로그램들보다 심플하게 구성되어 있습니다.
도구 모음
왼쪽 사이드 바 ( 레이어, 에셋, 페이지 )
왼쪽 사이드바는 레이어패널, 에셋패널,페이지패널 3가지 패널탭으로 이루어져 있습니다.
각각의 패널명을 클릭하면 하단에 세부 구성이 나타납니다.
1. 레이어 패널
피그마의 레이어패널은 포토샵, 일러스트의 레이어 패널과 동일한 기능을 합니다.
설계자가 특정 요소를 쉽게 선택하고 조작할 수 있도록 화면에 있는 모든 설계 요소의 계층 목록을 표시합니다.
레이어 패널안에 있는 각각의 레이어에 마우스를 올리면 나타나는 잠금아이콘과 눈아이콘을 클릭하여 레이어를 움직이지 않게 잠그거나, 눈에 보이지않게 끌수도 있습니다.
또한 각 레이어별로 사용성에 맞게 그룹화하거나 이름을 변경할수도 있으며,
마우스 우측 클릭으로 레이어를 클릭하면 나오는 추가 패널을 통해 컴포넌트를 만들거나 마스크를 씌우거나 정렬을 하는 등 다양한 작업이 가능합니다. ( 자주 사용할 것 같은 기능은, 기왕이면 단축키를 숙지해놓으시는것을 추천합니다.)
2. 에셋 패널
피그마의 에셋패널은 만들어놓은 색상, 스타일, 컴포넌트 등을 관리하는 패널입니다.
해당 프로젝트 내의 사용자가 정의해놓은 컬러나 컴포넌트 아이콘 등을 리스트업해서 볼 수 있으며, 원하는 곳에 끌어다 넣을 수 있습니다.
디자인시스템을 만들어놓고 사용해야하는 프로젝트에 유용하게 사용되는 패널입니다.
아이콘 같은 경우를 예를들자면, 기준이되는 부모 아이콘 만들어놓고 다양한곳에 복사된 자식 아이콘을 끌어다씁니다.
이때, 아이콘의 모양이나 색상등을 변경하고 싶으면 기준이되는 부모 아이콘만 수정하면 자식 아이콘도 자동으로 수정내용으로 업데이트되어 반영됩니다. (상단 예시 동영상 참고)
3. 페이지 패널
피그마의 페이지 패널은, 단일 파일내에서 서로 다른 페이지로 디자인을 구성할 수 있도록 해주는 기능입니다.
해당 기능을 사용하여 작업 페이지를 분리함으로, 팀원들과 작업이 꼬이지 않게 쉽게 협업하고 작업을 공유할 수 있습니다.
저 같은 경우에는, 해당 기능을 이용하여 디자인시스템 과 UI디자인 페이지를 분리하여 작업을 진행하는 편입니다.
좀 더 큰프로젝트에서는 디자인시스템을 세분화하여 color,font style, icon...으로 페이지를 제작하고 디자인시스템을 배포하기도합니다.
오른쪽 디자인 패널
작업화면 우측은 Design, Prototype, Inspect 패널로 구성되어 있습니다.
◦ Design 패널 : 선택된 레이어에 해당하는 변경 가능한 디자인 옵션들이 나옵니다. (크기, 오토레이어, 색상 등등)
◦ Prototype 패널 : 화면을 프로토타입화 하기 위한 도구패널입니다.
◦ Inspect 패널 : 선택한 레이어에 해당하는 퍼블리싱 가능한 css코드를 보여줍니다.
3. 자주 사용하는 피그마 단축키는요?
단축키 사용은, 작업 속도를 줄일 수 있는 핵심 요소 중 하나입니다.
아래는 피그마의 단축키 목록들입니다.
제가 자주사용하게되는 단축키에대해서는 별도의 표시를 해 놓았습니다.
| Tool / File | |
| 새파일 | command + N |
| ✭ 줌인 | command + + |
| ✭ 줌아웃 | command + - |
| ✭ 전체화면 | command + \ |
| ✭ Scale | K |
| ✭ Move | V |
| ✭ 핸드 (컨버스 이동) | spacebar + 드래그 |
| Comment | C |
| Text | T |
| 색상추출 | I (i) |
| 사각형 | R |
| 원형 | O |
| 라인 | L |
| 슬라이스 | S |
| Edit / Arrange | |
| 선택 영역 이미지 형태로 복사 | Command + Shift + C |
| 레이어 이름 변경 | Command + R |
| 오브젝트 간격 정렬 - 가로 간격 | Control + Option + T |
| 오브젝트 간격 정렬 - 세로 간격 | Contro + Option + V |
| 레이어 순서 변경 - 앞으로 | Command + ] |
| 레이어 순서 변경 - 맨앞으로 | Command + Option + ] |
| 레이어 순서 변경 - 뒤로 | Command + [ |
| 레이어 순서 변경 - 맨뒤로 | Command + Option + [ |
| Auto layout 만들기 | Shift + A |
| Auto layout 해제하기 | Shift + Option + A |
| ✭ 그룹 만들기 | Command + G |
| 프레임 만들기 | Command + Option + G |
| 그룹/프레임 해제하기 | Command + Shift + G |
| 컴포넌트 만들기 | Command + Option + K |
| 인스턴트 분리하기 (자식 컴포넌트 분리) | Command + Option + B |
| ✭ 좌우반전 | Shit + H |
| 위아래 반전 | Shift + V |
| UI | |
| ✭ 전체화면 (헤더, 사이드바 숨기기) / 해제 | Command + . 또는 Command + \ |
| 코멘트 숨기기 / 해제 | Shift + C |
| 그리드 숨기기 / 해제 | Shift + G |
| 레이어 패널 계층 접기 | Option + L |
| 마우스커서에 메시지 작성하기 (코멘트 아님) | / |
| 전체 단축키 보기 | Control + Shift + / |
| ✭ 눈금자 | Shift + R |
'UIUX 디자인' 카테고리의 다른 글
| [UXUI디자인/피그마] 9년차가 알려주는 실무 용어 2탄 - UI편ㅣ첫출근 겁내지 마세요 (2) | 2024.03.05 |
|---|---|
| [UXUI디자인] 9년차가 알려주는 진짜 실무 용어 1탄 - UX편ㅣ출근 겁내지 마세요 (0) | 2024.01.14 |
| [UXUI디자인/피그마] empty화면 디자인-무료 소스 제공 (0) | 2023.12.26 |
| [실무 피그마 Intro] 포토샵, XD, 스케치보다 피그마인 이유 (0) | 2023.02.20 |
