01. 피그마(figma)와 제플린(Zeplin)을 이용한 모바일 사이트 만들기

Webstoryboy

Webstoryboy

피그마(figna)를 이용한 모바일 웹 만들기 프로젝트입니다. 피그마를 통해 프로토타입을 만들고 제플린과 함께 모바일 웹을 만드는 영상입니다. 자료 다운 받기 https://github.com/webstoryboy/figma 완성 디자인 미리보기 https://webstoryboy.github.io/figma/music.html 완성 피그마 페이지 https://www.figma.com/file/Schhn778Fc0F4Hpsv5EGdy/Apple-Music-App-Intro 탭바 아이콘 공유 소스 https://www.figma.com/file/WpmlHaVxS6kJTg0fWDausF/Tab-Bar-%EC%95%84%EC%9D%B4%EC%BD%98-%EA%B3%B5%EC%9C%A0?node-id=0%3A1 댓글로 메일 주소 적어주시면 피그마 파일 볼 수 있도록 해드릴께요~

더보기

키워드

같이 보면 좋은 강좌

Figma 프레임

Figma의 프레임(Frame)에 대해 소개하고 사용법을 안내합니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #디자인 #이듬 #블렌디드러닝 #툴테크닉


Figma 프레임

프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법 #팀라이브러리 #scroll #피그마

* 강좌 요약 0:00 Intro 0:32 1/4 스크롤 기능 구현을 위한 화면 배치 {팀 라이브러리 활용, 컴포넌트 활용, 오토 레이아웃 기능 활용, 기타 Tip} 5:23 2/4 가로 스크롤 기능(Horizontal Scrolling) 6:30 3/4 세로 스크롤 기능(Vertical Scrolling) 8:15 4/4 좌우상하 스크롤 기능(Horizontal & Vertical Scrolling) - Youtube 모바일 App을 기준으로 UX/UI Case Study - 프로토타입핑 제작을 위한 기본 가이드 영상입니다. - Figma로 프레젠테이션 하는 방법에 대해 알아보세요. - 실무에 유용한 팁 *연관 영상 1. figma 가입하기 : www.figma.com 2. figma 빠르게 훑어보기: https://youtu.be/urx7KsMV7ao 3. figma 프로토타입핑 Part 1 - 기초 : https://youtu.be/6mbl6hdbivI 4. 피그마 프로토타입핑 Part 2 - 스마트 애니메이션 기능 : [https://youtu.be/gUFYT0s3TnU](https://youtu.be/gUFYT0s3TnU)


프로토타입핑 Part 3/4 - figma에서 스크롤 기능 구현하는 방법  #팀라이브러리 #scroll #피그마

Figma 레이아웃 그리드

Figma의 레이아웃 그리드에 대해 안내하고 사용법을 살펴봅니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #이듬


Figma 레이아웃 그리드

프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법 #Overlays #오버레이 #피그마

* 강좌 요약 - 팝업 이나 Side Menu 프로토타입핑 구현시 유용한 기능 0:00 Intro 0:33 실전 예제 1/4 - Overlays를 활용한 {Side Menu, Dialog} 구현 2:08 실전 예제 2/4 - Overlays를 활용한 {Bottom Sheets} 구현 3:05 실전 예제 3/4 - 원하는 위치에 Overlays를 적용 {Manual} 4:33 실전 예제 4/4 - Overlay를 {Swap With}로 변경 *연관 영상 1. figma 가입하기 : www.figma.com 2. figma 빠르게 훑어보기: https://youtu.be/urx7KsMV7ao 3. figma 프로토타입핑 Part 1 - 기초 : https://youtu.be/6mbl6hdbivI 4. 피그마 프로토타입핑 Part 2 - 스마트 애니메이션 기능 : https://youtu.be/gUFYT0s3TnU 5. 프로토타입핑 Part 3 - figma에서 스크롤 기능 구현하는 방법 : https://youtu.be/t5G87A3t2CM


