📔
피그마 용어 사용
평소 쓰던 기능인데 막상 찾아보려고 하면 용어가 생각이 안나는 경험, 다들 있으시죠?
이제 피그마 피디아 용어사전에서 키워드로 검색해 보세요! 
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에서 전환
Load more
