멀티캠퍼스 :: 과정상세보기

과정요약

과정요약
학습시간	21시간	난이도	초급
교육비 지원	고용보험 비환급	평가항목	출석률 100%
수료기준	총점 80점 이상시 수료	정원	24 명

과정소개

UX/UI의 혁신! 디자인 시스템은 필수! Figma UX/UI 디자인 디자인시스템 교육

기획한 서비스가 고객에게 전달되기까지
기획자, 디자이너, 개발자 間 협업이 너무나 중요하죠!

점점 더 확장되고 있는 비즈니스 구조에서 복잡도가 증가하고 있기 때문에
일관된 UX/UI 구현을 위해서는 디자이너가 UI설계를 하는 디자인 시스템이 필요합니다.

UI 디자인 시스템은 기존의 화면 단위가 아니라 컴포넌트 단위로 화면을 구성함으로써
작업 효율화, 디자인의 통일성을 이뤄 개발과의 시너지가 일어날 수 있게 합니다.

디자인 시스템, 피그마로 업무에 활용 해 봅시다 😀

Why 디자인 시스템???

디자인 시스템은 디자인 원칙과 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 산출물의 집합체입니다. 디자인 커뮤니케이션 방법으 변화
UI 가이드라인 UI를 표준화하고 화면간의 일관성 확보하여 디자이너와 개발자가 정해진 기준에 따라 UI를 설계할 수 있게 함
↓
UX 가이드라인 서비스와 브랜드 측면에서 사용자가 일관된 경험을 할 수 있게 하는 가이드. 브랜드의 정체성이나 색을 일관되게 전달하도록 하는 기능정의, GUI요소 정의 등
↓
디자인 시스템 단순 스타일 가이드부터 브랜드 원칙, UX 원칙을 구성하는 시스템까지 있으며, 정해진 디자인 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시켜 줌

특히 본 과정에서는 아토믹 디자인 시스템을 기반으로 실습이 진행됩니다.

⌘ Atomic Design
디자인 시스템을 실행, 구성하는 방법론으로
"디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식"입니다.
이러한 개념을 원자와 분자라는 이해하기 쉬운 생물학적 개념과 비교하여
이해와 응용이 쉽게 표현한 것이 바로 아토믹 디자인 입니다.

Why 피그마???

Figma(피그마)는 누구나 시간과 장소에 관계없이 컴퓨터와 인터넷만 있으면 곧바로 사용할 수 있는,
프로그램 설치 없이 피그마 웹 사이트에 접속해서 사용할 수 있는 디자인 툴입니다.

🏆 Figma의 강점 🏆
✔ 맥OS에서도 윈도에서도 OK!
✔ 무료로 사용 가능
✔ 빠른 작업 속도
✔ 빠른 기능 업데이트
✔ 기획, PPT, 애니메이션 등 다양한 용도로도 활용!

디자인 시스템의 핵심을 배우는 오프라인 Class

디자인 시스템 A to Z 3일 집중 속성

개발자와 디자이너의 커뮤니케이션을 이해하고
디자인 시스템을 구축하고자 하는 분들께
딱 필요한 3일 집중 과정입니다.

언제 어디서나 볼 수 있는 노션자료 제공

인터넷만 연결되어 있으면,
모바일에서도 PC에서도 탭에서도
언제든지 다시 볼 수 있는 생생한 자료를
노션으로 아낌없이 나눠드립니다.

만족도 ⭐⭐⭐⭐⭐ 믿을 수 있는 강사님의 검증된 강의

이러닝에서도 인정받은 만족도 5점만점의
뛰어난 강사님과 함께하는 실습으로
UI 디자인에 자신감을!
+ 협업까지 경험 해 봅니다!

👀 미리 보는 실습 👍

Foundation 구성하기

💻 본 과정의 실습을 위해서 피그마 계정 가입이 필요합니다.
💻 피그마 계정 가입을 위해서 이메일계정(Gmail 등)이 필요합니다.

학습목표

모든 디자인 작업물을 시스템 관점으로 보는 시각을 가질 수 있다.
재사용 가능한 디자인에 대해 이해한다.
개발자를 고려한 디자인이 무엇인지 생각하며 디자인할 수 있다.
아토믹 디자인 시스템을 이해한다.

학습대상

디자인 시스템을 구축하고 싶은 디자이너
피그마 기초 사용법은 알지만 시스템 적용이 망설여지는 디자이너
디자인 시스템을 이해하고 싶은 개발자
디자이너와 개발자의 커뮤니케이션을 읽고 싶은 기획자

교재소개

모든 자료는 노션으로 제공됩니다.
노션 사이트 접속 링크는 강의 첫날 강사님께서 직접 알려드립니다.

과정목차 21

1 일차
- 1. 디자인 시스템이란?
  - 디자인 시스템이란 무엇인가?
  - 디자인 시스템을 쓰는 이유
  - UI 설계가 중요한 이유
- 2. 아토믹 디자인 시스템이란?
  - 아토믹 디자인 시스템이란?
  - 타 회사 디자인 시스템 분석하기
- 3. 실습 환경 설정
  - 피그마 실습환경 구성
  - Component의 이론
2 일차
- 4. 피그마 기능 200% 활용하기
  - Component Variant 이해하기
  - Component Properties 이해하기
- 5.Tokens Studio 사용하기
  - Tokens Studio 사용방법 익히기
  - Tokens Studio 에 시스템 등록하기
  - 피그마 native 시스템과 tokens Studio 비교하기
- 6. 시스템 사용하기
  - 등록된 시스템을 바탕으로 UI 제작해보기
  - 등록된 시스템을 바탕으로 UI 제작해보기
3 일차
- 7. Hand Off
  - Github 계정 생성 및 플러그인 연결
  - 공유 가능한 디자인 토큰 관리하기
- 8. 개발자의 토큰 코드 설계
  - 1차 가공 (JSON 데이터 Transformer)
  - 2차 가공 (style-dictionary)
  - 2차 가공 (style-dictionary)
  - Github Workflow 설정
  - build 하기

수강후기 80

평균평점

4.6 / 5.0

5

김*견
2025.03.14

강사님이 누구나 이해하기 쉽도록 어려운 부분도 쉽게 설명해주셔서 매우 만족합니다
5

오*환
2025.03.14

처음 접하는 과정이지만 충분한 실습으로 따라가기 좋았습니다
5

마*연
2025.03.14

강사님이 엄청 꼼꼼하게 수업을 해주셔서 실무에 많은 도움이 되었음
5

정*하
2025.03.14

도움이 많이 되었습니다.
5

김*희
2024.08.28

피그마가 왜 떠오르는지, 개발 환경의 흐름의 변화도 함께 알려주셔서 좋았습니다. 전반적으로 피그마를 이해하기에 적합한 수업이었습니다!

업무에 바로 쓰는 디자인 시스템 with 피그마 관련과정

집합

교재제공

Figma와 TailwindCSS를 활용한 UI 올인원(디자인&개발)

집합

교재제공

업무에 바로 쓰는 HTML5와 CSS3