[패스트캠퍼스] UXUI 디자인 첫걸음 with 피그마 (9 - Figma 용어)

---

목차

                                                                           7-1. Figma

                                                                           7-2. Figma Interface Terms

                                                                           7-3. Figma Short Keys

---

피그마 로고

패스트캠퍼스 단기(8주) 교육 코스인 UX/UI 디자인 첫걸음 수업에서는 Tool 하나만을 다룬다.

바로 웹 브라우저 기반의 협업 인터페이스 디자인 도구인 피그마 (Figma) 이다.

 

이번에는 피그마 작업을 하면서 사용하게 됬던 용어와 단축키를 정리해 본다.

 

Ch7. 피그마와 관련된 UX/UI 디자인 용어

 

7-1. 피그마 (Figma)

• 웹 기반 인터페이스 디자인을 위한 협업 툴
• UX/UI 디자인에 초점을 둔 기능을 포함하며 실시간 협업, 다양한 벡터 그래픽스 편집기 및 프로토타이핑 도구 제공
• 피그마 모바일 앱을 사용하면 모바일과 태플릿 기기에서 실시간으로 피그마 프로토타입과 상호작용 및 보기 가능

7-2. 피그마 인터페이스 용어 (Figma Interface Terms)

• 초안 (Drafts) : 생성한 모든 초안 버전을 볼 수 있으며, Deleted 탭에서 삭제했던 파일도 볼 수 있음
• 커뮤니티 (Community) : 다른 피그마 사용자가 공유하는 파일 및 플러그인을 찾아볼 수 있는 공간
• 피그잼 (FigJam) : 온라인 회의 및 워크샵에 사용되는 디지털 화이트보드 툴
• 캔버스 (Canvas) : 피그마의 작업공간으로 화면 중앙에 위치한 메인 영역
• 플러그인 (Plugins) : 피그마의 기능을 확장하고 디자인 프로세스를 더 쉽게 만듬
• 기본 설정 (Preferences) : 객체 드래그 및 선택한 요소의 가시성과 관련된 설정을 사용자가 변경할 수 있음
• 라이브러리 (Libraries) : 디자인 파일에서 사용할 수 있는 컴포넌트(Compoments)와 스타일이 포함됨
• 레이어 (Layers) : 캔버스에 추가된 모든 객체(Objects)를 볼 수 있음. 각 객체 (Objects) 는 별도의 레이어이며 옆에는 해당 유형을 나태나는 아이콘이 표시됨
• 에셋 (Assets) : 디자인 파일에서 사용할 수 있는 컴포넌트(Compoments)가 표시됨. 아이콘, 버튼 또는 보다 복작합 사용자 인터페이스 요소가 될 수 있음. 검색(Ctrl+F)을 통해 액세스 권한이 있는 현재 파일 및 라이브러리에서 구성 요소를 검색 할 수 있음. 에셋은 디자인의 일관성과 재사용성을 촉진하고 디자인 프로세스 간소화하여 시간을 절약함
• 페이지 (Page) : 디자인 파일에 페이지를 무제한 추가할 수 있음. 각 페이지에는 캔버스 배경이 있으므로 하나의 파일에 별도의 프로토타입(Prototypes)을 만들 수 있음
• 디자인 (Design) : 프레임, 모양 및 텍스트와 같은 모든 레이어의 속성을 보고 조정
• 프로토타입 (Prototype) : 프로토타입의 설정과 파일의 요소 간 연결
• 검사 (Inspect) : 프로젝트에서 선택된 개별 객체(Object) 를 CSS, Android 및 iOS 형식의 코드로 변환
• 프레임 (Frame) : 특정 화면 크기에 맞추어 디자인을 하는 경우 그 디자인을 담는 공간 피그마는 많아지는 객체 (Objects)를 관리할 때 묶음(Group)이 아닌 상자(Frame)채로 감싸서 관리
• 컴포넌트 (Compoments) : 컴포넌트는 단어의 의미 그대로 화면의 구성 요소를 가리키며 한 번 이상 반복적으로 사용하는 UI. 디자인 시스템의 핵심 빌딩 블록 중 하나로 Button, Switch, Toggle, Card, Text Field, Color 처럼 반복적으로 쓰이는 주요 컴포넌트를 미리 디자인 에셋으로 저장해두면 UI 제작 시 많은 시간 단축이 가능. 일반적으로 구글, 애플, IBM 등의 디자인 시스템을 참고하여 컴포넌트를 생성 (폰트, 색상, 크기, 명칭 등).
• 인스턴스 (Instance) : 컴포넌트를 복제한 객체(Object). 컴포넌트를 수정하면 일괄 수정됨. 개별 수정 가능하며 컴포넌트로 덮어씌울 수 있음. 인스턴스의 기본 구조(컴포넌트 내 레이어, 제약, 객체 크기 등)는 변경할 수 없음. 디자인 영역에는 디자인 일관성을 위해 반드시 인스턴스를 사용하고 컴포넌트는 따로 관리 권장
• 객체 (Object) : 텍스트, 도형, 그룹, 프레임, 컴포넌트, 인스턴트 등 전반적인 요소들를 의미. 객체(프레임, 컴포넌트, 그룹 등)는 부모도 될 수 있고 자식도 될 수 있음
• 부모 (Parents) : 다른 객체(Object)를 포함하는 객체. 즉 프레임, 컴포넌트, 그룹을 의미. 프레임만 있는 경우 부모라고 볼 수 없음. 대부분의 상황에서 부모는 프레임.
• 자식 (Children) : 부모 내부에 속하는 객체(Object)를 의미. 내부에 객체가 있는 프레임에서 프레임은 부모이고 내부의 객체는 모두 자식.
• 형제 (Sibilings) : 동일한 부모(상위 항목)에 포함되어 있는 객체를 의미. 부모에 하나 이상의 객체가 있는 경우, 자식 객체는 형제 관계
• 레이아웃 그리드 (Layout Grids) : 디자인에 대해 시각적 구조 생성
• 오토 레이아웃 (Auto Layout) : 컨텐츠에 반응하는 다이나믹 프레임을 생성
• 클립 콘텐츠 (Clip Content) : 프레임의 범위를 벗어나는 객체를 숨김
• 제약 (Constraints) : 부모 프레임의 크기를 변형할 때 자식 객체가 응답하는 방식을 정의
• Reparenting : 객체가 현재 부모(프레임)에서 벗어나 다른 프레임에 포함되는 것을 의미
  • 객체를 추가할 때, Space Bar를 누르면 피그마가 객체를 Reparenting 하는 것을 방지
  • 프레임의 경계를 넘겨 객체를 이동할 때 Space Bar를 누르면 해당 객체를 현재 부모에 유지

