–

피그마는 많은 설명을 필요로 하지 않는 서비스가 되었습니다. 일정 수준 이상으로 사용하는 곳이 많아졌고, 어떻게 더 효율적으로 활용하지? 에 대한 이야기를 더 자주 나누는 것 같아요. 또 피그마 내 사용 가능한 여러 라이브러리 등도 많아져 프로토타입 등을 제작하는 시간을 많이 줄일 수 있게 되었습니다. 오늘은 무료로 사용 가능한 피그마 컴포넌트를 카테고리에 따라 확인하고 복사해 바로 활용할 수 있는 서비스를 소개할까 합니다.

‘Free Figma Component Library’는 온라인 이곳저곳 퍼져있는 피그마 컴포넌트를 종류에 따라 살펴볼 수 있도록 정리해둔 곳입니다. 기존에는 UI Kit 등에 포함된 컴포넌트 중 필요한 것을 찾고 복사해 활용하는 경우가 많았는데요. 이런 자료에서 특정 조건에 맞는 컴포넌트를 묶어 훨씬 쉽게 접근할 수 있는 역할을 하고 있습니다.

위 이미지는 ‘Free Figma Component Library’에서 제공하는 카테고리 중 ‘일부’로 아이폰, 랜딩 페이지, 채팅, 삭제, 인풋, 차트, 버튼, 라벨 등 다양한 분류로 정리된 모습을 알 수 있습니다. 각 카테고리에 따라 몇 개의 컴포넌트가 등록되었는지도 확인할 수 있는데 평균적으로 20개 이상이 있어 활용도가 더욱 높게 느껴집니다.

특정 카테고리에 해당하는 피그마 컴포넌트를 선택하면 별도 리스트를 통해 자세한 내용을 확인할 수 있습니다. 아이폰을 보면 위젯을 포함해 애플 아이디로 로그인, 푸시, 전화 수신 등 다양한 컴포넌트가 담긴 것을 알 수 있습니다. 아이폰 컴포넌트는 가장 많은 306개가 등록되어 있는데, 하나의 OS에 해당하는 내용을 모두 포괄하고 있기 때문입니다. 이런 컴포넌트를 직접 검색해서 찾을 경우 꽤 많은 시간을 활용해야 하기에 한 곳에서 이렇게 둘러볼 수 있다는 것으로도 충분한 활용가치가 있다고 생각합니다.

피그마 컴포넌트 리스트에서 특정 대상을 클릭하면 ‘클립보드에 복사하기’ 버튼과 자세한 내용을 볼 수 있는데요. 복사 후 피그마 파일에 붙여넣기를 하면 바로 활용이 가능합니다. 태그 또한 포함되어 있어 자연스레 관련 컴포넌트로의 이동이 가능합니다. 무료로 제공되지만 상업적 이용 등에 대한 라이선스는 다르기에 제공되는 정보를 꼭 확인하는 것이 좋습니다.

상세 값은 알 수 없지만 대략적인 컬러 정보가 제공된다는 점이 제게는 가장 좋았습니다. 마지막으로 이 피그마 컴포넌트가 포함된 원본 파일에 대한 정보도 잊지 않고 있어요. 특정 컴포넌트가 마음에 들 경우, 원본 파일을 통해 다른 요소들도 이어 확인할 수 있습니다.

이번에는 피그마 컴포넌트 중 ‘키보드’에 해당하는 내용을 살펴봤습니다. 이렇듯 60여개가 넘는 카테고리에 따라 컴포넌트를 자세히 볼 수 있고, 복사해 피그마 내 바로 사용이 가능하다는 점에서 앞으로도 꾸준히 찾게 될 공간이 아닐까 싶습니다.

피그마 컴포넌트는 물론, 웹플로우에서 사용 가능한 컴포넌트 역시 함께 제공하고 있다는 점도 매력적입니다. 더 자세한 내용은 링크를 통해 확인해주세요!

–

Post Views: 552

RELATED ARTICLESMORE FROM AUTHOR