📔
피그마 용어 사용
평소 쓰던 기능인데 막상 찾아보려고 하면 용어가 생각이 안나는 경험, 다들 있으시죠?
이제 피그마 피디아 용어사전에서 키워드로 검색해 보세요! 
Table
Search
태그
이름
텍스트
기초인터페이스
Color -모드 별로 컬러가 다르게 적용 되어야 할 때 사용
적용 예시: 다크& 라이트 모드 전환, 또는 화면 전환 시 컬러만 변경 되어야 하는 ui에 적합
Number - 코너 레디우스, 너비&높이, 오토 레이아웃 간격, 텍스트(숫자)
적용 예시: 코너 둥글기 값을 전환해 주는 케이스, 해상도에 따라 간격이 바뀌어야 하는 케이스 등에 적용
String- 문자열 전환 시 사용
적용 예시: 번역 언어, 문구 변경 등 케이스별 텍스트가 다르게 적용 되어야 할 때 사용
Boolean- 어떤 요소를 노출/비노출 또는 두 가지 요소 전환 시
적용 예시: 2가지 인터페이스간 전환 또는 특정 ui를 노출/ 비노출 처리 할 때 사용오토 레이아웃
피그마 업데이트 이후 추가로 생겨난 Direction 옵션으로, 프레임 너비에 따라 안에 있는 콘텐츠를 줄바꿈처리 할 수 있는 기능입니다. 이 기능을 활용하면 하나의 모듈로 가로형, 세로형 모듈을 구현할 수 있습니다.
오토레이아웃을 설정하고 오른쪽 패널의 오토레이아웃 옵션을 보면 가로, 세로 방향 옵션 옆에 있습니다.
기초인터페이스
색상, 텍스트, 숫자(해상도 및 라운드 코너 등), 불리언 등을 객체에 적용하고 응용할 수 있는 피그마의 새로운 기능. 2023 6월 config 이후 업데이트 되었습니다. 디자인 토큰의 개념이라고 보시면 되고, 변수를 등록해서 프로토타이핑에도 활용합니다. 등록하는 방법은 아래의 2가지를 사용해보세요.
1. 아무것도 선택하지 않은 상태에서 오른쪽 탭의 [Local Variable]메뉴 클릭, 하단의 Create variable 클릭
2. 오른쪽의 스타일 메뉴를 눌러 플러스(+)버튼을 누르면 style과 variable이 있는데, variable 탭을 눌러 등록
컴포넌트
컴포넌트에서 하위 인스턴스의 옵션을 노출할 수 있도록 설정하는 기능입니다. 마스터 컴포넌트를 선택한 다음 오른쪽 패널에서 properties에 플러스를 누르면 하위 옵션에 있습니다. 포함된 인스턴스에 프로퍼티 옵션이 있을 때만 노출되는 메뉴입니다.
컴포넌트
옵션을 줘서 스왑 인스턴스 기능을 편리하게 쓸 수 있도록 도와주는 기능입니다.
아이콘 즐겨찾기 기능(Prefferd Value이 있어 스위칭할 아이콘에 빠르게 접근할 수 있습니다.
컴포넌트
화면에서 반복되는 요소들을 경우의 수에 따라 커스텀하고, 카테고리 별로 묶어주는 기능입니다.
이 옵션을 지정해두면 드롭다운 또는 토글을 이용해 요소를 빠르게 전환할 수 있습니다.
컴포넌트
마스터 컴포넌트의 복사본이며 마스터 컴포넌트에 없는 요소를 추가하거나 있는 요소를 삭제할 수 없습니다.(Swap instance 등의 기능을 활용해서 응용)
컴포넌트
Swap(바꾸다)+Instance(인스턴스, 컴포넌트의 복사본)
인스턴스를 다른 인스턴스로 대치하는 기능
주로 인스턴스 안에 있는 아이콘, 이미지등을 바꿔서 베리에이션 할 때 사용합니다.
컴포넌트
컴포넌트에 옵션을 줘서 더 편리하게 사용할 수 있도록 해주는 기능입니다.
컴포넌트를 만들 때 경우의 수를 줄여주며,
불리언/ 텍스트/ 인스턴스 스왑 / 배리언트 4가지가 있습니다.
프로토타이핑
프레임 안의 객체가 어떻게 스크롤 될 지를 정해주는 옵션입니다.
- Scroll with parent: 부모 프레임이 스크롤 될 때 같이 올라가는 옵션입니다.
- Fixed: 지정한 위치에 고정되어 있는 옵션입니다.
- Sticky: 스크롤 되다가 부모 프레임의 최상단에 닿았을 때 고정되는 옵션입니다.
프로토타이핑
프레임 안의 객체가 프레임 영역을 넘어 갔을 때 어떻게 스크롤 처리할지를 정해주는 옵션입니다.
- No scrolling:스크롤 반응이 일어나지 않음
- Horizontal: 가로로 스크롤이 생김
- Vertical: 세로로 스크롤이 생김
- Horizontal and Vertical:가로와 세로로 스크롤이 생김
오토 레이아웃
프레임 너비에 따라 오토 레이아웃 간격이 자동으로 조정되는 모드입니다.
전환하는 방법
1. 오토레이아웃 간격을 넣는 부분에 영문으로 ‘Auto’라고 적거나, 숫자를 지워 전환할 수 있습니다.
2. Auto layout advanced option의 spacing mode에서 전환
오토 레이아웃
프레임에 숫자로 간격을 주는 모드입니다.
1. 오토레이아웃 간격을 넣는 부분에 숫자를 넣으면 됩니다.
2. Auto layout advanced option의 spacing mode에서 전환
오토 레이아웃
오토 레이아웃한 개체가 겹쳐 있을 때 쌓이는 순서를 지정 하는 옵션입니다.
First on top- 첫 번째에 오는 요소가 앞으로 쌓이도록
Last on top- 마지막에 오는 요소가 앞으로 쌓이도록
오토 레이아웃
오토 레이아웃을 적용한 프레임을 가변 했을 때 상위 프레임과 하위 프레임의 크기를 어떻게 변경할 지를 정해주는 옵션입니다. 상위 프레임과 하위 프레임의 상호작용!
오토 레이아웃
Hug(감싸 안다)+contents(콘텐츠)
바깥에 있는 프레임이 안에 있는 콘텐츠를 감싸안는 속성입니다. (마진 제외)
콘텐츠가 가변될 때 마다 상위 프레임이 자동으로 늘어납니다.
오토 레이아웃
Fill(채우다)+container(컨테이너)
안(하위)에 있는 콘텐츠가 바깥(상위)에 있는 프레임을 채워버리는 속성입니다.
상위 프레임이 늘어날 때 안에 있는 콘텐츠가 프레임을 채웁니다. (마진 제외)
오토 레이아웃
Fixed(고정하다)+ Width, Height(가로,세로)
말 그대로 프레임이 서로 영향을 주고 받지 않고 지정한 숫자대로 고정되어 있는 상태입니다.
프레임을 늘리면 모든 속성은 Fixed 상태로 변합니다.
프로토타이핑
레이어명이 같은 요소를 프로토타이핑으로 연결하면, 프레임간 요소 차이를 감지하여 자동으로 애니메이션을 걸어주는 기능입니다. 투명도, 크기, 각도, 색상 등의 차이를 감지하여 애니메이션이 생성됩니다.
프로토타이핑
프레임에 어떤 동작이 일어나도록 자극을 주는 옵션입니다.
- 종류: On click, On Drag, While hovering, While pressing, key/gamepad, Mouse enter, Mouse leave, Mouse up, Mouse down, After dealy
프로토타이핑
1. Navigate to: 지정한 페이지로 이동
2. Change to: 해당 객체로 변환(인터랙티브 컴포넌트 적용 시 활성)
3. Open overlay:팝업등의 오버레이 창이 열리게 함
4. Swap overlay: 열려있는 창을 다른 창으로 바꿈
5. Close overlay: 열려있는 창을 닫음
6. Back: 이전 화면으로 돌아감
7. Scroll to: 지정한 앵커포인트(위치값)으로 이동)
8: Open link: 지정한 링크로 이동
9. Set variable: 변수를 활용해 결과 값 도출
프로토타이핑
1. On click: 객체를 클릭 했을 때
2. On drag: 객체를 드래그 했을 때
3. While hovering: 객체 위에 커서를 올리고 있는 동안
4. While pressing: 객체를 누르고 있는 동안
5. Key/gamepad: 특정 단축키를 눌렀을 때
6. Mouse enter:객체에서 마우스 커서가 닿자마자
7. Mouse leava:객체에서 마우스 커서가 떠나자마자
8. Moup up: 마우스 버튼을 떼자마자
9. Mouse down: 마우스 버튼을 눌렀을 때
10. After delay: 일정 시간이 지나고 나서
프로토타이핑
프레임에 어떤 자극(Trigger)를 줬을 때 어떤 동작이 일어날 지를 지정해주는 옵션입니다.
- 종류: Navigate to, Change to, Open overlay, Swap overlay, Close overlay, Back, Scroll to, Open link
오토 레이아웃
오토 레이아웃 프레임 안에서 절대적인 위치를 잡아주는 기능. 오토 레이아웃 프레임 안의 객체를 선택하고 오른쪽 위치 및 크기 패널에서 플러스를 눌러주면 적용할 수 있습니다. 상세 내용의 이미지 참고해보세요!
프로토타이핑
베리언트 그룹 내에 인터랙션을 걸어주면, 컴포넌트 자체가 인터랙션을 품게 되는데 이것을 ‘interactive component’라고 합니다.