웹 디자인 x 웹 퍼블리싱 모두를 소화하는 실무형 인재가 되고 싶다면, 이 책과 함께 커리어 UP 하라! 본 도서는 웹 디자인뿐만 아니라 웹 퍼블리싱 구현까지 한 번에 학습할 수 있는 유일한 책이다. 책 전반에 걸쳐 ‘디자인’부터 ‘코딩’까지 총망라하며, 모바일 쇼핑몰 및 반응형 포트폴리오 웹 페이지를 제작한다. [디자인 파트]에서는 레이어 · 스타일 · 팀 라이브러리 · 인터랙션 등 웹 디자인에 필요한 피그마의 주요 기능을 소개한다. 특히, 어떻게 하면 효율적이고 일관성 있게 코딩할 수 있을지 고민하며 디자인하기 때문에 추후 개발에 용이하게 작업하는 방법을 익힐 수 있다. [퍼블리싱 파트]에서는 완성한 디자인을 HTML · CSS · jQuery 등의 언어로 구현하며, 데스크톱 · 태블릿 · 모바일 등 다양한 플랫폼에 맞춰 구현한다. 이 과정에서 최신 웹 트렌드 코딩 기법과 피그마를 스마트하게 활용하는 저자의 노하우를 체득할 수 있다. 피그마의 숨은 기능까지 빠짐없이 철저하게 짚어주는 이 책을 통해 피그마를 완벽하게 활용하는 방법을 터득해 보자. 웹 디자이너와 웹 퍼블리셔의 경계를 허무는, 디자인 능력뿐만 아니라 개발 지식까지 갖춘 ‘실무형 인재’로 거듭날 수 있을 것이다. [이 책의 특징] - 웹 디자인과 웹 퍼블리싱을 동시에 학습할 수 있다. - 디자인 단계에서부터 최종 코딩을 염두에 두어 효율적이고 일관성 있게 작업한다. - 최신 웹 트렌드를 반영한 반응형 모바일 쇼핑몰과 포트폴리오 사이트를 구현한다. - 유용한 플러그인, 작업 시 유용한 실무 Tip 등 피그마를 스마트하게 활용하는 노하우가 담겨있다. [소스코드 다운로드] https://github.com/bjpublic/Figma_WEB

