과정상세
업무에 바로 쓰는 피그마와 디자인 시스템
교재제공 초급
업무에 바로 쓰는 피그마와 디자인 시스템
카테고리
- 학습유형별 대면
- SW 개발 기획/UX/UI
과정요약
| 학습시간 | 09:30 ~ 17:30 ( 34시간 ) | 난이도 | 초급 |
|---|---|---|---|
| 교육비 지원 | 고용보험 비환급 | 평가항목 | 출석률 100% |
| 수료기준 | 총점 80점 이상시 수료 | 정원 | 24 명 |
| 교재정보 | |||
과정소개
기획자, 디자이너, 개발자 間 협업이 너무나 중요하죠!
점점 더 확장되고 있는 비즈니스 구조에서 복잡도가 증가하고 있기 때문에
일관된 UX/UI 구현을 위해서는 디자이너가 UI설계를 하는 디자인 시스템이 필요합니다.
UI 디자인 시스템은 기존의 화면 단위가 아니라 컴포넌트 단위로 화면을 구성함으로써
작업 효율화, 디자인의 통일성을 이뤄 개발과의 시너지가 일어날 수 있게 합니다.
디자인 시스템, 피그마로 업무에 활용 해 봅시다 😀
UI 가이드라인 UI를 표준화하고 화면간의 일관성 확보하여 디자이너와 개발자가 정해진 기준에 따라 UI를 설계할 수 있게 함
↓
UX 가이드라인 서비스와 브랜드 측면에서 사용자가 일관된 경험을 할 수 있게 하는 가이드. 브랜드의 정체성이나 색을 일관되게 전달하도록 하는 기능정의, GUI요소 정의 등
↓
디자인 시스템 단순 스타일 가이드부터 브랜드 원칙, UX 원칙을 구성하는 시스템까지 있으며, 정해진 디자인 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시켜 줌
특히 본 과정에서는 아토믹 디자인 시스템을 기반으로 실습이 진행됩니다.
⌘ Atomic Design
디자인 시스템을 실행, 구성하는 방법론으로
"디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식"입니다.
이러한 개념을 원자와 분자라는 이해하기 쉬운 생물학적 개념과 비교하여
이해와 응용이 쉽게 표현한 것이 바로 아토믹 디자인 입니다.
프로그램 설치 없이 피그마 웹 사이트에 접속해서 사용할 수 있는 디자인 툴입니다.
🏆 Figma의 강점 🏆
✔ 맥OS에서도 윈도에서도 OK!
✔ 무료로 사용 가능
✔ 빠른 작업 속도
✔ 빠른 기능 업데이트
✔ 기획, PPT, 애니메이션 등 다양한 용도로도 활용!
디자인 시스템의 핵심을 배우는 오프라인 Class
개발자와 디자이너의 커뮤니케이션을 이해하고
디자인 시스템을 구축하고자 하는 분들께
딱 필요한 5일 집중 과정입니다.
모바일에서도 PC에서도 탭에서도
언제든지 다시 볼 수 있는 생생한 자료를
노션으로 아낌없이 나눠드립니다.
뛰어난 강사님과 함께하는 실습으로
UI 디자인에 자신감을!
+ 협업까지 경험 해 봅니다!
Foundation 구성하기
💻 피그마 계정 가입을 위해서 이메일계정(Gmail 등)이 필요합니다.
학습목표
- 모든 디자인 작업물을 시스템 관점으로 보는 시각을 가질 수 있다.
- 재사용 가능한 디자인에 대해 이해한다.
- 개발자를 고려한 디자인이 무엇인지 생각하며 디자인할 수 있다.
- 아토믹 디자인 시스템을 이해한다.
학습대상
- 디자인 시스템을 구축하고 싶은 디자이너
- 피그마 기초 사용법은 알지만 시스템 적용이 망설여지는 디자이너
- 디자인 시스템을 이해하고 싶은 개발자
- 디자이너와 개발자의 커뮤니케이션을 읽고 싶은 기획자
교재소개
- 모든 자료는 노션으로 제공됩니다.
노션 사이트 접속 링크는 강의 첫날 강사님께서 직접 알려드립니다.
-
-
1일차
-
안녕 피그마!
- 왜 피그마를 선택하는가?
What is Figma? 09:30 ~ 10:30 - 피그마 계정 생성 10:30 ~ 11:30
- 피그마 인터페이스 학습 11:30 ~ 12:30
- 피그마 툴 구조 학습 13:30 ~ 14:30
- 왜 피그마를 선택하는가?
-
커뮤니티 활용하기
- 나에게 필요한 커뮤니티 활용법 14:30 ~ 15:30
-
플러그인 활용하기
- 자주 사용하는 플러그인 등록하기 15:30 ~ 16:30
-
기초 UI 만들기
- 피그마 툴을 사용하여 기본적인 UI(아이콘과 픽토그램) 그리기 16:30 ~ 17:30
-
안녕 피그마!
-
2일차
-
피그마 특징 파헤치기
- 프레임 & 그룹 & 섹션의 차이와 활용 (Frame or Group or Section) 09:30 ~ 10:30
- 오토레이아웃의 활용 (AutoLayout)과 장단점 비교분석 10:30 ~ 11:30
- 피그마에 내장된 디자인 시스템 이해하기 (Native System) 11:30 ~ 12:30
- 재사용 가능한 디자인은 무엇을 고려해야 할까 (Component and Instance) 13:30 ~ 14:30
- 재사용 가능한 디자인에 필요한 속성 정의하기 (Component Properties) (1) 14:30 ~ 15:30
- 재사용 가능한 디자인에 필요한 속성 정의하기 (Component Properties) (2) 15:30 ~ 16:30
- 유연하고 재사용 가능한 카드UI 만들기 16:30 ~ 17:30
-
피그마 특징 파헤치기
-
3일차
-
피그마의 시스템 활용
- Local Styles 등록하기 09:30 ~ 10:30
- Local Variable 등록하기 10:30 ~ 11:30
- Token Studio 활용하기 11:30 ~ 12:30
- Variables VS Token Studio 13:30 ~ 14:30
-
피그마 프로토타입
- basic prototype 학습 14:30 ~ 15:30
- Advanced Prototype 학습 15:30 ~ 16:30
- Advanced Prototype 응용 16:30 ~ 17:30
-
피그마의 시스템 활용
-
4일차
-
UI 선정하기
- 만들고 싶은 UI를 선정 09:30 ~ 10:30
-
컴포넌트 추출하기
- UI 와 Component 분리 10:30 ~ 11:30
-
시스템 활용
- 시스템을 활용해 실제 UI 그리기 11:30 ~ 12:30
- 시스템을 활용해 실제 UI 그리기 13:30 ~ 14:30
- 시스템을 활용해 실제 UI 그리기 14:30 ~ 15:30
-
아토믹 디자인 시스템
- 컴포넌트 분리 15:30 ~ 16:30
- 컴포넌트 분리 16:30 ~ 17:30
-
UI 선정하기
-
5일차
-
프로토타입 구현
- 내가 만든 UI 프로토타입 구현하기 09:30 ~ 10:30
- 내가 만든 UI 프로토타입 구현하기 10:30 ~ 11:30
- 내가 만든 UI 프로토타입 구현하기 11:30 ~ 12:30
-
개발자에게 전달하기
- Token studio 토큰 전달하기 13:30 ~ 14:30
- Local Variable 토큰 전달하기 14:30 ~ 15:30
- github 활용하기 15:30 ~ 16:30
-
프로토타입 구현
-
1일차
수강후기 68
-
5김*견
2025.03.14
강사님이 누구나 이해하기 쉽도록 어려운 부분도 쉽게 설명해주셔서 매우 만족합니다 -
5오*환
2025.03.14
처음 접하는 과정이지만 충분한 실습으로 따라가기 좋았습니다 -
5마*연
2025.03.14
강사님이 엄청 꼼꼼하게 수업을 해주셔서 실무에 많은 도움이 되었음 -
5정*하
2025.03.14
도움이 많이 되었습니다. -
4.5한*수
2024.10.18
피그마에 대해 조금 알 수 있는 기회였습니다.
업무에 바로 쓰는 피그마와 디자인 시스템 관련과정
교재제공