Loading page

This site uses privacy-conscious Google Analytics only with your permission.

1. 강력한 UI 드로잉

본문으로 건너뛰기

작업 사이드 블로그 소개

KR

ENEnglish KR한국어

2020년 1월 17일4분 읽기

1. 강력한 UI 드로잉

Figma는 왜 빠르게 사랑받는 디자인 도구가 되었을까요? 강력한 드로잉부터 협업과 확장성까지 핵심을 차근차근 살펴봅니다.

목차

2. 쉬운 공유
3. 시스템적 이용
그 외

목차2. 쉬운 공유

2. 쉬운 공유
3. 시스템적 이용
그 외

thumbnail 07

피그마의 주요 기능으로는 아래 세 가지를 꼽을 수 있습니다.

© 2026 Sanghyo Yee. All rights reserved.

벡터+비트맵+웹 툴입니다

강력한 벡터 드로잉 기능을 활용해 자유롭게 그림을 그릴 수 있습니다.
상당히 많은 이미지, 실무 파일에서도 굉장히 빠르게 작동합니다.
웹에 자동저장되기 때문에, 시스템 크래시가 발생할 일이 매우 적습니다.

고품질 UI 컴포넌트를 원툴로 만들 수 있습니다

Variants 기능을 통해 UI의 상태값을 고차원적으로 표현할 수 있습니다.
스마트 애니메이트 기능을 통해, 내가 만든 인터랙션을 라이브러리화 할 수 있습니다.
프로토타이핑 및 애니메이션을 체계적으로 활용할 수 있습니다.

원하는 목적에 응용할 수 있습니다

비주얼 요소를 빠르게 정의, 결합할 수 있기 때문에 정말 다양하게 활용할 수 있습니다. 프리젠테이션, 애니메이션, 일러스트레이션, 브레인스토밍, 태스크매니징, 이모지, 간단한 게임 제작 등의 목적으로 사용할 수 있습니다.
내가 만든 이모지 라이브러리를 실시간 브레인스토밍에 사용할 수 있다면? 피그마의 라이트 버전인 피그잼(브레인스토밍, 워크샵 등에 유용)으로, 디자이너가 아닌 구성원과도 효과적으로, 재밌게 생각을 나눌 수 있습니다.

다양한 플러그인을 쉽게, 바로 사용 가능합니다

UI사이에 화살표를 그려서 플로우차트를 만들기도 하고
스프레드시트 데이터와 UI를 연결시킬 수도 있고
내가 그린 에셋을 3D 로 만들 수도 있고
무료 이미지를 피그마 안에서 찾아서 바로 활용할 수도 있습니다.

무료입니다

모든 드로잉 관련 기능이 무료이기 때문에, 무료 플랜으로도 충분히 재밌는 프로젝트를 수행할 수 있습니다.
프로젝트 기능을 통해 무료로도 수많은 작업자들과 협업해볼 수 있습니다.
유료로 제공되는 라이브러리, 팀 기능은 프로젝트와 피그마 숙련도가 고도화된 이후에 더 빛을 발합니다.

2. 쉬운 공유

웹 링크로 공유합니다

링크 클릭 한 번으로 공유자가 원하는 위치로 사용자를 바로 랜딩시킵니다.
디자이너, 기획자, 개발자가 한 프로젝트 파일 안에서 작업할 수 있습니다.
오토 레이아웃을 활용, 컴포넌트를 개발UI를 그리는 방식과 유사하게 디자인할 수 있고, 이를 통해 커뮤니케이션 코스트를 최적화할 수 있습니다.
코멘트 기능을 활용하면 디자인 파일에서 바로 커뮤니케이션하고, 피드백을 반영할 수 있습니다.
공유 권한 설정을 세밀하게 조절할 수 있습니다. 원하는 만큼, 원하는 사람들에게 공유할 수 있습니다.
지라, 노션 등 다른 서비스에서 임베드 기능을 제공하기 때문에, 다른 협업툴에서도 디자인을 실시간으로 확인할 수 있습니다.

체계적으로 저장할 수 있습니다

언제 어디서나, 컴퓨터만 있으면 디자인할 수 있습니다.
언제 어디서나, 아무 전자기기(태블릿/폰/컴퓨터 등) 만 있으면 작업을 팔로잉할 수 있습니다.
클라이언트가 아닌 웹에 저장하기 때문에, 버전 관리, 롤백이 정말 쉽습니다.

바로 개발할 수 있습니다

추가 과금 없이 Inspect 탭에서 UI 구현에 사용된 모든 요소를 체계적으로 확인할 수 있어, 핸드오프 툴 없이도 실제 개발에 활용할 수 있습니다.

3. 시스템적 이용

디자인을 체계적으로 복붙할 수 있습니다

복붙의 끝판왕, 컴포넌트 기능을 활용하면 반복적인 디자인을 효과적으로 관리할 수 있습니다.

라이브러리를 실시간으로 배포하고, 피드백을 받을 수 있습니다

배포되면, 다른 피그마 파일에서도 업데이트 버튼을 눌러 최신 업데이트를 바로 받아볼 수 있습니다.
라이브러리의 컴포넌트를 디자이너가 설정한 스타일을 유지한 채, 다양한 방식으로 오버라이드할 수 있습니다.
버즈빌 디자인 시스템 사례(Apps) : SDK의 특성을 반영, 브랜드리스한 UI컴포넌트를 제작 및 배포해 외부에서도 시스템 사례를 참고할 수 있도록 했습니다.

자체 플러그인을 개발할 수 있습니다

우버 디자인 시스템 사례(Link) : 피그마에서 제공하는 디자인 작업 및 제안에 그치지 않고, 자체 플러그인 개발을 통해, 누구나 자신의 니즈의 맞으면서도 개발 가능한 상태의 우버 UI를 생성할 수 있게 만들었습니다.

API를 제공합니다 (Link)

활용 예시 : 디자이너가 피그마 파일에서 아이콘셋이나 스타일을 추가하고 알리면, 해당 피그마 라이브러리를 개발 라이브러리에 동기화시키는 툴을 만들 수도 있습니다.

그 외

피그마의 장점, 좋은 사례 등을 제보해 주세요! 주기적으로 검토 후 문서에 추가하겠습니다. 많은 분들이 피그마의 멋짐을 활용하는 데 이 문서가 도움이 되었으면 좋겠습니다 🙇

제보하러 가기 →

피그마에서 놓치고 갈 뻔한 유용한 기능, 알고 계셨나요? →

ⓒ 2021. SangHyo Yee, All Rights Reserved.