과정상세
업무에 바로 쓰는 디자인 시스템 with 피그마
초급
업무에 바로 쓰는 디자인 시스템 with 피그마
카테고리
- SW 개발 기획/UX/UI
- 학습유형별 대면
과정요약
학습시간 | 09:30 ~ 17:30 ( 21시간 ) | 난이도 | 초급 |
---|---|---|---|
교육비 지원 | 고용보험 비환급 | 평가항목 | 출석률 100% |
수료기준 | 총점 80점 이상시 수료 | 정원 | 24 명 |
과정소개
기획자, 디자이너, 개발자 間 협업이 너무나 중요하죠!
점점 더 확장되고 있는 비즈니스 구조에서 복잡도가 증가하고 있기 때문에
일관된 UX/UI 구현을 위해서는 디자이너가 UI설계를 하는 디자인 시스템이 필요합니다.
UI 디자인 시스템은 기존의 화면 단위가 아니라 컴포넌트 단위로 화면을 구성함으로써
작업 효율화, 디자인의 통일성을 이뤄 개발과의 시너지가 일어날 수 있게 합니다.
디자인 시스템, 피그마로 업무에 활용 해 봅시다 😀
UI 가이드라인 UI를 표준화하고 화면간의 일관성 확보하여 디자이너와 개발자가 정해진 기준에 따라 UI를 설계할 수 있게 함
↓
UX 가이드라인 서비스와 브랜드 측면에서 사용자가 일관된 경험을 할 수 있게 하는 가이드. 브랜드의 정체성이나 색을 일관되게 전달하도록 하는 기능정의, GUI요소 정의 등
↓
디자인 시스템 단순 스타일 가이드부터 브랜드 원칙, UX 원칙을 구성하는 시스템까지 있으며, 정해진 디자인 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시켜 줌
특히 본 과정에서는 아토믹 디자인 시스템을 기반으로 실습이 진행됩니다.
⌘ Atomic Design
디자인 시스템을 실행, 구성하는 방법론으로
"디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식"입니다.
이러한 개념을 원자와 분자라는 이해하기 쉬운 생물학적 개념과 비교하여
이해와 응용이 쉽게 표현한 것이 바로 아토믹 디자인 입니다.
프로그램 설치 없이 피그마 웹 사이트에 접속해서 사용할 수 있는 디자인 툴입니다.
🏆 Figma의 강점 🏆
✔ 맥OS에서도 윈도에서도 OK!
✔ 무료로 사용 가능
✔ 빠른 작업 속도
✔ 빠른 기능 업데이트
✔ 기획, PPT, 애니메이션 등 다양한 용도로도 활용!
디자인 시스템의 핵심을 배우는 오프라인 Class
개발자와 디자이너의 커뮤니케이션을 이해하고
디자인 시스템을 구축하고자 하는 분들께
딱 필요한 3일 집중 과정입니다.
모바일에서도 PC에서도 탭에서도
언제든지 다시 볼 수 있는 생생한 자료를
노션으로 아낌없이 나눠드립니다.
뛰어난 강사님과 함께하는 실습으로
UI 디자인에 자신감을!
+ 협업까지 경험 해 봅니다!
Foundation 구성하기
💻 피그마 계정 가입을 위해서 이메일계정(Gmail 등)이 필요합니다.
학습목표
- 모든 디자인 작업물을 시스템 관점으로 보는 시각을 가질 수 있다.
- 재사용 가능한 디자인에 대해 이해한다.
- 개발자를 고려한 디자인이 무엇인지 생각하며 디자인할 수 있다.
- 아토믹 디자인 시스템을 이해한다.
학습대상
- 디자인 시스템을 구축하고 싶은 디자이너
- 피그마 기초 사용법은 알지만 시스템 적용이 망설여지는 디자이너
- 디자인 시스템을 이해하고 싶은 개발자
- 디자이너와 개발자의 커뮤니케이션을 읽고 싶은 기획자
- - 피그마를 깊게 이해하고싶은 디자이너
교재소개
- 모든 자료는 노션으로 제공됩니다.
- 노션 사이트 접속 링크는 강의 첫날 강사님께서 직접 알려드립니다.
-
-
1일차
-
1. 디자인 시스템이란?
- 디자인 시스템이란 무엇인가? 09:30 ~ 10:30
- 디자인 시스템을 쓰는 이유 10:30 ~ 11:30
- UI 설계가 중요한 이유 11:30 ~ 12:30
-
2. 아토믹 디자인 시스템이란?
- 아토믹 디자인 시스템이란? 13:30 ~ 14:30
- 타 회사 디자인 시스템 분석하기 14:30 ~ 15:30
-
3. 실습 환경 설정
- 피그마 실습환경 구성 15:30 ~ 16:30
- Component의 이론 16:30 ~ 17:30
-
1. 디자인 시스템이란?
-
2일차
-
4. 피그마 기능 200% 활용하기
- Component Variant 이해하기 09:30 ~ 10:30
- Component Properties 이해하기 10:30 ~ 11:30
-
5.Tokens Studio 사용하기
- Tokens Studio 사용방법 익히기 11:30 ~ 12:30
- Tokens Studio 에 시스템 등록하기 13:30 ~ 14:30
- 피그마 native 시스템과 tokens Studio 비교하기 14:30 ~ 15:30
-
6. 시스템 사용하기
- 등록된 시스템을 바탕으로 UI 제작해보기 15:30 ~ 16:30
- 등록된 시스템을 바탕으로 UI 제작해보기 16:30 ~ 17:30
-
4. 피그마 기능 200% 활용하기
-
3일차
-
7. Hand Off
- Github 계정 생성 및 플러그인 연결 09:30 ~ 10:30
- 공유 가능한 디자인 토큰 관리하기 10:30 ~ 11:30
-
8. 개발자의 토큰 코드 설계
- 1차 가공 (JSON 데이터 Transformer) 11:30 ~ 12:30
- 2차 가공 (style-dictionary) 13:30 ~ 14:30
- 2차 가공 (style-dictionary) 14:30 ~ 15:30
- Github Workflow 설정 15:30 ~ 16:30
- build 하기 16:30 ~ 17:30
-
7. Hand Off
-
1일차
수강후기 13
-
5한*민
2024.03.22
막연했던 디자인 시스템을 이해하는데 도움이 되었습닏 . -
5박*애
2024.03.22
Figma의 기초부터 모든 것을 알차게 배울 수 있는 강의 입니다. -
4.5홍*민
2024.03.22
기획자, 디자이너, 개발자 모두에게 유익한 과정입니다. -
5문*현
2024.03.22
너무 도움이 많이 되었어요. 선생님이 자상하게 잘 가르쳐주셨어요!!! -
4.75김*지
2024.03.22
디자인시스템 활용을 위해 좋은 강의였습니다.