Plus X UX디자이너가 피그마로 화면 설계하는 방식
피그마
UIUX
We plus experience for your brand.
Plus X는 브랜드 기반의 통합 디자인 솔루션을 만들고 있습니다.
29CM, YG, 카카오 페이지, 어도비, KT 등 13년간 국내 최고 기업들과 156개의 프로젝트 진행
어워드 수상 56개, 대상 수상작 14개, Behance Selected 작품 109개
Plus X가 만들면 디자인 툴 강의도 100% 다릅니다.
차원이 다른 BASIC CLASS
수많은 방법 중 피그마를 선택한 Plus X UX팀이 직접 알려주는 가장 효율적인 화면 설계 작성법
같은 디자인 툴 강의도 누구에게 어떻게 배우느냐에 따라 완전히 실력이 달라집니다.
-
01
UX 디자인을 위한 피그마 기초부터 심화까지 툴 마스터
UX 디자이너를 위한 피그마 강의로 기초 툴 학습 및 각 핵심 기능 심화 실습까지 진행합니다. 화면 설계 문서 작성 과정에서 필요한 피그마 툴을 익히 며 Plus X의 실력을 내 디자인에 더해보세요.
-
02
최적의 사용자 경험 구축을 위한 화면 설계서 UX 디자인 실무
피그마로 화면 설계서를 작성하는 방법을 배우고 기본적인 커머스 서비스 화면을 직접 설계해 봅니다. Plus X의 UX팀이 실제 구축한 설계서를 공유하면서 피그마 활용 노하우를 모두 알려드립니다.
-
03
Plus X UX 팀의 피그마 활용 노하우와 플러그인 추천
업계 Top 디자인 에이전시 Plus X의 UX팀이 실제 피그마를 활용하여 소통하는 방법과 실무에서 사용하는 다양한 팁들을 공유하고 가장 많이 쓰는 플러그인들 활용 노하우를 공개합니다.
UX 디자이너들이 관례처럼 써오던
파워포인트에서 ‘피그마로 바꾼 이유’
디자이너, 개발자 실시간 협업 가능
프로토타입 구현이 바로 가능한 와이어프레임 작업
여러 작업자 간 공통으로 사용할 수 있는 설계 체계 구축
Plus X UX팀이 피그마를 사용하면서 정립한
최적의
UX 워크플로우
와
화면 설계 방법 최초 공개
POINT 1
디자이너, 퍼블리셔, 개발자와의 효율적인 협업으로 퀄리티를 올리는
피그마 기본 기능 학습과 UX 화면 설계 세팅
Plus X 프로젝트 진행 과정 중 UX의 역할과 화면 설계서에 대한 개념을 익히고
본격적인 화면 설계에 앞서 피그마의 기본과 설계 업무를 위한 사전 세팅을 배워봅니다.
문서 양식 세팅
사전 세팅
POINT 2
일관된 사용자 경험과 실무자들의 편리한 협업을 위한
UX 화면 설계서 작성법과 실습
기본적인 커머스 서비스 화면을 직접 설계하며, 설계서의 컴포넌트/오토레이아웃의 화면 설계서 전체적인 활용 범주에 대해 이야기하고
각 설계서의 공유 과정에서 실무 커뮤니케이션 진행방식에 대한 플러스엑스만의 노하우를 소개합니다.
| 오토레이아웃 활용을 통한 문서화 |
• 빠른 문서 작업을 위한 오토레이아웃을 활용한 설계문서 정리 방식
- Figma 오토레이아웃 개념 설명 : Fixed, Hug Contents, Fill Container
- 개념 응용한 피그마 내에서 도표형식 제작
- 정책 정리형 도표 : 병합된 셀 Frame 유지하여 도표 구조 프리셋 실습
- 구조 정리형 도표 : Frame 내 오토레이아웃 적용된 구조화면 추가/관리 가능한 도표
- 컴포넌트 정리형 도표 : Frame 내 Component 관리를 위한 도표 프리셋 실습
| Scene #1 : 요구사항 확인, 정책 정리 |
• 예시 RFP문서 기반 내용 도표 정리, 컴포넌트 정리
- 컴포넌트 배리어블 생성
- 컴포넌트 vs 배리언츠 차이점 및 활용 방식 설명
- 메인 컴포넌트 내 디스크립션 기능 소개
- 설계 문서 내 디스크립션 작성법 소개
- RFP문서 기반 Components 제작 및 컴포넌트 정의 문서 작성/관리
- 설계 구성 요소(Components, Variable)활용 정책/요건 기반 컴포넌트 구체화
- 디스크립션 작성 간 팁 : 관련 정의 텍스트 내 링크 첨부하기
| Scene #2 : 와이어프레임 및 디스크립션 작성 |
• 정리된 내용 기반 커머스 상품 상세페이지 > 장바구니에 담기까지 플로우 정리
- Detatch instance 기능 활용
- 바텀시트 케이스 컴포넌트화, 케이스 프리셋 제작
| Scene #3 : 0.5v 설계문서 공유 |
• 설계 외부/유관자에게 공유, 피드백 공유 및 수정하기
- dev 기능 설명
- 피그마 파일 업데이트 히스토리 관리 기능 설명
- Copy link to section 기능을 통한 커뮤니케이션
- 피그마 'Add Comment' 기능에 대한 논의 히스토리 관리
- Pager 플러그인으로 페이지 넘버 자동 입력
- 텍스트 일괄 찾기/ 마스터 컴포넌트 기반 설계 요소 수정으로 설계서 정의 수정
POINT 3
실무에 바로 적용 가능한 UX 디자이너의 피그마 각종 꿀팁과
Plus X UX팀이 가장 많이 사용하는 7가지 플러그인 추천
Autoflow : 도형 사이 자동 플로우 라인 생성
Table Creator : 도표 프레임 자동생성
Annotate it! : 설계서 내 디스크립션 위치에 맞춰 작성하는 툴
Annotation : 히스토리 관리 및 디스크립션 작성 툴
Advanced Changelog(위젯) : 히스토리 관리 위젯
Manage Component Descriptions : 통합 디스크립션 수정 플러그인
Iconify : 간단한 아이콘 활용 가능 플러그인
Curriculum
PART A
UX 피그마 활용실무 개요
Chapter 1. UX 피그마 활용실무 개요
플러스엑스에서 프로젝트 진행 과정 중에 UX의 역할과 화면 설계서에 대해 소개하고, 피그마로 화면 설계서를 작성하게 된 이유를 설명합니다.
UX 화면 설계 업무에 대한 이해
- 화면 설계서는 누가 보기 위한 문서인가요?
- 화면 설계서는 언제 필요한가요?
- 화면 설계서 작성 툴은 무엇인가요?
피그마로 설계 문서 만드는 이유
- 프로젝트별 파일 관리 용이
- 실시간 공동 작업 용이
PART B
Plus X UX팀에서 피그마를 사용하는 법
Chapter 1. 문서 양식 세팅 및 컴포넌트 사전 세팅
본격적인 화면 설계 작업에 앞서 피그마 및 양식 세팅과 더불어 원활한 설계 업무를 위한 사전 세팅까지 설명합니다.
기본 문서 양식 세팅
- 설계 문서 양식 세팅
사전 세팅
- 폰트 세팅
- 컴포넌트 세팅
- 라이브러리 퍼블리시
Chapter 2. 세부적인 설계 문서 작업
플러스엑스 UX팀의 업무 방식에 맞추어 피그마로 화면 설계서를 만들어가는 전 과정을 소개합니다.
문서 양식부터 세부적인 작성 방법까지 플러스엑스 UX만의 팁들과 함께 실습해봅니다.
오토레이아웃 활용을 통한 문서화
- 필요성
- 사용 방법
[실습] 설계서 내 대표 도표형식
요구사항 확인, 정책 정리
- 컴포넌트, 배리언츠 개념 설명
- RFP문서 기반 설정, 관리 방법
[실습] 설계 내 기본 컴포넌트 셋 제작
와이어프레임 및 디스크립션 작성
- 와이어프레임 배치 방식
- 컴포넌트 활용 방식
[실습] 예시 RFP문서 기반 0.5v 설계 작성
0.5v 설계문서 공유
- 공유 시 코멘트 관리 방법
- 코멘트 및 업데이트 관리 방법
[실습] 최종 설계 문서 추출
PART C
피그마 플러그인 추천
Chapter 1. UX 실무에서 업무 효율을 높여주는 피그마 활용 노하우
플러스엑스 UX팀이 피그마를 설계서로 작성하면서 큰 도움이 될 수 있는 플러그인을 공유합니다.
플러그인
-
상세 커리큘럼
자세한 커리큘럼 및 내용은 여기서 확인하세요!
Special Package
서비스 기획부터 화면 구현까지 플러스엑스 스타일로!!
플러스엑스 디자인팀이 직접 알려주는
피그마 툴 노하우 강의를
특별 할인된 가격으로 한 번에 수강하세요.
-
구성 01 : UI
Plus X UI팀의 UI 디자이너를 위한
피그마 디자인 메뉴얼
✓ UI 디자이너의 필수 피그마 TOP 6가지 기능 활용 방법
✓ UI 디자이너라면 꼭 알아야할 반응형 웹 디자인 실습
✓ UI 팀이 자주 활용하는 플러그인과 업무 시간을 반으로 줄여 주는 실무 꿀팁
✓ UI 팀이 실제 업무에 사용하는 피그마 파일과 강의 실습 자료 제공 -
구성 02 : UX
Plus X UX팀의 피그마를 활용한
효율적인 화면 설계서 작성법
✓ Plus X UX 팀이 1년간 피그마를 사용하며 구축한 최적의 워크플로우 공개
✓ UX 디자이너의 필수 피그마 기능 기초부터 심화까지
✓ UX 디자이너라면 꼭 알아야할 UX 화면 설계서 작성 프로세스 실습
✓ UX 팀이 실제 업무에 사용하는 피그마 파일과 화면 설계 문서 제공
Instructor
안녕하세요
Plus X UX 디자인 팀입니다.
안녕하세요
Plus X UX 디자인 팀입니다.
플러스엑스 UX팀은 사용자의 경험을 최우선으로 고려하며,
브랜드의 핵심 가치를 사용자 인터페이스에 녹여내는 일을 하고 있습니다.
이 과정에서 발생하는 다양한 도전과 고민을,
플러스엑스만의 방식으로 해결해 나가고 있습니다.
본 강의에서는 플러스엑스 UX팀이 직접 컨설팅하는 과정에서 축적된 실무 경험을 바탕으로,
컴포넌트 기반의 와이어프레임 시스템 구축, UX 설계 전 과정에 걸친 피그마 툴의 활용과
효율적인 구축 단계의 워크플로우를 정립하는 방법을 전반적으로 다룹니다.
실제 프로젝트 기반의 예시 사례를 통해, 이론과 실무가 결합된 깊이 있는 지식을 전달할 예정입니다.
현업에서 피그마를 활용하는 디자이너들은 물론, UX 디자인을 배우고자 하는 예비 디자이너에게도 큰 도움이 될 것입니다.
또한, 본 강의에서는 프로덕트를 기획하거나 전략을 수립하는 과정에서 디자인의 중요성을 이해하고자 하는 모든 분들에게도
깊이 있는 인사이트를 제공합니다. 플러스엑스의 통합적인 브랜드 경험을 제공하는 노하우를 직접 경험해 보세요.
For You
이런 분들께 추천합니다.
-
1
UX 디자인을
배우고 싶은 초보자
UX 디자인을 배우기 위하여 피그마를 처음 입문, UI 디자인 기초와 핵심만 배우고 싶은 누구나
-
2
피그마 활용 능력을
향상시키고 싶은 디자이너
국내 탑 Plus X UX 디자이너들의 피그마 활용 노하우, 업무방식, 협업 체계 등 배우고 싶은 누구나
-
3
효율적 디자인 워크 플로우를
구축하고 싶은 팀
UX 전 과정에 걸친 피그마 툴 사용 및 효율적인 워크플로우를 구축 하는 방법이 궁금한 누구나
-
4
UX 피그마 툴 활용 방식을 배우고 싶은 디자이너
컴포넌트 기반 디자인 시스템 구축에 대한 이해도를 높이고 싶은 디자이너
프로그램 안내드립니다.
피그마 영문 프로그램 유료 버전으로 진행되었습니다.
* 프로그램은 제공되지 않습니다.
* 무료 플랜을 사용하는 수강생도 해당 강의의 대부분은 학습 가능하나, 설계 작성 실습에서 사용하는 라이브러리 기능의 특정 부분(라이브러리 퍼블리시)은 유료 플랜에서만 사용 가능한 점 참고 부탁드립니다.
최정상 디자인 기업이 전하는 실무 디자인의 모든 것,
디자인 전문 교육 플랫폼 SHARE X
SHARE X 모든 강의는 한 번 결제로 기간 제한 없이 평생 수강할 수 있습니다.
Recommendation
이런 분들께 추천합니다.