7-3. 피그마 단축키 (Figma Shortcut Keys)

• Figma 웹 상에서 단축키 (Ctrl + Shift + /) 를 통해 확인 가능
• 자주 사용하는 기본 단축키

기능	Windows	Apple
단축키 창 열기	Ctrl + Shift+ /	Command + Shift + /
퀵 액션 (기능 검색)	Ctrl + /	Command + /
커서챗	/	/
UI 숨기기 / 보이기	Ctrl + \	Command + \
다른 사람 커서 숨기기 / 보이기	Ctrl + Alt + \	Command + Option + \
프레젠테이션 모드	Ctrl + Alt + Enter	Command + Option + Enter
선택 도구	V	V
프레임 도구	F	F
펜 도구	P	P
연필 도구	Shift + P	Shift + P
텍스트 도구	T	T
사각형 도구	R	R
타원 도구	O	O
선 도구	L	L
화살표 도구	Shift + L	Shift + L
코멘트 추가	C	C
코멘트 보이기 / 숨기기	Shift + C	Shift + C
스포이드	I	I
화면 확대	Ctrl + '+'	Command + '+'
확면 축소	Ctrl + '-'	Command + '-'
화면 비율 100% 전환	Ctrl + 0 또는 Shift + 0	Command + 0 또는 Shift + 0
모든 레이어 접기	Alt + L	Option + L
작업영역 보기	Shift + 1	Shift + 1
선택영역 보기	Shift + 2	Shift + 2
레이어 패널로 전환	Alt + 1	Option + 1
에셋 패널로 전환	Alt + 2	Option + 2
다음 프레임으로 이동	N	N
이전 프레임으로 이동	Shift + N	Shift + N
다음 페이지로 이동	Page Up	Page Up 또는 Fn + ↑
이전 페이지로 이동	Page Down	Page Down 또는 Fn + ↓
텍스트 볼드	Ctrl + B	Command + B
텍스트 이텔릭	Ctrl + I	Command + I
밑줄	Ctrl + U	Command + U
취소선	Ctrl + Shift + X	Command + Shift + X
링크 삽입	Ctrl + K	Command + K
링크 복사	Alt + L	Command + L
텍스트 오른쪽 정렬	Ctrl + Alt + R	Command + Option + R
텍스트 왼쪽 정렬	Ctrl + Alt + L	Command + Option + L
텍스트 가운데 정렬	Ctrl + Alt + T	Command + Option + T
텍스트 양 끝 정렬	Ctrl + Alt + J	Command + Option + J
폰트 크기	Ctrl + Shift + <>	Command + Shift + <>
폰트 굵기	Ctrl + Alt + <>	Command + Option + <>
자간	Alt + <>	Option + <>
행간	Alt + Shift + <>	Option + Shift + <>
전부 선택	Ctrl + A	Command + A
선택영역 반전	Ctrl + Shift + A	Command + Shift + A
선택 해제	Esc	Esc
딥 설렉트	Ctrl + 마우스 오른쪽 클릭	Command + 마우스 오른쪽 클릭
하위 항목 선택	Enter	Enter
상위 항목 선택	\	\
그룹으로 묶기	Ctrl + G	Command + G
그룹 해제	Ctrl + Shift + G	Command + Shift + G
프레임으로 묶기	Ctrl + Alt + G	Command + Option + G
오토레이아웃	Shift  + A	Shift + A
오토레이아웃 해제	Alt + Shift + A	Option +Shift + A
컴포넌트 만들기	Ctrl + Alt + K	Command + Option + K
인스턴트 컴포넌트 해제하기	Ctrl + Alt + B	Command + Option + B
오토레이아웃 오브젝트 Space Between 정렬	X	X
오토레이아웃 오브젝트 Baseline 정렬	B	B
위로 정렬	Alt + W	Option + W
아래로 정렬	Alt + S	Option + S
왼쪽으로 정렬	Alt + A	Option + A
오른쪽으로 정렬	Alt + D	Option + D
가로 가운데 정렬	Alt + H	Option + H
세로 가운데 정렬	Alt + V	Option + V
가로 간격 정렬	Alt + Shift + H	Option + Shift + H
세로 간격 정렬	Alt + Shift + V	Option + Shift + V
자 숨기기 /보이기	Shift + R	Shift + R
아웃라인 숨기기 / 보기	Shfit + O	Shift + O
복사	Ctrl + C	Command + C
잘라내기	Ctrl + X	Command + X
붙여넣기	Ctrl + V	Command + V
선택한 곳에 붙여넣기	Ctrl + Shift + R	Command + Shift + V
교체하기	Ctrl + Shift + R	Command + Shift + R
복제하기	Ctrl + D	Command + D
이름 바꾸기	Ctrl + R	Command + R
검색	Ctrl + F	Command + F
PNG로 복사	Ctrl + Shift + C	Command + Shift + C
속성 복사	Ctrl + Alt + C	Command + Option + C
속성 붙여넣기	Ctrl + Alt + V	Command + Option + V