본문 바로가기
디자인 툴/피그마

피그마 | 버튼 컴포넌트 만들기

by 띵가띵가아기펭귄 2024. 10. 29.
반응형

안녕하세요, 오늘은 프레임으로 버튼 만들기에 이어 버튼 컴포넌트를 만들어보도록 하겠습니다!

컴포넌트를 만들면 다시 만들 필요 없이 재사용이 가능하답니다 :)


1. 먼저 버튼 모양을 만들어줍니다.

 

 

2. 만든 버튼을 선택하여 오른쪽 클릭->Create component를 선택합니다.

 

3. 다시 오른쪽 클릭하여 Main component -> Add variant를 선택합니다.

 

4. 새로 생성된 버튼의 스타일을 조정합니다.

 

5. 기존 버튼 선택 후 Interaction을 다음과 같이 설정합니다.

 

6. 프레임을 만든 후 기존 버튼을 Alt+드래그 하여 프레임 위에 올려줍니다.

 

7. 실행하여 결과를 확인합니다.

반응형

댓글