콘텐츠로 바로가기
- 1.Figma란 무엇인가 Figma의 기본 개념과 특징, Figma의 주요 기능과 장점
- 10.Figma의 프레임과 레이아웃 그리드 사용하기, 프레임(Frame)과 아트보드(Artboard) 구성 방법
- 11.Figma의 프레임과 레이아웃 그리드 사용하기, 반응형 디자인을 위한 레이아웃 그리드 활용법
- 12.Figma의 프레임과 레이아웃 그리드 사용하기, 다양한 기기 사이즈에 맞춘 레이아웃 구성 팁
- 13.Figma에서 컴포넌트와 스타일 관리하기, 컴포넌트 생성과 인스턴스 활용
- 14.Figma에서 컴포넌트와 스타일 관리하기, 스타일을 통한 일관된 디자인 시스템 구축
- 15.Figma에서 컴포넌트와 스타일 관리하기, 다크 모드 및 라이트 모드와 같은 스타일 변경 방법
- 16.효율적인 UI 디자인을 위한 Figma 플러그인 추천, 디자인 작업을 돕는 인기 플러그인 (Iconify, Unsplash, Content Reel 등)
- 17.효율적인 UI 디자인을 위한 Figma 플러그인 추천, 플러그인을 활용한 아이콘, 이미지, 텍스트 추가
- 18.효율적인 UI 디자인을 위한 Figma 플러그인 추천, 작업 시간을 줄여주는 플러그인 활용 팁
- 19.Figma에서 프로토타입 제작하기, Figma의 프로토타입 기능과 인터랙션 설정
- 2.Figma란 무엇인가 Figma의 기본 개념과 특징, Figma와 다른 디자인 툴과의 차이점
- 20.Figma에서 프로토타입 제작하기, 페이지 전환, 애니메이션, 오버레이 효과 만들기
- 21.Figma에서 프로토타입 제작하기, 프로토타입 테스트 및 공유 방법
- 22.Figma를 활용한 반응형 웹 디자인, 반응형 웹 페이지 레이아웃 설정
- 23.Figma를 활용한 반응형 웹 디자인, 기기별 레이아웃 변경과 유동적 사이즈 설정
- 24.Figma를 활용한 반응형 웹 디자인, 반응형 디자인 요소를 구성하는 방법
- 25.Figma에서 UI 키트 활용하기, Figma에서 제공하는 무료 UI 키트 소개
- 26.Figma에서 UI 키트 활용하기, UI 키트를 통해 효율적으로 디자인 작업 시작하기
- 27.Figma에서 UI 키트 활용하기, UI 키트를 수정하고 커스터마이징하는 방법
- 28.Figma의 Auto Layout 기능으로 레이아웃 자동화하기, Auto Layout의 기본 개념과 사용법
- 29.Figma의 Auto Layout 기능으로 레이아웃 자동화하기, 버튼, 카드, 그리드 등의 요소에 Auto Layout 적용하기
- 3.Figma란 무엇인가 Figma의 기본 개념과 특징, Figma의 인터페이스와 사용 방법 소개
- 30.Figma의 Auto Layout 기능으로 레이아웃 자동화하기, Auto Layout을 통한 일관된 디자인 유지하기
- 31.디자인 시스템 구축을 위한 Figma 활용법, 컴포넌트와 스타일로 디자인 시스템 구성하기
- 32.디자인 시스템 구축을 위한 Figma 활용법, 팀과 공유 가능한 디자인 라이브러리 구축
- 33.디자인 시스템 구축을 위한 Figma 활용법, 디자인 시스템을 유지하고 업데이트하는 방법
- 34.Figma의 벡터 디자인과 일러스트 기능, Figma의 펜 도구와 벡터 편집 기능
- 35.Figma의 벡터 디자인과 일러스트 기능, 아이콘 및 일러스트 그리기 기초
- 36.Figma의 벡터 디자인과 일러스트 기능, 벡터 요소를 활용한 커스텀 그래픽 제작
- 37.Figma에서 애니메이션과 마이크로 인터랙션 만들기, Figma의 Smart Animate를 이용한 애니메이션
- 38.Figma에서 애니메이션과 마이크로 인터랙션 만들기, 마이크로 인터랙션과 인터페이스의 생동감 추가
- 39.Figma에서 애니메이션과 마이크로 인터랙션 만들기, 프로토타입에 애니메이션을 추가하는 방법
- 4.Figma에서 프로젝트 시작하기, Figma 프로젝트 생성과 기본 설정
- 40.디자이너와 개발자를 위한 Figma 핸드오프 기능, 개발자를 위한 디자인 사양 및 코드 보기
- 41.디자이너와 개발자를 위한 Figma 핸드오프 기능, CSS, iOS, Android 코드 자동 생성과 공유 방법
- 42.디자이너와 개발자를 위한 Figma 핸드오프 기능, Figma와 Zeplin 등 핸드오프 툴 연동하기
- 43.Figma를 활용한 사용자 경험(UX) 연구 및 테스트, 프로토타입을 사용한 사용성 테스트
- 44.Figma를 활용한 사용자 경험(UX) 연구 및 테스트, 피드백을 반영한 UX 개선 작업
- 45.Figma를 활용한 사용자 경험(UX) 연구 및 테스트, UX 연구 자료와 디자인 간의 연계 방법
- 46.Figma에서 다크 모드 디자인을 효과적으로 구현하기, 다크 모드와 라이트 모드의 스타일 관리
- 47.Figma에서 다크 모드 디자인을 효과적으로 구현하기, 색상과 스타일을 통한 다크 모드 전환 방법
- 48.Figma에서 다크 모드 디자인을 효과적으로 구현하기, 다크 모드에서의 텍스트, 아이콘 등 요소 최적화
- 49.Figma의 커뮤니티와 리소스 활용하기, Figma 커뮤니티에서 템플릿, UI 키트 찾기
- 5.Figma에서 프로젝트 시작하기, 파일 및 폴더 구조 관리 방법
- 50.Figma의 커뮤니티와 리소스 활용하기, 커뮤니티 리소스를 사용해 디자인 프로젝트 확장
- 51.Figma의 커뮤니티와 리소스 활용하기, 커뮤니티를 통한 트렌드와 디자인 영감 얻기
- 6.Figma에서 프로젝트 시작하기, 프로젝트 초기 설정 시 알아두면 좋은 팁
- 7.Figma에서의 협업 기능 활용법, 실시간 협업과 피드백 기능
- 8.Figma에서의 협업 기능 활용법, Figma의 버전 관리와 히스토리 기능
- 9.Figma에서의 협업 기능 활용법, 팀 작업 시 효과적인 피드백과 수정 방법
- II-1.Figma Dev Mode란 기본 개념과 특징, Figma Dev Mode의 개념과 주요 기능
- II-10.코드 보기 및 추출 기능 활용하기, Dev Mode에서 자동 생성되는 CSS 코드 사용법
- II-11.코드 보기 및 추출 기능 활용하기, iOS와 Android 코드 추출 및 적용 방법
- II-12.코드 보기 및 추출 기능 활용하기, 코드 보기 기능을 통해 개발과 디자인의 간격 줄이기
- II-13.컴포넌트와 변수 사용법, Dev Mode에서 컴포넌트의 재사용성 극대화하기
- II-14.컴포넌트와 변수 사용법, 컴포넌트 상태 및 다양한 변수 설정 확인하기
- II-15.컴포넌트와 변수 사용법, 디자이너와 개발자 간 컴포넌트 이해도를 높이는 방법
- II-16.Dev Mode에서 다양한 기기별 대응 작업, 모바일, 태블릿, 데스크톱 화면을 위한 다양한 사양 확인
- II-17.Dev Mode에서 다양한 기기별 대응 작업, 반응형 디자인을 위한 뷰포트 설정과 테스트
- II-18.Dev Mode에서 다양한 기기별 대응 작업, 다양한 해상도와 화면 크기별 디자인 사양 전달
- II-19.Figma Dev Mode를 활용한 빠른 핸드오프, Dev Mode에서 개발자에게 필요한 리소스를 빠르게 제공하는 법
- II-2.Figma Dev Mode란 기본 개념과 특징, Dev Mode가 개발자와 디자이너 간 협업에 미치는 영향
- II-20.Figma Dev Mode를 활용한 빠른 핸드오프, 팀원 간 실시간 코멘트와 피드백 주고받기
- II-21.Figma Dev Mode를 활용한 빠른 핸드오프, 핸드오프 시 개발자가 필요로 하는 정보 제공 팁
- II-22.디자인 시스템 구축을 위한 Figma 활용법, 디자인 시스템의 컴포넌트와 스타일을 Dev Mode에서 활용
- II-23.디자인 시스템 구축을 위한 Figma 활용법, 디자인 시스템 라이브러리와 Dev Mode 간 연결
- II-24.디자인 시스템 구축을 위한 Figma 활용법, 통일된 디자인 시스템을 사용한 협업 팁
- II-25.디자인과 코드 간 차이점 확인하기, Dev Mode에서 디자인과 코드 간 시각적 차이 분석
- II-26.디자인과 코드 간 차이점 확인하기, 개발 과정에서 생기는 디자인 불일치 해결 방법
- II-27.디자인과 코드 간 차이점 확인하기, 디자인과 코드의 차이를 줄이기 위한 최적화 팁
- II-28.플러그인 및 Dev Mode 연동하기, Dev Mode에서 자주 사용하는 플러그인 소개
- II-29.플러그인 및 Dev Mode 연동하기, Zeplin, Storybook 등 핸드오프 툴과 Dev Mode 연동법
- II-3.Figma Dev Mode란 기본 개념과 특징, Dev Mode와 기존 Figma 모드와의 차이점
- II-30.플러그인 및 Dev Mode 연동하기, 플러그인으로 Dev Mode 기능 확장 및 작업 효율화
- II-31.디자인 토큰 활용과 코드 관리, Dev Mode에서 디자인 토큰을 사용해 일관된 스타일 유지
- II-32.디자인 토큰 활용과 코드 관리, 디자인 토큰을 CSS 변수, iOS Android 코드로 변환
- II-33.디자인 토큰 활용과 코드 관리, 코드와 디자인 간의 일관성을 유지하는 디자인 토큰 관리법
- II-34.Figma Dev Mode와 팀 협업의 장점, Dev Mode가 팀 작업에 미치는 긍정적인 영향
- II-35.Figma Dev Mode와 팀 협업의 장점, 디자이너와 개발자가 Dev Mode에서 원활히 협력하는 방법
- II-36.Figma Dev Mode와 팀 협업의 장점, Dev Mode 도입을 위한 팀 교육 및 작업 흐름 개선
- II-37.개발자를 위한 Dev Mode 활용 팁, 개발자가 Dev Mode에서 필요한 정보만 효율적으로 확인하는 법
- II-38.개발자를 위한 Dev Mode 활용 팁, 각 언어 및 플랫폼에 맞는 코드 사용법
- II-39.개발자를 위한 Dev Mode 활용 팁, Dev Mode에서 개발자와 디자이너 간 소통 방법
- II-4.Figma Dev Mode 시작하기, Dev Mode를 활성화하고 설정하는 방법
- II-5.Figma Dev Mode 시작하기, Dev Mode 인터페이스와 기본 사용법
- II-6.Figma Dev Mode 시작하기, Dev Mode의 유료 및 무료 기능 차이
- II-7.Dev Mode에서 디자인 사양 확인하기, 컴포넌트의 스타일 속성 및 치수 확인 방법
- II-8.Dev Mode에서 디자인 사양 확인하기, 색상, 폰트, 여백 등 디자인 사양을 쉽게 확인하기
- II-9.Dev Mode에서 디자인 사양 확인하기, Dev Mode의 상세한 스타일 사양과 정보 활용법