Thumbnail
크리에이티브 UX/UI
피그마로 디자이너와 협업하기
17명이 수강하고 있어요.

11,000원

지식공유자 : 니디자인
총 4개 수업
평생 무제한 수강
수료증 발급 강의
입문 대상 초급 중급이상
내 목록 추가 19 공유
입문자를 위해 준비한
[UX/UI, 디자인 도구] 강의입니다.

개발자분들을 위한 피그마(Figma) 사용방법 가이드북입니다.

✍️
이런 걸
배워요!
디자이너가 아닌 개발자분들에게 필요한 피그마 기능
디자이너와의 협업시 TIP

수강신청 전 확인해주세요!

  • 이 강의는 pdf 파일이 제공되는 텍스트 강의입니다. 수강에 참고하시기 바랍니다.

개발자를 위한 피그마 가이드북

 # 피그마 가이드북 제작 배경 및 간략 소개

피그마는 제가(웹,앱 UI디자이너) 지금까지 사용했던 그래픽 편집 툴, 협업 툴 중 가장 만족도가 높은 툴입니다. 해외에서는 이미 많은 사람들이 피그마로 갈아타고 있는 반면 국내 사용자는 아직 그리 많지 않습니다. 그만큼 학습 교재나 강의도 많지 않고요. 피그마는 포토샵과 같은 디자인 편집 툴입니다. 하지만 개발자분들 입장에서는 재플린과 같은 툴이라고 생각하시면 됩니다.

개발자분들은 피그마에서 컴포넌트의 스펙을 확인하고 필요한 요소를 다운받는 일을 주로 하시게 될거에요. 디자인 편집 기능을 사용할 일은 보통 거의 없을 겁니다. Editor와 (편집 권한이 있는 사람. ex. 주로 디자이너) Viewer가 (편집 권한 없이 볼 수만 있는 사람. ex. 주로 개발자) 보는 피그마 화면 UI 및 사용방법도 조금씩 다르고요. 그런데 시중에 나와있는 책이나 강의 영상들은 모두 디자이너 입장에서 기술된 내용들 밖에 없습니다. 그래서 이렇게 직접 개발자분들을 위한 피그마 가이드북을 만들게 되었습니다. 

이 가이드북은 개발자분들을 위해, 디자이너와의 협업에 필요한 핵심 내용만을 정리하여 최대한 빠르게 실무에서 사용하실 있도록 도움 드리고자 만든 가이드북입니다. 디자인 편집 기능에 대한 설명 대신 컴포넌트 다운받는 방법, 세부 스펙 확인 방법 등 개발자 분들에게 필요한 내용 위주로 정리했습니다. 

이 글을 읽으시는 분이 개발자라면 다음 내용을 꼭 읽어주세요

디자이너와 협업할 때 보통 재플린을 많이 사용하고 계실거에요. 재플린도 좋은 협업툴이기는 하지만 몇가지 아쉬운 점이 있습니다. 그 중 하나는, 본인이 제작중인 서비스의 전체적인 구조와 흐름을 한눈에 파악하기 어렵다는 점입니다.

재플린에 올라와 있는 페이지들이 어떤 흐름으로 이어지고 각 컴포넌트들은 서로 어떻게 연결되어 있는지를 알 수 없섭니다. 그럴때마다 개발자분들은 디자이너나 기획자에게 '이 다음은 어느 페이지로 이동하는건지' 등과 같은 것들을 계속 물어보셔야 했을 겁니다.

그런데 피그마에서는 이 전체적인 그림을 개발자분들도 한눈에 확인 가능합니다. 당연히 각 컴포넌트들의 상세한 스펙을 확인하는 기능도 있고요. (크기, 위치, 색상, 특히 화면 넘어갈 때의 애니메이션 종류와 컴포넌트의 정렬 방법 등 재플린에서는 확인할 수 없었던 스펙까지 확인할 수 있습니다!)

스케치, XD와 같은 다른 그래픽 편집툴에도 이러한 기능이 다 들어가 있지만, 그 중 피그마를 추천하는 이유는 피그마가 가장 진입 장벽이 낮아서에요. 다른 툴들과 달리 피그마는 Mac과 윈도우에서 모두 사용 가능하며 별도의 프로그램을 설치할 필요가 없습니다. 화면 UI도 재플린과 어느정도 비슷하기 때문에 아예 새로운 것을 배운다고 생각할 필요도 없습니다. 디자이너와 협업할 수 있을 정도의 기능들만 알면 되기 때문에 피그마를 처음부터 끝까지 자세히 배울 필요도 없고요.

