ONLINE CLASS

Figma UI UX 디자인

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆

기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기

Figma UI UX 디자인

Figma UI UX 디자인

Figma UI UX 디자인

강의구성
(33강) 전체 : 4시간 48분|평균 : 8분43초

이용기간/강사
2개월
알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
330,000원165,000원

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

01.4분 Figma UI/UX 디자인 시작하기
사용자 경험 설계부터 웹·앱 디자인까지 전체 제작 과정 이해하기

UI 디자인과 UX 디자인의 차이, Figma 주요 기능과 활용 분야, 웹·앱 디자인 제작 과정, UI/UX 디자이너의 실무 역할, 디자인 기획부터 개발 전달까지 작업 흐름, 최종 실습 프로젝트 미리보기
02.9분 Figma 설치와 작업 환경 구성
계정 생성부터 디자인 작업 화면과 기본 기능 익히기

Figma 회원가입과 플랜 선택, 웹 버전과 데스크톱 앱 활용, 디자인 파일 생성과 관리, 캔버스·레이어·속성 패널 이해, 기본 도구와 단축키 사용, 파일 저장·공유와 작업 환경 설정
03.10분 프레임과 레이어를 활용한 화면 구성
모바일·웹 화면을 만들기 위한 디자인 구조와 객체 관리

Frame과 Group의 차이, 모바일·태블릿·데스크톱 프레임 제작, 레이어 생성과 순서 변경, 레이어 정렬·잠금·숨김 처리, Section과 레이아웃 그리드 활용, 실제 모바일 화면 구조 만들기
04.9분 도형과 벡터를 활용한 UI 요소 제작
기본 도형부터 아이콘·버튼·이미지 편집까지 디자인 도구 활용하기

사각형·원·선으로 UI 요소 제작, Pen 도구와 벡터 편집, Boolean 연산으로 아이콘 만들기, 이미지 삽입과 마스크 처리, 그림자·테두리·효과 적용, 버튼과 콘텐츠 카드 디자인 완성
05.10분 타이포그래피와 컬러 디자인
폰트·색상·이미지 조합으로 완성도 높은 UI 디자인 만들기

글꼴·크기·행간·자간 설정, 제목·본문·버튼의 텍스트 위계, 브랜드 컬러와 색상 팔레트, 그라디언트·투명도·색상 스타일, 이미지와 타이포그래피 조합, 모바일 콘텐츠 카드 디자인 완성
06.10분 사용하기 편리한 UI 디자인 원칙
시각적 위계와 일관성·가독성을 적용한 사용자 중심 화면 설계

시각적 위계와 정보 우선순위, 정렬·간격·대비를 활용한 화면 구성, 버튼·입력창·메뉴의 UI 패턴, 가독성과 클릭 영역 설계, 접근성을 고려한 색상과 텍스트, 잘못된 UI 화면 개선 실습
07.10분 UX 리서치와 사용자 요구 분석
사용자 문제를 발견하고 디자인 목표를 설정하는 실무 기획 과정

서비스 목적과 사용자 문제 정의, 경쟁 서비스 조사와 비교 분석, 사용자 인터뷰 질문 설계, 페르소나와 사용자 요구사항 정리, 사용자 행동과 불편 요소 분석, 디자인 목표와 핵심 기능 도출
08.9분 FigJam으로 사용자 흐름 설계하기
아이디어 정리부터 정보 구조와 사용자 이동 경로까지 시각화하기

FigJam 보드와 협업 도구 활용, 아이디어 정리와 브레인스토밍, 사이트맵과 정보 구조 설계, User Flow 작성과 화면 이동 경로, 로그인·검색·예약 흐름 설계, 사용자 흐름 기반 화면 목록 완성
09.9분 와이어프레임과 화면 설계 실습
기획한 서비스를 실제 디자인하기 위한 저충실도 화면 구성

Low Fidelity와 High Fidelity 이해, 모바일 앱 화면별 정보 배치, 로그인·홈·상세 화면 와이어프레임, 콘텐츠 우선순위와 사용자 동선, 화면 연결 구조와 사용성 검토, 와이어프레임을 실제 디자인으로 전환
10.7분 Auto Layout 기본 구조 완성하기
요소의 크기와 간격이 자동 조절되는 유연한 UI 디자인 기초

Auto Layout의 원리와 적용, 가로·세로 방향과 정렬 설정, Padding과 Gap으로 간격 조절, Hug Contents와 Fill Container, Fixed 크기와 자동 크기 조절, 반응하는 버튼과 카드 제작
11.7분 Auto Layout을 활용한 반응형 UI
중첩 레이아웃과 크기 조절 규칙으로 다양한 화면에 대응하기