[PART 1] Figma 100% 활용하기 ？ 웹 디자인 A. Figma 시작하기 i. Figma 설치 및 실행 ii. Figma UI iii. Frame · Shape · Text iv. Page v. Pen 툴: 사각형 만들기 vi. Vector 편집: 면 추가하기 vii. Fill · Stroke viii. SVG 추출 및 코드 복사 ix. Component x. Grid B. 디자이너의 Figma 사용하기 i. Figma 디자인 ____로그인 헤더 만들기 ____로그인 폼 디자인하기 ____Forgot Password 추가하기 ____Footer 설정하기 ____제약 조건 설정하기 ii. 프로토타이핑 ____대시보드 페이지 디자인 ____회원가입 페이지 디자인 ____비밀번호 찾기 페이지 디자인 ____프로토타이핑 설정하기 iii. 페이지 연결하기 [PART 2] Figma 실전 - 프로젝트 디자인 A. Figma 고급 활용 i. 레이어 제약 조건 ii. 버전 관리 iii. 스타일 ____Color 스타일 ____Text 스타일 ____Drop Shadow 스타일 ____Grid 스타일 iv. 팀 라이브러리 v. 프로토타이핑 ____디바이스 프레임 ____외부 웹사이트 URL ____이전 프레임으로의 Hotspots ____고정 오브젝트 ____스크롤 영역 ____인터랙션 · 트랜지션 vi. Figma에서 Illustrator 파일 사용하기 vii. 협업 ____Figma로 협업하기 ____팀 생성과 관리 ____팀 멤버 권한 관리 ____컴포넌트 스타일 공유하기 ____공유 ____코멘트 ____버전 관리 ____기타 툴로 통합 B. [실전 프로젝트] 모바일 쇼핑몰과 반응형 랜딩페이지 완성하기 i. 최신 웹 디자인 트렌드 ____UI/UX ____Micro-Interaction ____Minimalism ____Typography ii. 모바일 쇼핑몰 디자인 ____메인 화면 ____로그인 ____회원가입 ____상품 목록 ____카테고리 목록 ____상품 상세페이지 ____장바구니 ____주문 페이지 ____네비게이션 메뉴 iii. 반응형 포트폴리오 페이지 디자인 ____PC 화면 ____태블릿 화면 ____모바일 화면 [PART 3] Figma 업그레이드 - 스마트한 활용법 A. Figma 플러그인 i. Unsplash ii. Content Reel iii. Image Palette iv. Super Tidy v. Able B. Figma 유용한 팁 i. 레이어 패널 팁 ____모든 오브젝트 잠금 풀기 및 숨김 해제 ____레이어 이름 빠르게 변경하기 ____다중 레이어를 한꺼번에 열고 닫기 ____레이어의 표시를 빠르게 전환하기 ii. 오브젝트 선택 팁 ____같은 속성의 오브젝트 빠르게 선택 편집하기 ____상/하위 요소 선택하기 iii. 레이어 쌓기 팁 ____레이어 순서 변경하기 ____레이어 빠르게 선택하기 iv. 캔버스 팁 ____디자인 화면에서 레이어 선택하기 ____좀 더 정확하게 확대 축소하기 ____오브젝트 중심으로 바로 확대하기 v. 프레임 팁 ____내용을 포함하여 새 프레임 생성하기 ____내용에 맞춰 프레임 크기 조절하기 ____프레임 크기 확대 축소하기 vi. 프로젝트 · 페이지 · 아트보드 팁 ____프로젝트 썸네일 만들기 ____페이지 전환 ____아트보드 간 이동하기 ____프레임 가독성 올리기 vii. 속성 팁 ____오브젝트의 속성 복사하기 ____텍스트 속성 변경하기 ____속성값의 수치 변경하기 ____방향키로 색상 조절하기 viii. 이미지 팁 ____이미지 채우기 세팅 ____폴더의 이미지를 통째로 Place Image하기 ____다중 이미지 로드하기 ix. 벡터 그래픽 팁 ____복잡한 벡터 그래픽 구현하기 ____오브젝트에서 바로 svg 태그 생성하기 ____svg 태그 복사하기 x. 컴포넌트 팁 ____컴포넌트 플립하기 ____반복 패턴 만들기 xi. 레이아웃 팁 ____등척성(Isometric) 쉽게 비틀기(Skew) ____아이템 간의 간격 제거하기 ____좀 더 정확하게 정렬하기 xii. 핸드오프 테스트 팁 ____인스펙트 탭을 통한 출력 ____붙여넣기할 코드 생성하기 ____모바일 기기에서 Figma 미러 앱으로 테스트하기 ____브라우저에서 Figma 미러 앱으로 테스트하기 xiii. 기타 팁 ____아웃라인 모드 전환 ____단축키표 접속하기 ____넛지 양 조절하기 C. Figma 단축키 [PART 4] Figma 200% 활용하기 ？ 웹 퍼블리싱 A. Figma 활용 웹 퍼블리싱 B. [Figma to HTML 실전] 모바일 쇼핑몰 완성하기 i. 모바일 쇼핑몰 디자인 HTML ii. 모바일 쇼핑몰 디자인 CSS iii. 모바일 쇼핑몰 SCRIPT C. [Figma to HTML 실전] 반응형 포트폴리오 페이지 디자인하기 i. 포트폴리오 페이지HTML ii. 포트폴리오 페이지CSS ？ PC 화면 iii. 포트폴리오 페이지 CSS - 태블릿 · 모바일 화면 [PART 5] 부록 ？ Figma와 Adobe XD의 비교 A. Figma와 Adobe XD 비교 i. 지원 플랫폼 ii. 협업 · 공유 · 미리보기 iii. 디자인 iv. 디자인 시스템 v. 프로토타이핑 vi. 핸드오프 vii. 기타 사항 viii. 가격 ix. 최종 비교