안녕하세요!
디자인 툴 중 가장 강력한 도구 중 하나인 ‘피그마’!
지난번 피그마 다운로드에 이어서 오늘은
피그마 단축키 모음을 공유하려고 합니다! 🙂
단축키가 없어도 피그마 UX/UI는 굉장히 직관적이어서 사용하실 수 있을겁니다.
그럼에도 단축키를 공부해두신다면, 업무 생산성이 진짜 2배는 빨라지거든요! 자주 쓰는 기능이라도 5- 8개 정도 외우시면
진짜 도움 많이 되실겁니다!
우선 빠르게 단축키만 먼저 소개해드리고, 이어서 피그마 용어와 피그마 장점도 뒷쪽에서 함께 풀어보겠습니다!
피그마 단축키 모음
괄호 안에 있는 단축키가 맥북 단축키입니다 🙂
1. 기본 단축키
– Ctrl + S (또는 Cmd + S): 저장
– Ctrl + Z (또는 Cmd + Z): 되돌리기
– Ctrl + Shift + Z (또는 Cmd + Shift + Z): 다시 실행
– Ctrl + C (또는 Cmd + C): 복사
– Ctrl + V (또는 Cmd + V): 붙여넣기
– Delete (또는 Backspace): 삭제
– Ctrl + X (또는 Cmd + X): 잘라내기
2. 이동과 선택
– V: 선택 도구
– H: 핸드 도구 (캔버스 이동)
– Shift + 드래그: 여러 요소 선택
– Alt + 드래그: 복제
3. 그룹화와 레이어
– Ctrl + G (또는 Cmd + G): 그룹화
– Ctrl + Shift + G (또는 Cmd + Shift + G): 그룹 해제
– Ctrl + 드래그: 요소 이동시 그리드 스냅 활성화
– Ctrl + Alt + 드래그: 요소 이동시 그리드 스냅 비활성화
– Ctrl + [ (또는 Cmd + [): 선택된 요소를 한 단계 위로 이동
– Ctrl + ] (또는 Cmd + ]): 선택된 요소를 한 단계 아래로 이동
– Ctrl + Shift + [ (또는 Cmd + Shift + [): 선택된 요소를 맨 위로 이동
– Ctrl + Shift + ] (또는 Cmd + Shift + ]): 선택된 요소를 맨 아래로 이동
4. 텍스트
– T: 텍스트 도구
– Ctrl + B (또는 Cmd + B): 텍스트를 굵게
– Ctrl + I (또는 Cmd + I): 텍스트를 기울임
– Ctrl + U (또는 Cmd + U): 텍스트를 밑줄
– Ctrl + Shift + K (또는 Cmd + Shift + K): 대문자로 변환
– Ctrl + K (또는 Cmd + K): 링크 추가
5. 컴포넌트와 프레임
– F: 프레임 도구
– Alt + 드래그: 프레임의 크기 조절시 프레임 안의 요소들도 함께 크기 조절
– Ctrl + Alt + K (또는 Cmd + Alt + K): 컴포넌트를 생성
– Ctrl + Alt + M (또는 Cmd + Alt + M): 마스터 컴포넌트로 변경
가장 대표적인 키워드 우선 소개해드렸습니다 🙂 이 외에도 피그마는 다양한 단축키를 제공하므로,
작업하면서 필요한 단축키를 찾아보고 활용하는 것이 좋습니다.
피그마 장점 TOP5
도데체 왜 피그마가 좋다고 하는걸까요~? 제가 5가지 핵심 장점을 뽑아봤습니다!
1. 실시간 협업
피그마는 실시간으로 여러 사용자가 동시에 작업할 수 있는 협업 환경을 제공합니다. 실시간으로 다른 사용자의 작업을 볼 수 있고, 코멘트를 달거나 수정 사항을 공유하면서 효율적으로 프로젝트를 진행할 수 있습니다.
2. 웹 기반 디자인 툴
피그마는 웹 브라우저 상에서 작동하는 클라우드 기반의 디자인 툴로, 어디서든 접속하여 작업할 수 있습니다. 이는 작업 환경을 자유롭게 이동하면서 작업할 수 있어, 팀원 간의 협업을 용이하게 합니다.
3. 다양한 기능과 툴
피그마는 다양한 디자인 기능과 툴을 제공하여 사용자들이 다양한 디자인 작업을 수행할 수 있습니다. 이는 UI/UX 디자인, 웹 디자인, 모바일 앱 디자인 등 다양한 분야에서 활용될 수 있습니다. 또한, 다양한 플러그인을 통해 기능을 확장할 수도 있습니다.
4. 실시간 프로토타이핑
피그마는 디자인 작업뿐만 아니라 프로토타이핑 기능도 제공합니다. 이를 통해 디자이너들은 디자인을 실제로 체험하고 테스트할 수 있으며, 사용자들과의 피드백을 받아들여 디자인을 더욱 개선할 수 있습니다.
5. 편리한 공유 기능
피그마는 디자인 파일을 쉽게 공유하고 협업할 수 있는 기능을 제공합니다. 이를 통해 팀원들뿐만 아니라 클라이언트나 이해관계자들과도 손쉽게 디자인 작업물을 공유하고 피드백을 주고받을 수 있습니다. 또한, 공유된 파일은 다양한 형식으로 내보낼 수 있어 협업 및 공유가 용이합니다.
혹시라도 피그마가 처음이셔서,
용어가 애매하거나 여러우실 수도 있을 것 같아요!
아래 용어정도는 미리 알고 계시면 좋아서, 스윽 소개 드리겠습니다!
피그마 주요 용어 정리
1. 프레임(Frame)
화면이나 페이지를 나타내는 요소로, UI/UX 디자인을 할 때 각각의 화면을 개별적인 프레임으로 만들어 관리합니다.
2. 컴포넌트(Component)
재사용 가능한 디자인 요소를 나타내는 것으로, 예를 들어 버튼, 메뉴, 헤더 등을 컴포넌트로 만들어서 프로젝트 내에서 재사용할 수 있습니다.
3. 레이어(Layer)
디자인 요소들의 순서를 나타내는 것으로, 요소를 쌓는 순서를 조절하고 그룹화하여 디자인의 구조를 조직적으로 관리합니다.
4. 툴바(Toolbar)
피그마의 주요 도구들이 위치하는 곳으로, 여기에서 도형, 텍스트, 이미지 등을 추가하고 편집할 수 있습니다.
5. 캔버스(Canvas)
디자인을 작업하는 공간을 나타내는 것으로, 여기에 UI 요소, 이미지, 텍스트 등을 배치하여 디자인을 구성합니다.
6. 프로토타입(Prototype)
디자인의 사용자 경험을 시뮬레이션하는 것으로, 각 화면 간의 전환, 상호작용 등을 설정하여 프로토타입을 만들고 테스트할 수 있습니다.
7. 마스터 컴포넌트(Master Component)
컴포넌트의 기본 버전을 나타내는 것으로, 해당 컴포넌트를 수정하면 해당 프로젝트 내의 모든 해당 컴포넌트가 자동으로 업데이트됩니다.
8. 프로젝트(Project)
디자인 작업을 위한 공간을 나타내는 것으로, 프로젝트 내에서 화면, 컴포넌트, 이미지 등을 관리합니다.
9. 프로토타이핑(Prototyping)
사용자의 경험을 시뮬레이션하는 것으로, 화면 간의 전환, 상호작용 등을 설정하여 실제 사용자의 경험을 시뮬레이션할 수 있습니다.
10. 공유(Share)
작업한 디자인을 공유하는 기능으로, 팀원이나 클라이언트와 작업한 내용을 공유하고 피드백을 주고받을 수 있습니다.
결론
피그마를 사용하면서, 기본적인 용어와 단축키를 알고 계시면, 훨씬 더 가볍고 빠르게 사용이 가능하실거에요!
처음 써보시는 분들을 위해서 장점도 함께 정리했으니, 장점 읽으시고,
나에게 맞는 상황이라면 익혀서 사용해보시는 걸 강력! 강력! 추천드립니다 🙂
함께 보면 좋은 글