프로토타입핑 Part 4/4 - figma에서 Overlay 구현하는 방법  #Overlays #오버레이 #피그마

프로토타입핑 Part 1/4 - figma로 프레젠테이션 제작하는 방법 #case-study #youtube-ui #피그마

* 강좌 요약 0:00 - Intro 0:25 - 1/6 프레젠테이션 모드 설정방법 1:44 - 2/6 Interaction & Animation 옵션 설정 2:05 - 3/6 실전 연습 1 - Page Transition 효과 6:17 - 4/6 실전 연습 2 - 뒤로가기 버튼 설정 7:32 - 5/6 Figma 프레젠테이션 공유하고 피드백 받기 8:14 - 6/6 모바일 디바이스로 Figma Mirroring - Youtube 모바일 App을 기준으로 UX/UI Case Study - 프로토타입핑 제작을 위한 기본 가이드 영상입니다. - Figma로 프레젠테이션 하는 방법에 대해 알아보세요. - 실무에 유용한 팁 *연관 영상 1. figma 가입하기 : www.figma.com 2. figma 빠르게 훑어보기: https://youtu.be/urx7KsMV7ao 3. Figma 프로토타입핑 - 스마트 애니메이션(Smart Animate) 기능 : https://youtu.be/gUFYT0s3TnU


프로토타입핑 Part 1/4 -  figma로 프레젠테이션 제작하는 방법 #case-study #youtube-ui #피그마

Figma 계정 / 플랜

Figma 계정 가입 과정 및 제공 플랜에 대해 안내합니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #디자인 #이듬 #블렌디드러닝 #툴테크닉


Figma 계정 / 플랜

Figma 도구란?

Figma 툴 테크닉 동영상 강의 시리즈를 시작합니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #이듬


Figma 도구란?

