콘텐츠 마케팅 스터디 노트(240315/8)
피그마 (2)
06_컴포넌트와 베리언트
01. 컴포넌트와 인스턴스
1) 컴포넌트와 인스턴스
- ctrl alt k (create components)
- 컴포넌트 등록시 아이콘 마름모 4개 합쳐진 마름모
> 사각형이 내부에 존재
> 원본을 복제한 건 인스턴스라 부름
> 컴포넌트 내부에 있는 사각형 눌러서 색 변환
> 인스턴스 색 변경은 다른 것에 영향 x
- 컴포넌트 크기 변경시: 같이 움직임
> 크기를 조절하지 않은 요소만, 변경한 건 x
> 이미 변경하지 않은 인스턴스만 영향
2) 버튼
- 하나씩 등록은 번거로움
- multiple ~ 로 설정
- 다른 페이지로 하려면 드래그 -> 그러면 인스턴스
- 작업할 때 손쉽게 go to main components 누르기
- return to instnace
- reset all changes
> 수정한 부분 되돌리기
- push changes to main component
> 컴포넌트에서 변경 안 하고 가능
- detach instance: 분리 기능
- ctrl x 잘라내기
- documentation에 따로 찾기 쉽게 이름 지정하기
> 후에 작업물이 쌓이면 찾기 편리함
02. 베리언트의 활용
- detach 누르면 귀속 끊기 가능
> 새 창에서 그 창 컴포넌트로 만들기
- company -> help center
- 텍스트를 아이콘
> 우클릭 후 outline stroke
- combine as variants
- create component set
- 되도록이면 크기는 짝수로
- 원본은 최대한 건드리지 않고 assets에서 꺼내 쓰기
- properties
- create property
- add new로 NO 추가
- action / disabled
07_프로토타입
01. 인터렉티브 컴포넌트 스위치 인터랙션
1) prototype
- 바운딩 박스 가운데에 빈 원이 생김
- on tag, on drag, on tap 등
- 일관성이 꼭 필요
2) show prototype settings
- 디바이스 고르기 가능
- 핸드폰 색상, 배경 고르기 가능
3) 스위치 만들기
- 아래 위로 크기를 준만큼 옆으로도 빈 공간 주기
- 흰색 점에 그림자 줘서 입체적으로 만들기
- create component set 주기
- assets에서 꺼내 쓰기
02. 버튼 인터랙션
1) 디폴트, 호버, 프레스드 버튼 지정
2) while hovering, dissolve, easy in and out, 100ms 사용
3) while pressing, 나머지 동일
4) 활용
- 뒤로 가기 버튼 만들기
5) 탭 메뉴들에서 활용됨
03. 캐러셀 인터랙션
1) 홈페이지 열었을 때 컨셉 이미지
- 여러 페이지들이 좌우로 움직이는 경우
2) 왼쪽 중앙 오른쪽 맞춰서 이미지 배치
- 간격 맞추기 중요!
3) 하단에 원 아이콘으로 어떤 쪽에 위치한 이미지인지 표시하기
4) 드래그로 설정값 주기
5) 위치에 따라 왼->중 중->양쪽 오->중 등 잘 조절하기
6) 위치 보면서 값을 정확히 주는 게 중요
04. 모달창 인터랙션
1) 모달창은 반드시 프레임으로 만들어야 함
2) open overlay 사용
- 디폴트를 manual로 주기(top ~ 기타 등등 옵션도 있음)
3) close when clicking outside
4) add background behind overlay
05. 내비게이션 드로워 인터랙션
1) x표를 16만큼 떨어트리기
2) move in 왼쪽에서 오른쪽으로
3) close overlay 선택
4) 분홍색 원은 open overlay, 밑에서부터 위로
08_공유와 협업
01. 에셋 내보내기
1) 파일 종류는 개발자와 상의
- png 등
2) 선택된 오브젝트에서 export
3) 2배수, 3배수 같이 내보내기 가능
4) 유의점
02. 팀 라이브러리
1) assets에서 team library 누르기
2) 무료에서는 진행되지 않음
03. 피그잼
1) 온라인 화이트보드
