Figcomponents
Figma에서 바로 쓸 수 있는 UI 컴포넌트 모음
Figma에서 바로 쓸 수 있는 UI 컴포넌트 모음
UI 디자인할 때 버튼, 카드, 네비게이션 같은 기본 컴포넌트를 새로 만드는 일이 반복된다.
물론 디자인 시스템이 있으면 좋지만, 프로젝트 초기나 개인 작업에서는 매번 세팅하기가 번거롭다.
AI가 디자인을 잘 뽑아주더라도 디자이너의 손이 필요하기 때문에 디자인 효율을 높일 수 있는 방법에 대한 연구는 꾸준히 필요하다.
이번에 소개할 사이트는 아래와 같은 장점들이 있다.
1. 무료로 사용 가능
사이트에 있는 컴포넌트는 전부 무료로 제공된다.
상업적 프로젝트에서도 활용할 수 있다.
2. Figma에서 바로 복사 가능
각 컴포넌트에는 “Copy to clipboard” 버튼이 있어서 클릭 한 번으로 Figma에 붙여 넣을 수 있다.
별도의 플러그인이나 파일 다운로드 과정이 없다.
3. 카테고리별로 정리됨
Website, Dashboard, Mobile App, Section, Wireframe 등으로 분류되어 있어서 필요한 패턴을 빠르게 찾을 수 있다.
4. 디자인 시스템 구성에 참고 가능
버튼 상태, 폼 정렬, 테이블 구조 같은 기본 요소들을 비교·참조하기 좋다.
팀 디자인 시스템을 만들 때 기준 예시로 활용할 수도 있다.
5. 컴포넌트 업로드 기능
자신이 만든 컴포넌트를 직접 등록해서 공유할 수 있다.
오픈 커뮤니티 형태로 운영된다.
디자인 초안 단계에서 기본 UI 구조를 빠르게 잡을 때 유용하다.
figma draft가 만족스러운 결과물을 주지 않을 때 사용해 보자.
필요한 컴포넌트를 빠르게 가져와서 세부 스타일을 수정하는 방식으로 사용하면 효율이 좋다.
실무에서 꽤 도움이 되는 사이트다.
컴포넌트의 이름이나 오토 레이아웃 구조를 살펴보면 다른 디자이너의 세팅 방식을 학습할 수 있는 것도 좋았다.
figcomponents 시작 화면 스크린샷