이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자.
스왑 인스턴스(swap instance)란?
Swap(바꾸다) +Instance(복사본)
인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다.
왜 사용해야 할까?
인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다.
(단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.)
어디에 적용될 수 있는데?
Web/Mobile을 디자인 혹은 기획 시 공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인스턴스(swap instance)를 사용한다.
스왑 인스턴스 (swap instance) 사용방법
스왑 인스턴스를 이용해 갓생기획 로고의 색상을 변경해 보았다.
스왑 인스턴스 적용 방법
1. ⭐변경하고자 하는 아이콘, 이미지 등을 컴포넌트로 만든다. (Ctrl+Alt+K)
2. 변경되는 영역에 인스턴스를 삽입한다. (컴포넌트는 삽입할 수 없기 때문에, 인스턴스로 만들어 삽입한다.)
3. 인스턴스를 더블클릭하여 디자인 패널에서 아이콘, 이미지를 변경할 수 있다.
컴포넌트 쓸 때 기억하면 좋은 원칙
1. 옵션 적용은 마스터 컴포넌트에서 할 수 있다. 마스터 원본은 별도로 관리가 필요하다.
2. 화면에 적용할 때는 인스턴스를 이용한다.
↓ 함께보면 좋은 피그마 포스팅 ↓
[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)
1. 컴포넌트(figma component) Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다. 화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로
youngplan.tistory.com
[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까
Variable이란? Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다. 개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임
youngplan.tistory.com
[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)
오토레이아웃? 프레임에 자동으로 간격을 걸어주는 기능으로, 프레임을 동적으로 (콘텐츠에 반응하도록) 만들어준다. 주로 Web, 반응형 모바일 작업시에 유용하게 사용되고 작업시 디자이너, 퍼
youngplan.tistory.com
'📟 피그마' 카테고리의 다른 글
[Figma] 피그마에서 이미지 모자이크, 블러처리 하기 (Effect Background blur) (0) | 2024.01.16 |
---|---|
[Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트) (1) | 2024.01.06 |
[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁) (0) | 2023.12.29 |
[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까지) (2) | 2023.12.20 |
[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지) (0) | 2023.12.12 |