중첩 Auto Layout 구조 만들기, Wrap을 활용한 카드 목록 배치, Constraints와 크기 조절 규칙, 텍스트와 콘텐츠 변화 대응, 모바일·태블릿 레이아웃 변형, 반응형 콘텐츠 화면 완성
12.8분 컴포넌트와 인스턴스 제작
반복 사용하는 디자인 요소를 효율적으로 제작하고 관리하기

Component와 Instance의 개념, 버튼·아이콘·입력창 컴포넌트 제작, 메인 컴포넌트 수정과 자동 반영, 인스턴스 속성 변경과 재사용, 공통 디자인 요소 정리, 컴포넌트 기반 모바일 화면 제작
13.8분 Variants와 컴포넌트 속성 활용
버튼 상태와 인터랙션을 하나의 재사용 가능한 UI 구조로 설계하기

Variants를 활용한 상태별 버튼, 기본·선택·비활성 상태 디자인, Boolean과 Text 속성 설정, Instance Swap으로 아이콘 변경, 인터랙티브 컴포넌트 제작, 탭·토글·체크박스 동작 구현
14.9분 Variables와 디자인 토큰 설계
색상·간격·모드를 변수로 관리하는 확장 가능한 UI 구조 만들기

Variables와 디자인 토큰 이해, 색상·숫자·문자 변수 생성, 변수 컬렉션과 이름 규칙, Light Mode와 Dark Mode 구현, 변수 연결과 일괄 디자인 변경, 모바일 앱 테마 전환 실습
15.9분 실무형 디자인 시스템 구축
컴포넌트·스타일·변수를 결합한 일관된 디자인 라이브러리 완성

디자인 시스템과 스타일 가이드, 컬러·타이포그래피·간격 규칙, 버튼·입력창·카드 컴포넌트 통합, 공통 UI 요소와 상태별 규격화, 디자인 라이브러리와 사용 규칙, 실무형 디자인 시스템 완성
16.9분 모바일 앱 온보딩과 로그인 화면 제작
사용자의 첫 경험을 설계하는 시작 화면과 회원가입 UI 실습

모바일 앱 프로젝트와 화면 규격, 스플래시 화면 디자인, 온보딩 페이지와 안내 화면, 로그인 화면과 입력 폼 구성, 회원가입·비밀번호 찾기 화면, 컴포넌트 기반 인증 화면 완성
17.9분 모바일 앱 홈 화면과 내비게이션
실제 서비스처럼 작동하는 메인 화면과 메뉴 구조 디자인

홈 화면 정보 구조와 콘텐츠 배치, 검색창과 메인 배너 디자인, 추천 콘텐츠와 카드 목록 제작, 카테고리와 메뉴 아이콘 구성, 하단 탭 바와 내비게이션, Auto Layout 기반 홈 화면 완성
18.9분 검색·필터·상세 화면 디자인
사용자가 원하는 정보를 찾고 선택하도록 만드는 서비스 UI 실습

검색창과 검색 결과 화면 제작, 카테고리·가격·조건별 필터, 정렬 메뉴와 선택 상태 디자인, 상품·서비스 상세 정보 구성, 즐겨찾기와 선택 컴포넌트, 검색부터 상세 화면까지 UI 완성
19.9분 예약·결제 모바일 앱 UI 제작
서비스 선택부터 신청 완료까지 이어지는 사용자 구매 경험 설계

상품·서비스 선택과 예약 화면, 날짜·수량·옵션 선택 UI, 장바구니와 주문 정보 요약, 결제 수단과 결제 확인 화면, 신청 완료와 예약 내역 디자인, 예약·결제 사용자 흐름 완성
20.10분 입력 폼과 예외 상황 UI 디자인
사용 중 발생하는 오류·빈 화면·로딩 상태까지 완성하는 실무 디자인

입력 폼과 필수 항목 안내, 입력 오류와 유효성 검사 메시지, 로딩·Empty State·Error State, 알림·확인창·취소·재시도 UI, 상태별 컴포넌트와 화면 통일, 모바일 앱 전체 화면 최종 정리
21.10분 반응형 웹 랜딩페이지 디자인
실제 교육·서비스 홈페이지를 사례로 완성하는 데스크톱 웹 UI

웹사이트 목적과 콘텐츠 기획, 헤더·메뉴·Hero 영역 제작, 서비스 소개와 콘텐츠 카드 구성, 수강 신청·문의 버튼 디자인, 후기·FAQ·푸터 섹션 제작, 데스크톱 랜딩페이지 완성
22.10분 데스크톱·태블릿·모바일 반응형 제작
하나의 웹디자인을 다양한 화면 크기에 최적화하는 실무 기법

반응형 웹과 Breakpoint 이해, 데스크톱 레이아웃 크기 조절, 태블릿 화면과 콘텐츠 재배치, 모바일 내비게이션과 메뉴 변형, Auto Layout 기반 반응형 구성, 세 가지 화면 크기 최종 검수
23.9분 관리자 대시보드 UI 디자인
데이터와 업무 기능을 효율적으로 보여주는 실무형 웹 애플리케이션 제작

