피그마 활용해보기
베리언트
베리언트는 다른 스타일이나 속성을 갖는 여러 가지 버전의 컴포넌트를 의미
디자인 시스템을 체계적으로 관리하고, 컴포넌트 간의 다양한 변형을 효과적으로 적용
-> 컴포넌트 프로퍼티를 그룹화하는 기능으로 컴포넌트들의 묶음
베리언트 만들어보기
1. 비슷한 여러개의 오브젝트를 1개의 컴포넌트로 만들어서 properties로 구별하기
1-1 여러개의 오브젝트 선택하여 Create Component Set
1-2 그룹화된 컴포넌트들의 묶음 확인 (보라색 베리언트 영역)
1-3 컴포넌트 선택하여 ◇Property를 클릭해서 size로 입력
1-4 같은 크기의 아이콘 선택하여 Rename을 클릭 후 Large, Medium, Small 사이즈 지정
1-5 사이즈외에 추가적인 속성 추가 가능
-> Properties 옆에 +를 클릭해서 Variant를 추가
1-6 이름은 Icon을 지정하고 value는 True(defalut)로 지정
1-7 하트가없는 라인의 버튼 3개를 선택한 후 Icon을 선택해 add를 선택 후 False로 지정
1-8 베리언트 영역을 드레그 확장 후 안에 컴포넌트를 복제 (Alt + 드레그)
1-9 오른쪽에 Properties 옆에 +를 클릭해서 Variant를 추가
1-10 복사한 6개의 컴포넌트 disable 로 지정
1- 10 다른 스타일이나 속성을 갖는 여러 가지 버전의 컴포넌트 확인
2. 베리언트와 반응형 메뉴 만들어보기
2-1 Material Design Icons 플러그인 추가하여 아이콘 추가
2-2 모바일 , 테블렛, 데스크탑 등 화면 크기에 맞는 메뉴 바 만들기(360 , 600 , 1280)
2-3 텍스트에 모형(선)으로 간격을 준 후 해당 부분 오토레이아웃 / (텍스트 +도형)
텍스트만 선택하여 CTRL + D 같은 간격으로 복사 가능
2-4 Rectangle (문자옆에 흰색 선)을 선택하고 Ctrl + X를 눌러 잘라놓기
첫번째 문자를 선택하고 Ctrl + V 를 눌러 문자 뒤로 선 배치
2-3 Create Component Set 으로 베리언트 생성 / [Properties] 메뉴 옵션 mode 3개로 나누어 작성
2-4 Asset 통하여 각 요소 활용 가능 / 속성 별로 바로 바꾸어서 사용이 가능
3 프레임 인터렉션
3-1 우측 패널에서 Prototype 메뉴를 선택
3-2 +에서 마우스를 드레그해서 두번째 프레임으로 화살표를 당겨 연결
3-3 인터렉션 옵션 설정
3-4 ▷ 버튼을 눌러 Preview를 보면 첫번째 프레임이 나오고 클릭하면 두번째로 전환
4. 버튼 인터렉션
4-1
버튼 하나씩 그룹으로 묶고(도형, 텍스트) / 버튼 3개씩 베리언트 컴포넌트 생성( Create Component Set)
4-2 각 버튼의 컴포넌트 속성 설정
4-2 오른쪽 패널에 Prototype 메뉴를 선택하고
왼쪽 Normal 버튼을 더블클릭 후 + 를 Hover에 연결하고 옵션
4-5 Hover버튼을 선택해서 +를 Pressed버튼에 연결하고 Trigger를 while pressing
4-6 미리보기 버튼 ▷ 을 눌러 확인
5. 베리언트 스위치 인터랙션
5-1 스위치 버튼 만든 후 shadow 지정
5-2 스위치 복사한 후 각 스위치 (네모+원) 그룹화 후 2개의 스위치 베리언트 만들기( Create Component Set)
5-3 [Prototype] 메뉴를 선택 설정
5-4 asset 에서 가져다 쓸 수 있으면 클릭스 왼쪽 스위치로 변경
6. 캐러셀 인터렉션
6-1 기본 캐러셀 틀 만들기
6-2 이미지 삽입 / Unsplash 다운하고 이미지 선택 후 이미지 넣기
6-3 Clip Content를 체크하여 외부 영역이 보이지 않게
6-4 원 제작하기 / 좌우 투명도 50%로 하여 아래 위치 표시 만들기
6-5 캐러셀 셋팅하기 / 해당 프레임 복사하여 Center, left, right 셋팅
6-6 베리언트 및 인터렉션 연결하기
센터의 왼쪽 끝 사진에서 ㅣleft 프레임으로 / 센터의 오른쪽 끝 사진에서 right 플레임으로 on drag 연결
