반응형 피그마 복사2 피그마 기초 기능 : 컴포넌트 생성 후 베리언트 지정해서 on/off 빠르게 적용하기 오늘은 피그마를 실무에서 사용할 때 가장 유용하다는 베리언트에 대해 알아보고 간단한 실습을 해보려고 한다. 이 기능을 숙지한다면 반복되는 토글 버튼, 동일 이미지의 음영 여부 등 각각 복사 붙여 넣기 하는 게 아니라 디자인패널에서의 옵션 선택으로 빠르게 적용할 수 있다. 말로만 설명하면 너무 어렵게만 느껴지는 베리언츠, 간단한 예제를 함께 따라 해보자! 베리언트란? 베리언트 Variants는 컴포넌트 세트를 만들고 더 체계적으로 사용하는 피그마의 기능이다. 이해하기 쉬운 예를 들면 우리가 화면에 특정 데이터를 입력할 때, 정상인 경우는 초록 윤곽선인 창 경고일 때는 노란 윤곽선인 창 오류일 때는 빨간 윤곽선인 창으로 표시되는 걸 볼 수 있다. 작업할 때 상황에 따라 매번 윤곽선을 새롭게 그리는 게 아니라.. 2024. 2. 17. 피그마 초보 기능 : 쇼핑몰 상품 리스트 만들기, 프레임 컴포넌트, 그룹, 복사 붙여넣기 단축키 피그마 작업을 하다 보면 반복 작업을 빠르게 끝낼 수 있도록 기능을 제공한다. 하나의 프레임 영역에 있는 요소를 모아 그룹화하여 컴포넌트를 생성하면, 쉽게 복사 붙여 넣기로 똑같은 컴포넌트를 쉽게 생성할 수 있다. 반복 작업을 하는 경우 ms에서 많이 사용하는 ctrl+v와 같이 피그마에서도 사용 가능한 단축키까지 알아보자. STEP 1. 프레임 컴포넌트 생성 예시는 쇼핑몰 상품 리스트 처럼 구성을 해봤다. 프레임 그리기 > 안에 사각 그리기 > 사각 안에 이미지 넣기 > 상품 이름, 금액 등 텍스트 넣기 > 모든 요소 그룹화 > 프레임 선택 후 오른쪽 마우스 > Create component 선택 프레임은 먼저 그려도 괜찮고 나중에 그림, 텍스트 등 요소를 다 그리고 마지막에 그 위로 감싸서 그려도 상.. 2024. 1. 17. 이전 1 다음 반응형