관리자 화면의 정보 구조 설계, 사이드바와 상단 메뉴 제작, 통계 차트와 요약 카드 디자인, 데이터 테이블과 목록 화면, 검색·필터·페이지 이동 UI, 관리자 대시보드 화면 완성
24.9분 Figma 프로토타이핑 기본 실습
정적인 디자인을 실제 앱처럼 클릭하고 이동할 수 있도록 연결하기

Prototype 모드와 연결 구조, 버튼 클릭과 화면 이동 설정, Navigate·Back·Overlay 동작, 스크롤 화면과 고정 메뉴, 모바일 미리보기와 화면 테스트, 앱 전체 화면 이동 프로토타입 완성
25.8분 고급 프로토타입과 인터랙션 구현
Smart Animate와 변수·조건을 활용한 실제 서비스형 동작 설계

Smart Animate 화면 전환 효과, Hover·Pressed·Drag 인터랙션, 모달·드롭다운·탭 전환 구현, 변수와 조건을 활용한 상태 변경, 로그인·예약·결제 화면 연결, 실제 서비스형 인터랙티브 프로토타입 완성
26.8분 UX 사용성 테스트와 접근성 개선
실제 사용자 관점에서 문제를 발견하고 디자인 품질을 높이는 방법

사용성 테스트 목표와 평가 항목, 프로토타입 기반 사용자 테스트, 클릭 흐름과 문제점 분석, 색상 대비·가독성·터치 영역 검토, 사용성 문제의 우선순위 분류, 테스트 결과 반영과 UI 개선
27.9분 Figma 협업과 개발자 핸드오프
디자이너·기획자·개발자가 함께 작업하는 실무 전달 과정

팀 프로젝트와 파일 공유 설정, 댓글과 피드백을 활용한 협업, Dev Mode에서 디자인 속성 확인, 치수·간격·색상·컴포넌트 명세, 이미지·아이콘·에셋 Export, 개발 전달용 디자인 파일 정리
28.9분 Figma AI와 디자인 에이전트 활용
AI를 이용해 화면 아이디어를 확장하고 반복적인 디자인 작업 개선하기

Figma AI 기능과 디자인 에이전트 이해, 프롬프트를 활용한 UI 아이디어 생성, AI 기반 화면 구성과 레이아웃, 텍스트·컴포넌트·디자인 개선, 기존 디자인 시스템과 AI 결과 연결, AI 생성 화면의 품질 검토
29.9분 Figma Make로 AI 프로토타입 제작
프롬프트와 기존 디자인을 활용해 실제 동작하는 화면을 빠르게 구현하기

Figma Make 작업 환경 이해, 자연어 프롬프트로 앱 화면 생성, 기존 디자인 기반 인터랙션 구현, AI 결과 수정과 시각적 편집, 검색·예약 기능의 프로토타입 제작, AI 프로토타입 테스트와 개선
30.9분 Figma Sites로 웹사이트 제작과 배포
반응형 랜딩페이지를 웹사이트 형태로 구성하고 실제 게시 과정 익히기

Figma Sites의 주요 기능 이해, 웹사이트 페이지와 섹션 구성, 반응형 레이아웃과 화면 조절, 메뉴·버튼·내비게이션 설정, 웹사이트 미리보기와 게시 과정, 게시된 사이트 수정과 공유
31.8분 Figma Motion으로 UI 애니메이션 제작
타임라인과 키프레임을 활용해 디자인에 자연스러운 움직임 추가하기

Figma Motion 모드와 작업 환경, 타임라인과 키프레임 설정, 위치·크기·투명도 애니메이션, 타이밍과 Easing 효과 조절, 버튼·카드·배너 모션 제작, 애니메이션 내보내기와 활용
32.8분 Figma UI/UX 최종 프로젝트와 포트폴리오
모바일 앱·반응형 웹·프로토타입을 통합해 실무형 디자인 결과물 완성하기

최종 프로젝트와 사용자 시나리오 정리, 모바일 앱과 디자인 시스템 검수, 반응형 웹·대시보드 결과물 정리, 프로토타입과 사용자 흐름 검증, UI/UX 포트폴리오 구성과 발표, Figma 원본 파일·완성 이미지·공유 링크 정리
33.8분 추가 실전 프로젝트
배운 것들을 확인해서 실전 프로젝트 만들기

화면 목록 여섯개와 예외 상태 정의, 실습용 스터디룸 데이터 네건 입력, 모바일 프레임과 레이어 만들기, 브랜드 색상과 토큰 다섯 개 지정, 텍스트 위계와 가독성 개선하기, 필수 입력 누란시 오류 메시지 설계

강의목록 다운로드 1:1 강의 질문&답변

💬

알지오 학습·수강 도우미

운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.

상담 상태 확인 중