디자인이 쉬워지는 피그마 올인원 노하우 디자인은 해본 적 없는 사람에게는 낯설고 막막하게 느껴지기 마련입니다. 특히 사이드 프로젝트를 꿈꾸는 개발자나 1인 창업자라면, 디자인을 잘 몰라도 프로젝트를 시작해야 할 때가 많죠. 그럴 때면 아이콘, 버튼, 레이아웃 같은 기본적인 요소조차 큰 고민거리로 다가옵니다. 하지만 걱정하지 마세요. 맨땅에 헤딩하지 않고도 피그마(Figma)를 잘 쓰면 어려움을 한층 쉽게 해결할 수 있습니다. '피그마'는 직관적인 UI와 다양한 기능으로 디자인 작업을 훨씬 수월하게 만들어 줍니다. 이 글에서는 개발자와 창업자가 피그마를 활용해 디자인 작업을 효율적으로 해결할 방법들을 소개하려 합니다. 피그마 기초 튜토리얼보다는 효과적으로 활용하는 방법에 초점을 맞추어 라이브러리, 플러그인, 커뮤니티 3가지 영역의 활용법 등을 다룰 것입니다. 디자인 부담을 덜고, 프로젝트를 빠르고 효과적으로 진행할 실용적인 도구들을 알아보겠습니다.*피그마 인터페이스가 익숙하지 않은 분은 개발자를 위한 피그마(Figma) 사용 방법과 활용 팁을 먼저 참고하면 좋습니다. 라이브러리피그마 라이브러리는 디자인 요소를 체계적으로 정리한 리소스로, 반복 사용하는 UI 컴포넌트(버튼, 아이콘, 입력 폼 등)를 한곳에 모아둔 것입니다. 이를 활용하면 디자인의 일관성을 유지하며 한 차례 변경만으로 전체 디자인에 수정 사항을 반영할 수 있어 작업 효율이 대폭 올라갑니다. 특히, 팀 프로젝트에서는 여러 명이 같은 디자인 시스템을 공유하며 작업해야 하기 때문에, 피그마 라이브러리가 디자인 가이드 역할로 커뮤니케이션을 더욱 원활하게 만들어 줍니다. 이러한 라이브러리를 꼭 직접 만들 필요는 없습니다. 숙련된 디자이너가 있는 프로젝트 환경이라면 라이브러리를 자체 제작하는 부담이 크지 않겠지만, 그렇지 않은 환경에서는 피그마에서 제공하는 라이브러리를 활용할 수 있습니다. 피그마는 이미 세계적인 디자이너들이 만들어둔 기본 내장 라이브러리 3가지를 제공합니다. 글로벌 기업들이 직접 구축한 라이브러리를 활용해 훨씬 더 효율적으로 작업할 수 있습니다. iOS 18 & iPadOS 18: 애플에서 공식 배포하는 UI Kit로, iOS 및 iPadOS 앱을 디자인할 때 유용한 라이브러리입니다. iOS 앱 디자인을 할 때 필요한 버튼, 내비게이션 바, 입력 필드 등이 포함되어 있습니다.Material 3 Design Kit: 구글이 제공하는 머터리얼 디자인 시스템(Material Design)의 최신 버전입니다. 안드로이드 앱 디자인에 최적화되어 있으며, 최신 UI 트렌드인 모션, 다이나믹 컬러, 어댑티브 디자인 요소들이 포함되어 있습니다.Simple Design System: 피그마에서 제공하는 기본적인 디자인 시스템으로, 웹과 모바일 디자인에 모두 사용할 수 있습니다. 라이브러리 설치와 제거 방법피그마의 기본 제공 라이브러리를 설치하는 방법은 간단합니다.<출처: 작가, 피그마 캡처> 피그마 작업 파일을 열면 왼쪽 패널에 기본적으로 File 설정이 보이는데요, 여기서 Assets을 클릭하면 현재 활성화된 라이브러리를 확인할 수 있습니다. 처음에는 “No libraries enabled”라고 표시되지만, 그 아래 “Or, get started with a premade UI Kit” 옵션이 있습니다. 이때 옵션에서 “+” 버튼을 눌러 “Add library”하면 기본 제공되는 라이브러리를 내 작업 파일에 추가할 수 있습니다. 라이브러리 하나만 지원하는 것이 아니니 애플, 구글, 피그마의 UI 키트를 모두 설치할 수도 있습니다. Assets 탭 옆에 있는 책 모양 아이콘(Manage Libraries) 을 클릭하면 Manage libraries 창이 뜨며, UI Kits 섹션에서 원하는 라이브러리에 마우스 커서를 올리고 “Add to file” 버튼을 클릭해 추가할 수 있습니다. 라이브러리를 추가하면 모든 디자인 요소를 내 파일에서 바로 쓸 수 있습니다. 이미 설치된 라이브러리는 우클릭한 다음 “Remove library from file”을 선택해 쉽게 삭제할 수 있습니다. 필요에 따라 활성화/비활성화를 조절하며 쓰는 것이 좋습니다. 활용해 보면 좋은 리소스들이처럼 라이브러리를 설치하면 다양한 UI 컴포넌트들을 즉시 활용할 수 있습니다. 피그마에서는 모든 컴포넌트를 “Insert instance” 기능으로 간편하게 삽입할 수 있습니다. <출처: 작가, 피그마 캡처> 주요 인스턴스로는 팝업, 아이콘, 슬라이더, 상태바, 탭바, 토글, 툴바, 키보드, 버튼, 뱃지 등이 있는데요. 각 컴포넌트에는 프로퍼티(Property)*가 적용되어 있어 쉽게 변형할 수 있습니다. 라이브러리마다 UI 컴포넌트 명칭과 구성에 차이가 있습니다. 애플 라이브러리는 156개, 구글 라이브러리는 245개, 피그마 라이브러리는 372개 컴포넌트로 구성되어 있습니다.*프로퍼티(Property): 컴포넌트의 특정 속성을 조절할 수 있는 기능입니다. 예를 들어, 버튼 컴포넌트에 적용된 프로퍼티를 활용하면 텍스트 변경, 색상 조정, 아이콘 추가/제거 등 작업을 쉽게 할 수 있습니다. 프로퍼티를 제대로 활용하면 하나의 컴포넌트로 다양한 변형을 만들 수 있어 디자인 작업 효율성이 향상됩니다. 스타일 활용: 가독성 좋은 폰트 설정하기피그마의 스타일(Style)은 디자인의 일관성을 유지하고 빠르게 적용할 수 있는 기능입니다. 디자이너라면 직접 스타일을 만들고 지정할 수도 있겠지만, 라이브러리만 설치해도 애플과 구글에서 등록한 스타일을 그대로 활용할 수 있습니다. <출처: 작가, 피그마 캡처> 스타일 적용은 Design 패널에서 진행합니다. 피그마 작업창의 오른쪽 패널에 Design/Prototype 탭이 있으며, Design 탭이 기본값입니다. 여기서 텍스트를 작성하거나 도형을 만들면, 폰트와 색상을 라이브러리에서 제공하는 스타일로 쉽게 변경할 수 있습니다. 스타일을 적용할 요소인 폰트, 아이콘 등을 선택하고, 오른쪽 패널의 점 네 개 아이콘 “Add styles”를 선택하면 됩니다. UX/UI 디자인에서 가독성(Readability)은 심미성만큼 중요한 요소입니다. 그러나 디자인 경험이 많지 않다면, 적절한 폰트 크기를 정하는 것이 어려울 수 있습니다. 이럴 때 라이브러리의 폰트 가이드를 참고하면 빠르고 효과적으로 가독성 높은 디자인을 만들 수 있습니다. Design 패널의 Typography 스타일을 확인하면, 본문, 헤더, 캡션 등 각 요소에 적절한 폰트 크기가 미리 지정되어 있습니다. 이를 활용해 접근성을 고려한 최적의 설정을 쉽게 적용할 수 있습니다. 이미 적용한 스타일을 바꾸거나 제거하고 싶다면 클립 아이콘을 눌러 분리(Detach)할 수도 있습니다. 테마 커스텀하기라이브러리에서 지정된 스타일을 직접 수정하는 것은 어렵습니다. 하지만, 구글의 Material Design에서는 Material Theme Builder 플러그인으로 키트 테마를 커스텀할 수도 있습니다. <출처: 작가, 피그마 캡처> Material Theme Builder에서 원하는 컬러 테마와 스타일을 적용하고 Update 버튼을 누르면 테마가 업데이트됩니다. 이렇게 커스텀한 테마는 로컬 파일에 저장되며, 라이브러리에서 꺼내 원하는 요소에 일괄 적용할 수 있습니다. 이런 커스텀 테마를 Export 기능으로 CSS, JSON, Dart 등 파일 형식으로 내보낼 수도 있습니다. 디자인 시스템을 개발 환경과 쉽게 연계할 수 있으므로 협업이 더욱 원활해지고, 개발 리소스도 절약할 수 있습니다. 플러그인피그마 플러그인은 디자인 작업을 더 편리하고 효율적으로 만들어주는 도구입니다. 플러그인을 잘 쓰면 아이콘 생성, 색상 팔레트 추천, 자동 정렬, 코드 변환 등 다양한 기능을 쉽게 적용할 수 있습니다. 피그마에는 다양한 플러그인이 있지만, 특히 유용한 플러그인 몇 가지를 추천하려고 합니다. 플러그인 실행 방법우선 플러그인 실행 방법부터 살펴보겠습니다. 간단합니다. <출처: 작가, 피그마 캡처> 피그마 작업창 하단 바에서 말풍선 아이콘 옆의 세 가지 도형과 + 로 이루어진 Actions 버튼을 클릭합니다. 검색창이 바로 위에 나타나는데, 검색어 입력창 아래 Plugins & widgets 탭을 선택해 원하는 키워드를 영어로 검색합니다. 보편적으로 사람들이 많이 찾아보는 단어, 예를 들면 wireframe, icon, image 등으로 검색해도 좋습니다. 이렇게 나오는 수많은 검색 결과 가운데 하트, 사용자 수가 많은 플러그인을 선택하면 퀄리티를 어느 정도 보장받을 수 있습니다. 원하는 플러그인을 선택하면 Plugin 새 창이 생성됩니다. 여기서 우측 하단 파란색 Run 버튼을 클릭하면 플러그인이 설치됩니다. 플러그인마다 기능이 다르기 때문에, 실행한 다음 각 플러그인의 사용법을 확인하며 활용해 보세요. 아이콘을 위한 플러그인 2가지디자이너라면 직접 아이콘을 제작할 수도 있지만, 사이드 프로젝트나 프로토타이핑 등 빠른 작업이 필요할 경우, 이미 만들어진 아이콘 에셋을 활용하는 것이 훨씬 효율적입니다. 피그마에서는 다양한 아이콘 플러그인을 제공합니다. 대표적으로는 Iconify와 Icons8이 있습니다. Iconify는 수천 개의 무료 아이콘을 제공하고, Icons8은 다양한 스타일의 아이콘을 검색하고 삽입할 수 있는 기능을 가집니다. 아이콘을 선택할 때 중요한 점은 일관성을 유지하는 것입니다. 예를 들어, 모든 아이콘을 라인 스타일로 선택했다면 라인의 두께를 일정하게 맞추는 것이 좋습니다. 또한, 프로젝트의 브랜드 아이덴티티와 조화를 이루는 스타일을 선택하는 것이 디자인의 완성도를 높이는 데 도움이 됩니다. 적절한 아이콘을 활용하면 사용자 경험을 향상시키고, 정보 전달력을 높이는 데 효과적입니다. 이미지를 위한 플러그인 2가지UX/UI 디자인에서 배너, 배경, 썸네일 같은 요소를 디자인할 때는 이미지가 필수입니다. 그러나 외부 사이트에서 이미지를 일일이 검색하는 것은 번거로운 작업입니다. 피그마에서는 플러그인을 활용해 원하는 이미지를 빠르게 삽입할 수 있습니다. 대표적인 플러그인으로는 Unsplash와 Lummi가 있습니다. Unsplash는 저작권 걱정 없이 상업적으로 활용할 수 있는 고품질 이미지를 제공하며, Lummi는 AI가 생성한 독특한 스타일의 이미지를 지원합니다. 이미지를 효과적으로 활용하려면 먼저 프로젝트에 적합한 키워드로 검색한 다음, 원하는 이미지를 삽입하면 좋습니다. 이렇게 삽입한 이미지는 크기나 스타일을 조정할 수 있으며, 디자인 분위기를 결정하는 중요한 요소로 쓰입니다. 적절한 이미지를 선택하는 것만으로 전체적인 디자인의 미적 완성도를 높이고, 사용자의 시각적 몰입감을 향상시킬 수 있습니다. 스타일을 위한 플러그인 2가지피그마에서는 디자인의 일관성을 유지하기 위해 스타일을 지정할 기능을 제공합니다. 라이브러리를 설치해 애플이나 구글에서 제공하는 스타일을 활용할 수 있지만, 프로젝트에 따라 고유한 스타일을 설정해야 할 때도 있습니다. 이럴 때는 Styler나 Foundation과 같은 플러그인을 활용하면 보다 체계적으로 스타일을 관리할 수 있습니다. Styler는 색상, 폰트, 그리드 시스템을 자동으로 생성해 주며, Foundation은 디자인 시스템 구축을 돕는 기능을 갖추고 있습니다. 특히, 브랜드 고유 컬러와 폰트를 적용해야 하거나 프로젝트별로 다른 스타일을 빠르게 설정할 때, 이러한 플러그인이 매우 유용합니다. 스타일을 직접 지정하면 디자인의 개성을 살릴 뿐만 아니라, 협업을 할 때도 일관된 디자인 가이드를 유지하는 데 큰 도움을 줍니다. <출처: 작가, 피그마 캡처> AI 기술을 적용한 플러그인최근 AI 기술이 UX/UI 디자인에 활발히 들어가며, 피그마에서도 AI 기반의 다양한 플러그인을 활용할 수 있습니다. 이러한 AI 툴들은 디자인 프로세스를 자동화해 반복 작업을 줄이며, 효율적인 워크플로를 구축하는 데 도움을 줍니다. <출처: 작가, 피그마 캡처> 대표적인 AI 기반 피그마 플러그인으로는 Codia AI, AI Design Copilot이 있습니다. Codia AI는 스크린샷 이미지를 업로드하면 이를 편집할 수 있는 피그마 파일로 변환해 주는 기능을 제공합니다. 기존 디자인을 빠르게 재구성하거나 참고할 때 유용합니다. AI Design Copilot은 텍스트 입력만으로 와이어프레임을 생성해 주는 툴로, 하루 10개까지 무료로 사용할 수 있습니다. 아이디어 스케치를 보다 빠르게 시각화할 수 있으며, 초기 기획 단계에서 효율적으로 레이아웃을 구성할 수 있습니다. 이러한 AI 툴들은 디자인뿐만 아니라 UX 리서치와 프로토타이핑 과정에서도 유용하게 쓰이며, 반복 작업을 줄이고 창의적인 업무에 집중할 수 있도록 지원합니다. 커뮤니티피그마 작업 파일에서 라이브러리나 플러그인을 직접 실행하는 방법도 있지만, 피그마 커뮤니티를 활용하면 더욱 다양한 디자인 리소스를 쉽게 찾을 수 있습니다. 우리가 사용하는 라이브러리와 플러그인이 모두 커뮤니티에 아카이빙되어 있기 때문입니다. 피그마 커뮤니티는 Design Resources, Plugins, Whiteboarding, Presentations 하위 다양한 카테고리로 나뉘어 있습니다. 원하는 리소스를 검색하면 다른 사람이 작업해 둔 파일을 그대로 활용할 수 있습니다. 예를 들어, “e-commerce”라고 검색하면 관련 디자인 리소스 수백 개가 나오는데요, 기본적으로는 관련도순으로 정렬되기에 검색어와 연관성이 높은 리소스를 먼저 확인할 수 있습니다. 물론 검색 기능만으로 넓고 풍성한 피그마 커뮤니티에서 내가 딱 원하는 디자인 파일을 찾는 일이 쉽지 않을 수 있습니다. 그러나 원하는 디자인 리소스를 찾는 것도 하나의 능력입니다. 처음에는 검색이 어려울 수 있지만, 검색어 조합과 필터를 적절히 활용하면 점점 더 효율적으로 원하는 리소스를 찾을 수 있습니다. 무엇보다 중요한 팁은 바로 ‘필터’ 활용에 있습니다. 관련도순으로 정렬된 필터를 ‘Popular’로 변경하면, 좋아요와 사용자 수가 많은 인기 리소스를 우선적으로 확인하며 퀄리티가 보장된 자료를 찾기 더욱 쉬워집니다. 한편 ‘Recent’ 필터를 쓰면 최신 업데이트된 디자인 리소스를 확인할 수 있습니다. 최근에 올라온 자료는 사용자 수와 좋아요 수가 적을 수 있으므로, 인기순에 노출되지 않는 최신 디자인 에셋들을 확인하기에 좋습니다. 그런 만큼 인기순으로 먼저 보고, 최신순으로 한 번 더 검색 결과를 확인하는 것을 추천합니다. 마지막으로, 커뮤니티에 공개된 파일을 활용할 때는 저작권을 주의해야 합니다. 제작자마다 라이선스 정책이 다르므로, 파일을 활용하기 전에 반드시 저작권 범위를 확인하는 것이 중요합니다. 저작권은 커뮤니티에 배포된 파일 내에 명시되어 있거나, 저작권 연관 링크로 안내하는 경우가 많습니다. 예를 들어, 토스에서 배포한 Tossface 플러그인은 누구나 자유롭게 무료로 이용할 수 있지만, 클래스101의 Product System Component는 상업적 사용을 절대 금지하고 있습니다. <출처: 작가, 피그마 캡처> 마치며디자인 작업이 어렵게 느껴질 때, 혼자 힘들어하지 마세요. 피그마를 적절히 활용하면 혼자서도, 경험이 많지 않아도 쉽게 해결할 수 있습니다. 이제 여러분도 피그마의 라이브러리, 플러그인, 스타일 활용법을 잘 익히고 효율적으로 적용해 보세요. 더는 디자인에서 막막함을 느낄 필요 없이 프로젝트를 빠르고 효과적으로 진행할 수 있습니다. 여러분의 사이드 프로젝트나 창업 아이디어를 막힘없이 실현해 보기를 응원합니다. +제가 직접 상업적으로 사용할 수 있으며 활용도 높은 반응형 컴포넌트를 커뮤니티에 Ready-to-Use Mobile App Templates: Solo Startup UI kit 이름으로 배포해 두었으니, 필요할 때 마음껏 사용하세요. 다양한 시나리오별 와이어프레임도 포함되어 있는데, 이는 본문에서 언급했던 AI 툴로 제작한 것이니 참고 부탁드립니다. ©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.