필터
팔로우
-
figma 강좌 - 반응형 웹을 위한 Layout Grid 기능 #레이아웃 #그리드 #피그마
금일 영상은 반응형 웹을 제작하기 위해서 필요한
Figma의 Layout Grid 기능에 대한 영상입니다.
Google의 디자인 시스템인,
Material Design 가이드 기준으로 제작한
Figma 사용가이드
*연관 단축키
control + G: Layout Grid hide & show
* 연관 링크
Figma 시작하기 : https://www.figma.com/
Figma & Sketch 비교 : https://youtu.be/urx7KsMV7ao
Figma 회원가입 방법 : https://youtu.be/CKt9x66Egyo
국가별 웹 브라우저 해상도 지표 확인 사이트 : https://gs.statcounter.com/
*Layout Grid 참고 링크
1. 머터리얼 디자인 - 그리드 시스템: https://material.io/design/layout/responsive-layout-grid.html
2. Bootstrap - 그리드 시스탬: https://getbootstrap.com/docs/4.0/layout/grid/
* [참고 링크] Bootstrap 프레임웍 그리드 기반 Figma 샘플: https://www.figmafreebies.com/download/bootstrap-grid-templates-for-figma/
figma 강좌 1 - 작업시간을 줄여주는 Auto Layout 기능 #오토레이아웃 #피그마
금일 영상은 Figma의 Auto Layout 기능에 대한 영상입니다.
이름에서 느껴지듯이, 이 기능을 활용하면 효율적인 UI 레이아웃 제작이 가능합니다.
Google의 디자인 시스템인,
Material Design 가이드 기준으로 제작한
피그마 사용가이드
*연관 단축키 Auto Layout: Shift + A
*연관 링크
Figma 시작하기: https://www.figma.com/
Figma & Sketch 비교: https://youtu.be/urx7KsMV7ao
Figma 회원가입 방법: https://youtu.be/CKt9x66Egyo
![[번외편] figma에서 프로토타입핑 어디까지 될까? (왓챠 APP #case-study) # prototyping #피그마](https://i.ytimg.com/vi/oY4EoQCOzeo/mqdefault.jpg)
[번외편] 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
프로토타입핑 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 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 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 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)
피그마 기초 강좌 - 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 팀 라이브러리 기능
피그마 기초 강좌 - 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/
피그마 기초 강좌 - 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 기초 튜토리얼 영상
피그마 기초 강좌 - 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 기초 튜토리얼 영상
