✏️ 2024. 11월 25일 / 피그마 기초 6
👻 미리보기
✖️
👀 피그마의 유용한 기능! 컴포넌트를 만들어보자
✖️
웹 페이지를 만들 때, 자주 사용하는 아이콘이나
버튼, 혹은 알림창등 일괄되게 표현해야하는 요소같은 게 굉장히 많이 있습니다.
하나를 바꾸면 동일한 부분의 다른 요소들도 다 하나하나 바꾸어주자니, 너무 불필요한 동작들도 많은데요
피그마에서는 이러한 불편함을 덜어주는 아주 유용한 기능이 있습니다.
앞서 말씀드린 아이콘 등 작은 디자인 단위를 등록하여 재사용할 수 있게 하는 단위를 바로 🌷'컴포넌트'🌷라고 합니다.
자, 그럼 지금부터 이런 컴포넌트를 등록하고 등록한 컴포넌트로 할 수 있는 다양한 방법을 알려드리겠습니다.
⛄ 메인 컴포넌트를 만들어봅시다
✖️
컴포넌트를 만드는 방법은 굉장히 단순합니다.
우선 컴포넌트로 지정하고 싶은 아이콘이나 디자인 단위를 만들어주세요.
저는 아이콘 4개 정도를 컴포넌트로 지정하기 위해 생성하였습니다.
만약 아이콘의 백터가 합쳐져 있지 않다면, 꼭 합쳐주신 후에 진행해주세요.
컴포넌트로 지정하는 방법은 아주 간단합니다.
패널에 있는 해당 아이콘을 클릭해주는 겁니다.
이렇게 보라색 테두리와 프레임 아이콘이 생성되었다면 정상적으로 적용된 것입니다.
여기에서 기억해야할 점은, 제일 처음에 생성힌 이 컴포넌트가 바로 메인 컴퍼넌트라는 것입니다.
컴포넌트는 새로운 페이지를 생성하여 메인 컴포넌트를 따로 관리해주는 것이 관리하기에 아주 적합합니다.
저 또한 메인 컴포넌트 페이지로 옮겨주었습니다
굉장히 외롭게 동떨어져 있는 이 아이콘들을 저는 프레임을 만들어 함께 넣어주었습니다.
그리고 프레임의 이름을 General로 설정해주었습니다.
자, 이제 아주 신기한 장면을 보여드리겠습니다.
파일 옆에 있는 에셋 버튼을 누르고, 현재 프로젝트를 눌러보면
이렇게 방금 저장한 컴퍼넌트가 마치 즐겨찾기처럼 저장되어 있는 것을 볼 수 있습니다.
다시 레이어 페이지로 이동해서 에셋에 등록한 아이콘을 드래그해서 꺼내볼까요?
굉장히 편리하게 아이콘이 복제되는 것을 볼 수 있습니다.
이렇게 메인 컴포넌트에서 복제된 것을 인스턴스 컴포넌트라고 부릅니다.
인스턴스 컴포넌트는 정말 신기하게도 상단 프레임 이름 부분에 아이콘이 보이지 않습니다.
그렇다면 메인 컴포넌트를 찾고 싶은 경우 어떻게 찾아보아야 할까요?
굉장히 간단합니다.
찾고 싶은 컴포넌트를 선택한 후 오른쪽 패널에서 Local instance를 눌러주면 신기하게도 메인 컴포넌트를 찾아가며
하단의 리턴 투 인스턴스 버튼을 눌러주면 다시 원래의 화면으로 돌아갑니다.
또한 컴포넌트를 눌러준 뒤, 패널에 있는 컴포넌트의 이름을 눌러보면
방금 전 함께 만들었던 컴포넌트들이 보입니다.
해당 기능을 사용하여 컴포넌트의 모양도 다른 모양으로 변경해볼 수도 있습니다.
☁️ 컴포넌트로 다양한 활용을 해봅시다
✖️
이번에는 해당 디자인을 메인 컴포넌트로 지정해보려합니다.
뿐만 아니라, 해당 디자인을 다양한 기능을 적용하여 굉장히 편하게 수정해보려고 합니다.
저는 우선 해당 디자인을 메인 컴포넌트로 만들어 컴포넌트 페이지로 넣어주었습니다.
다시 레이어 페이지로 돌아와서 해당 컴포넌트를 꺼내보겠습니다.
그리고 다시 메인 컴포넌트가 있는 곳으로 돌아와 다양한 설정을 해보겠습니다.
우선 저는 제목만 있는 체크리스트도 있으면 좋을 것 같아, 보이고 안보이는 설정을 바꾸는 옵션을 적용해볼겁니다.
우선 보이고 안보이는 부분을 지정해주고 싶은 부분을 선택한 후
오른쪽 패널에서 상단의 설정값을 지정해주세요. (여기서 true는 현재 내용이라는 글씨가 쓰여있기 때문에 true로 설정해두었습니다)
적용이 되었다면 복제된 컴포넌트가 있는 페이지로 돌아가 패널을 확인해보세요!
이렇게 방금 설정한 옵션이 잘 적용된 것이 보입니다!
자 그럼 두번째 설정값을 알려드릴게요.
이런 제목과 내용의 글씨를 바꿀때 하나하나 선택해서 변경하면 너무 복잡할텐데요.
해당 부분도 똑같이 글씨 부분을 선택하여, 오른쪽 패널의 TEXT 부분에서 설정합니다.
짠! 굉장히 간편하고 편리한 기능이랍니다.
잘 활용한다면 시간 단축에도 굉장히 효율적일거에요!
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