피그마를 한 번 써보고 싶으시다면, 동료 디자이너 분에게도 추천해주세요. 다른 디자인 편집 툴과 유사한 기능들이 많기 때문에 아마 하루 이틀이면 금방 배우실 수 있을 거에요. 

여기까지에요 ^^ 그리고 주변에 디자이너가 있다면 다음 내용을 알려주세요

만약 현재 웹이나 앱 디자인을 할 때 포토샵이나 일러스트를 사용하고 계신다면 피그마를 한 번 써보시기를 추천합니다. 피그마에서는 게시판, 표, 카드 그리드 등 반복적인 작업을 자동으로 금방 만들 수도 있습니다. 벡터 기반이라서 작동이 훨씬 빠르고 가볍기도 하고요. '스타일'이라는 기능을 통해 디자인 시스템을 관리하기도 훨씬 수월합니다. 무엇보다 재플린을 추가적으로 사용할 필요가 없습니다. 재플린에 파일을 올리면서 신경써야 했던 자잘한 부분들, 예를 들어 페이지들이 나열되는 순서나 섹션 구분해주는 일 등을 더 이상 할 필요가 없습니다. 동료 개발자분들을 피그마로 초대하면 그분들이 직접 피그마에서 상세 스펙을 바로 확인할 수 있거든요. 문제는 개발자분들에게 피그마 사용법을 알려드려야 한다는 점인데, 그럴 때 이 가이드북을 전해주시면 됩니다 =) 제가 개발자분들과 협업할 때 직접 사용하려고 만든 책이라서 꼼꼼하게 필요한 내용들을 잘 정리해 두었습니다. 

디자이너 분들에게 전하고 싶은 내용은 여기까지입니다!

# 이런 분들이 보시면 좋아요!

피그마를 배우고 싶은 분들 중, 다음 항목에 해당하시는 분들만 봐주세요.

- Web, App 개발자 (특히 Front-end)
- 디자이너와 좀 더 원활한 소통을 원한다.
- 협업에 필요한 핵심 내용만 빠르게 학습 후 실무에서 바로 사용하고 싶다.

# 이런 분들에게는 추천하지 않아요

본인이 웹/앱 디자이너이거나, 팀원과의 소통 개선 방안이 굳이 필요하지 않는 분, 또는 피그마의 디자인 편집 기능에 대해 처음부터 끝까지 자세히 알아보고 싶은 분들에게 이 가이드북은 적합하지 않습니다. Editor (디자이너)와 Viewer (개발자)가 보는 화면 UI와 사용방법이 조금씩 다르기 때문입니다.

# 목차

1장 협업용 도구로 피그마가 가장 좋은 이유 

2장 피그마 사용 방법

1. 준비사항 및 선수지식 

1) 피그마 계정 만들기 
2) 권한 종류 
3) 화면 구성 살펴보기 
4) Figma Mirror 앱 설치하기 
5) 디자인 시스템 

2. 컴포넌트, 프레임 선택 및 이미지 내보내기 

1) 컴포넌트 선택하기 
2) 컴포넌트 일괄 내보내기 
3) 선택한 컴포넌트만 내보내기 
4) 내보내기가 안될 때 

3. 세부속성, 간격, 애니메이션 확인하기 

1) 세부속성 확인하기 
2) 간격 확인하기 
3) 애니메이션 확인하기 

4. 질문하고 답하기, 컴포넌트 요청하기 

5. 팀원들과 온라인 회의하기 

6. 버전 관리 

7. 유료 기능 

1) 검색 플러그인 설치 (Figma walker) 
2) 슬랙과 연동하기 
3) 3인 이상에게 편집자 권한 부여 

8. 디자이너와 사전 협의할 사항 

1) 내보내기 설정 
2) 네이밍 정책 - 컴포넌트, 프레임 
3) 인터랙션 애니메이션 

9. 피그마 도움말 센터 

1) 피그마 기능 더 자세히 알아보기 
2) 업데이트 소식 

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
웹,앱 프론트 엔드 개발자
같이 일하는 개발자분들에게 피그마 사용방법을 설명드려야하는 디자이너

안녕하세요
니디자인 입니다.
니디자인의 썸네일

웹/앱 UI 디자이너입니다.

커리큘럼 총 4개
이 강의는 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 피그마로 디자이너와 협업하기
강의 소개 미리보기 목차 미리보기 미리보기 미리보기
피그마로 디자이너와 협업하기 (전체 내용)
강의 게시일 : 2021년 03월 03일 (마지막 업데이트일 : 2021년 03월 03일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

11,000원

내 목록 추가 19 공유
지식공유자 : 니디자인
총 4개 수업
평생 무제한 수강
수료증 발급 강의
입문 대상 초급 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스