피그마 기초강좌 파해치기 [ 버튼 생성 베리에이션 ]

• 컴포넌트 : local component에 표시 (main 컴포넌트를 변경하면 인스턴스도 자동으로 변경)
• 인스턴스 : 컴포넌트의 복사 개체 -> 다른 아이콘으로  swap 가능 (오른쪽 디자인 패널에서)
• 인스턴스의 override 기능을 활용할 경우 메인 컴포넌트에서 단어를 바꿔도 변경되지 x
• 오른쪽 디자인 패널에서 push overrides to main component를 할 경우 메인 컴포넌트에 속성 연결
• detach instance : instance의 속성을 해지하긱위해 디자인 패널 -> button -> detach instance

[small button 생성방법]

• 이전에 만들어두었던 버튼을 우선 복사 
• autolayout의 크기를 조정
• small button 프레임 선택 -> alt + ctrl + k -> 새로운 small button 컴포넌트 생성 완료

[button 조절 방법]

• medium button을 small button으로 바꾸고 싶을경우
• 버튼 프레임 클릭 -> 디자인 패널 -> md -> sm으로 변경하면 끝

[다양한 button 생성 방법]

• 다양한 버튼을 만들고 싶을 경우
• 컴포넌트를 놓고 만들고 싶은 수 많큼 복사
• 인스턴스를 모두 드레그 후 alt + ctrl + b -> detach instance
• 빠르게 아이콘을 지우기 위해 : shift + ctrl + h (hide)

 

[variants 활용 방법]

• 디자인한 버튼들을 모두 드래그 -> 디자인 패널 combine as variants -> 왼쪽 assets에서 하나의 button으로 합쳐짐

 

• 버튼에 아이콘이 없을때 variant를 활용하여 생성하는 방법
• 버튼의 모든 set을 드레그한 후 variant 값 정의
• 아이콘이 있을 경우 yes로 설정
• 개별적으로 variant값 지정
• icon / emoji 등
• 완성이 되면 새로운 아이콘이 없는 버튼이 생성되었을 때 오른쪽 디자인 패널의 emoji/ icon을 선택하면 자동으로 생성