Figma Tutorial 피그마 간단하게 알아봅시다

AnotherWorld 연남동이재용

AnotherWorld 연남동이재용

해외에서 많이 쓴다는 Figma 뭐가 좋은건지 한번 훝어만 보겠습니다. Sketch를 비롯해서 앞으로 모든 디자인 툴의 튜토리얼을 만들어갈 예정입니다. Figma에 관심 있던 분들은 참고해보시면 좋겠습니다.

더보기

키워드

같이 보면 좋은 강좌

Figma 캔버스

Figma 캔버스(Canvas)에 대해 안내합니다. 이듬 블렌디드 러닝 ✦ 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 #피그마

피그마 기초 강좌 - 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

피그마 기초 강좌 - 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 빠르게 훑어보기

프로토타입핑 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 #피그마

Figma 파일 브라우저

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


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 회원가입 가이드  #무료편집 #피그마

피그마 기초 강좌 - 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 도구 인터페이스

피그마 기초 강좌 - 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

Figma 프레임

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


Figma 프레임

Figma 레이아웃 그리드

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


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 #무료툴

프로토타입핑 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 도구란?

프로토타입핑 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 #피그마

프로토타입핑 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 #오버레이 #피그마

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

+ 더보기
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