[번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

* 사용자 입장에서 Figma 툴을 사용하여 UX REDESIGN 한 후 프로토타입핑을 제작해보았습니다. * 해당 서비스 : 왓챠 APP의 REDESIGN [Figma prototyping 기능 활용] https://www.figma.com/ - Horizontal Scrolling, Smart Animation, overlay 등의 기능 [UX Redesign Overview] *감성적인 부분보다 정보 탐색 적인 면으로 접근하여 UX를 REDESIGN 하였다. *왓챠 서비스의 메인컬러(핑크)는 유지 하되, 왓챠플레이(동영상 스트리밍 서비스)서비스를 모르는 유저를 고려하여 추천 왓챠플레이의 썸네일에 왓챠 플레이 로고 대신 영상 플레이 아이콘으로 대체하였다. (영화 상세 페이지를 통해 왓챠플레이 서비스로 이동하여 재생 을 유도하도록 ) - 추천 콘텐츠 노출도 높임 : 기존의 큰 썸네일의 세로 스크롤 방식을 토픽별 가로 스크롤 방식으로 변경 - 왓챠 메인 : 영화, TV, 도서 별 추천 카테고리의 Depth를 줄임 - 추천 페이지 : 더 이상 보고 싶지 않은 콘텐츠를 가로로 드래그하여 숨길 수 있도록 함. - 왓챠와 왓챠플레이의 연결점을 자연스럽게 유도하기 위해 추천 페이지 하단에 고정된 배너를 삽입 - 하단 GNB 영역에 이벤트 메뉴 삽입하여 접근성 높임 - 메인의 영화 카테고리에 박스오피스 랭킹 노출 : 영화 추천 만큼 자주 검색하는 정보가 현재 개봉중인 영화의 랭킹인 만큼 Core Experience 라는 가정하에 사용자가 정보를 찾기 쉽도록 1 Depth에 노출하였다. - 검색 UX 보완 : 검색어의 횡렬식 방식을 탭 방식으로 분류하여 스크롤 없이 기본 정보 노출토록함. [Figma 툴 가이드 ] https://youtu.be/urx7KsMV7ao #figma #prototyping #프로토타입핑_테스트 #overlay #smartAnimaiton #redesign #왓챠 #caseStudy


[번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마

Figma 도구 인터페이스

Figma 도구 인터페이스에 대해 안내합니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #디자인 #이듬 #블렌디드러닝 #툴테크닉


Figma 도구 인터페이스

Figma 캔버스

Figma 캔버스(Canvas)에 대해 안내합니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #디자인 #이듬 #블렌디드러닝 #툴테크닉


Figma 캔버스

프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현 #Prototyping #smart-animate #피그마

- Youtube 모바일 App을 기준으로 UX/UI Case Study - 프로토타입핑 제작을 위한 기본 가이드 영상입니다. - Figma로 프레젠테이션 하는 방법에 대해 알아보세요. - 실무에 유용한 팁 * 강좌 요약 - Figma 프로토타입핑 - 스마트 애니메이션(Smart Animate) 기능 *연관 영상 1. figma 가입하기 : www.figma.com 2. figma 빠르게 훑어보기: https://youtu.be/urx7KsMV7ao 3. figma 프로토타입핑 Part 1 - 기초 : https://youtu.be/6mbl6hdbivI


프로토타입핑 Part 2/4 - figma에서 스마트 애니메이션 기능 구현  #Prototyping #smart-animate #피그마

피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

[컴포넌트 개념정리 - 블로그] https://designer-story.tistory.com/18 [연관 영상- 컴포넌트 기능 활용] https://youtu.be/6e46VxYgcpI [연관 영상- 팀 라이브러리 기능 활용] https://youtu.be/t5G87A3t2CM [목차] 00:00 Intro 00:02 컴포넌트의 개념 03:14 컴포넌트 생성하기 04:06 Assets 패널 05:46 Instance Swap 07:47 컴포넌트 검색 08:37 팀 라이브러리 기능


피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma

피그마 기초 강좌 - Part1 #figma #무료툴

00:00 Intro 00:08 frame & constraints 01:49 이미지 불러오기 (다중 이미지 import 포함) 02:50 Plugin 설치하여 이미지 변경하기 #unsplash 03:57 이미지 오버레이 06:12 텍스트 편집 07:28 오토 레이아웃 (Auto Layout) 09:21 Drop Shadow Effects 11:36 Export 기능 (png, jpg, pdf, fig) - 기본 단축키 확인 법 : https://youtu.be/urx7KsMV7ao?t=288 *연관 링크 1) Auto Layout : https://youtu.be/WC9FhdOltA4 2) Color Styling : https://youtu.be/_SS_e4W6A3A 3) Text Styleing: https://youtu.be/WpgGmzyZdj8 4) figma 회원가입: https://youtu.be/CKt9x66Egyo 5) Part2 : https://youtu.be/4_WS782s96c 8/6 업데이트 - figma 기초 튜토리얼 영상


피그마 기초 강좌 - Part1 #figma #무료툴

figma 회원가입 가이드 #무료편집 #피그마

언제 어디서나 인터넷만 되면 편집 가능한 UI 편집 툴, Figma * 무료로 시작하기 : https://www.figma.com/ [UI 디자이너라면, Figma를 사용해야 하는 이유] https://youtu.be/urx7KsMV7ao [피그마가 스케치, 포토샵 보다 나은 이유] - 포토샵, 스케치 대비 반응형 UI 디자인에 최적화된 UI 편집 툴 - 쉽고 빠르다. 업무 효율성 Good - 무료로 사용 가능 (팀 라이브러리 기능 제외) - 윈도우, Mac 상관 없이 인터넷이 된다면 UI 편집 가능. - 실시간 파일 동기화 및 커뮤니케이션 - 웹 & App 개발 협업툴 - 실시간 멀티플레잉 편집 기능 - Private Project 기능 - figma & 포토샵 & 스케치의 차이점 - 내부 GUI Code View ( = zeplin ) - 프로토타입핑 기능 - 버전 히스토리 기능 - Adaptive Layout 시스템(반응형 UI)


figma 회원가입 가이드  #무료편집 #피그마

피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

연정's Figma 블로그 주소 : https://designer-story.tistory.com/21 [목차] 00:00 Intro 00:50 Section1 - Version History(버전관리) 02:01 Section2 - 컬러 시스템 구축이 필요한 이유 03:20 Section3 - Local Styles을 활용한 컬러 시스템 구축 {Color} 05:13 Section4 - Section 4 컬러 외 가능한 스타일링 1 {Text, Effect} 06:14 Section5 - Section 4 컬러 외 가능한 스타일링 2 {Layout Grid} *연관 링크 1) 피그마 기초 강좌 Part1 - https://youtu.be/GsZk8s5JdWg 2) 피그마 기초 강좌 Part2 - https://youtu.be/4_WS782s96c 3) 피그마 Text Styling - https://youtu.be/WpgGmzyZdj8 4) 피그마 Color Styling - https://youtu.be/wNS_vre-2NI 5) figma 앱 다운로드 - https://www.figma.com/downloads/


피그마 기초 강좌 - Part3 #디자인시스템 #LocalStyle #버전관리 #figma

피그마 기초 강좌 - Part2 #figma #아이콘제작

*영상 목차 00:00 Intro 00:09 1/6 Material Design - System Icon 개요 01:16 2/6 Layout Grid & Keyline 제작 06:18 3/6 도형 툴 {Shapes, Booleans} 08:54 4/6 아이콘 Export & Import {SVG} 10:33 5/6 펜 툴 {Pen, Outline Stroke} 12:14 6/6 기타 유용한 사용 Tip {좌우 상하 반전} [Part2 상세정보 및 유의사항 ] https://designer-story.tistory.com/13 [연관 링크] 1) 피그마 기초 강좌 - Part1 - https://youtu.be/GsZk8s5JdWg 2) figma 앱 다운로드 : https://www.figma.com/downloads/ 8/18 업데이트 - figma 기초 튜토리얼 영상


피그마 기초 강좌 - Part2 #figma #아이콘제작

Figma 파일 브라우저

Figma 도구의 파일 브라우저를 살펴봅니다. 이듬 블렌디드 러닝 ✦ https://euid.dev #Figma #UI #디자인 #이듬 #블렌디드러닝 #툴테크닉


Figma 파일 브라우저

피그마 기초 강좌 - Figma 빠르게 훑어보기

[연관 블로그] https://designer-story.tistory.com/2 *연관 영상 1. 반응형웹을 위한 Layout Grid: https://youtu.be/RqDdSn9yuWI 2. 핵심 기능 1탄 Auto Layout 기능 (오토 레이아웃): https://youtu.be/WC9FhdOltA4 3. 핵심 기능 2탄 컴포넌트 기능: https://youtu.be/6e46VxYgcpI 4. 핵심 기능 3탄 Part 2 - 협업을 위한 Color Styling & 팀라이브러리 기능 in Figma: https://youtu.be/wNS_vre-2NI * 무료로 Figma 시작하기 : https://www.figma.com/ [피그마가 스케치, 포토샵 보다 나은 이유] - 포토샵, 스케치 대비 반응형 UI 디자인에 최적화된 UI 편집 툴 - 쉽고 빠르다. 업무 효율성 Good - 무료로 사용 가능 (팀 라이브러리 기능 제외) - 윈도우, Mac 상관 없이 인터넷이 된다면 UI 편집 가능. - 실시간 파일 동기화 및 커뮤니케이션 - 웹 & App 개발 협업툴 - 실시간 멀티플레잉 편집 기능 - Private Project 기능 - figma & 포토샵 & 스케치의 차이점 - 내부 GUI Code View ( = zeplin ) - 프로토타입핑 기능 - 버전 히스토리 기능 - Adaptive Layout 시스템(반응형 UI)


피그마 기초 강좌 - Figma 빠르게 훑어보기

이 강좌가 포함된 라이브러리

+ 더보기
thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128

thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128

thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128