안녕하세요 찐망고입니다.
피그마가 업데이트 이후 툴바나 패널이 조금 바뀌었어요.
오토레이아웃이나 컴포넌트, 베리언트, 컨스트레인트 등도 조금 바뀌었지요.
영상을 만들면 조금 편할 거 같은데 왜 저는 아직도 텍스트로 포스팅을 하려고 하는 걸까요.
옛날사람이라 그럼...
이전 글 참고 해주시고 포스팅을 이어할게요.
피그마 컴포넌트, 베리언트 (Component, Variants)
안녕하세요 찐망고입니다 오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) 피그마 ui-스타일가이드, 스타일
uiweb.tistory.com
피그마에서 컴포넌트와 베리언트는 디자인 시스템을 효율적으로 관리하고 재사용성을 높이는데 중요한 개념입니다.
컴포넌트는 디자인에서 반복적으로 사용할 수 있는 UI요소입니다.
한번 정의해 놓으면 여러 곳에서 재사용할 수 있기 때문에, 디자인 작업을 더 효율적으로 만들고 일관성을 유지할 수 있죠.
버튼, 카드, 아이콘, 입력필드 등을 컴포넌트로 만들고 사용합니다.
전체 디자인에서 컴포넌트를 수정하면 그 버튼을 사용한 모든 인스턴스에서 변경사항이 반영됩니다.
베리언트는 컴포넌트의 다양한 상태나 버전을 그룹화할 수 있는 기능입니다.
하나의 컴포넌트가 여러 가지 모양이나 상태를 가져야 할 때, 베리언트를 활용하면 쉽게 관리할 수 있죠
컴포넌트의 여러 상태 예를 들어 default, hover, click나
스타일 예를 들어 색상, 크기, 모양을 한 그룹으로 묶어서 관리할 수 있습니다.
얼마 전 수업시간에 네이버 로그인 탭 부분을 클론디자인 해봤는데요.
보라색 부분이 베리언트 부분이죠.
베리언트는 등록 시 컴포넌트가 필수예요~
로그인 버튼으로 연습해 봅시다.
로그인 기본버튼과 hover상태 두 개를 만들 거예요.
컴포넌트를 복제하면 복제본인 인스턴스가 나와요.
컴포넌트는 해제기능이 따로 없기 때문에 컴포넌트를 다시 풀려면
복사된 인스턴스를 Detach instance 해서 인스턴스를 해제한 후 컴포넌트는 삭제하면 됩니다.
일단 hover용 버튼 디자인을 해볼게요. 머 특별한 디자인은 아니고 배경이랑 선만 바꿔야지
참고로 복제용으로 만들지 않고 새로 컴포넌트로 등록할 거라 Detach instance 해서 인스턴스를 해제합니다.
선색이랑 면색을 바꿔주고 이름 변경 후 컴포넌트 등록!~
등록된 컴포넌트 두 개 잡고 Combine as variants 해주기
같은 속성의 이름을 지정해 주는 게 아주 중요함
등록된 베리언트는 저렇게 인터렉션을 연결할 수 있게 설정됩니다.
어떻게? 요렇게
프로토타입을 확인해 보세요~
Figma
Created with Figma
www.figma.com
'UIUX디자인 > 피그마' 카테고리의 다른 글
| 피그마 ai 디자인, 플러그인 - Codia Ai Design (1) | 2024.10.16 |
|---|---|
| 피그마 말풍선 컴포넌트 만들기 (2) | 2024.09.04 |
| 피그마 말풍선 만들기 (0) | 2024.08.30 |
| Figma UI3 완벽 해부: 새롭게 달라진 주요 기능과 인터페이스 변화 (0) | 2024.07.18 |
| Figma Config 2024 컨퍼런스 요약 및 주요 업데이트 (0) | 2024.07.03 |