wishket.com

온보딩 화면, 어떻게 구성하면 좋을까?

스플래시 화면과 함께 서비스의 '첫 인상'을 좌우 할 수 있는 중요한 장치가 된다는 온보딩 화면, 어떻게 구성하면 좋을지 함께 알아봅시다.

vikieminor

youtube.com

[피그마강좌] #25. 캐러셀 카드(Carousel Card) 제작하기

이번에는 캐러셀 디자인을 해보도록 하겠습니다.
캐러셀(Carousel)은 원래 수하물 컨베이어 벨트 같은 것을 의미하는데
웹앱 UI/UX 디자인에서는 회전되며 돌아가는 슬라이드들을
캐러셀이라고 부릅니다.



#피그마강좌 #prototype #CarouselCard
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam


============================================================
◈ 구글 시트 주소
https://docs.google.com/spreadsheets/d/1YOJ3UMcF-b7wW49Y76MCCIAJ-s-5ht3-Yur7ZhWY9Lw/edit?usp=sharing



============================================================
◈ 영상 목차
1. 카드 원본컴포넌트 만들기 - 01:02
2. 카드 인스턴스 복제 후 다시 컴포넌트 제작 - 10:00
3. Variants를 하기 위한 각각의 장면 만들기 - 14:24
4. 프로토타입 처리 후 화면 구현 제작하기 - 21:16


============================================================
◈ 블로그 강의 주소 - 25강 캐러셀 카드(Carousel Card)
https://ossam5.tistory.com/335


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #24. 코드 Inspect패널과 Zeplin

이번에는 코딩관련 Inspect패널과
Zeplin플러그인을 볼게요.



#피그마강좌 #Inspect #Zeplin
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam


============================================================
◈ 제플린 사이트
https://zeplin.io/



============================================================
◈ 영상 목차
1. 코드변환 전 체크요소 - 00:58
2. Clean Document 플러그인 - 05:28
3. Inspect 패널 - 8:45
4. Figma + Zeplin - 12:48


============================================================
◈ 블로그 강의 주소 - 24강 코드 Inspect패널과 Zeplin
https://ossam5.tistory.com/323


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[Figma NEWS] 헐! 어도비가 피그마 인수했다고?(피그마가치는 28조원!!)

어도비가 피그마를 인수했다고 합니다.
피그마를 잘 쓰던 사용자들에게는
아닌 밤중에 홍두깨가 아닐 듯 싶은데요.
그래도 더 좋아지길 빌면서 영상을 만들었습니다.

#오쌤의니가스터디 #피그마강좌 #어도비피그마인수

============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.



============================================================
◈ 음악 가져온 곳
https://www.mewpot.com/
현재 추천인 이벤트를 하고 있어요.
#오쌤
▲ 위는 제 추천인 코드인데 입력하면
여러분도 저도 2개월 구독이 추가됩니다.
음악이 필요하면 뮤팟을 사용해보세요.

vikieminor

youtube.com

[피그마강좌] #23. Variants를 이용한 탭바컨텐츠 만들기

이번에는 Variants와 Prototype기능을
이용해 탭바컨텐츠를 제작해보겠습니다~



#피그마강좌 #탭바 #tabbar
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 탭버튼 Variants로 제작하기 - 01:38
2. 탭 Contents 컴포넌트로 제작하기 - 11:42
3. Prototype을 이용한 탭인터랙션하기 - 26:10

============================================================
◈ 블로그 강의 주소 - 23강 Variants를 이용한 탭바컨텐츠
https://ossam5.tistory.com/320


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #22. 피그마파일공유와 코멘트툴

이번에는 피그마 파일 공유하는 법과
코멘트툴 사용법을 배워보겠습니다.
이 기능들을 통해 협업을 잘 해봅시다!


#피그마강좌 #피그마파일공유 #코멘트툴
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 피그마파일공유 - Share - 00:56
2. 피그마 파일(*.fig) 내보내기 - 05:56
3. 코멘트툴 - 07:30

============================================================
◈ 블로그 강의 주소 - 22강 피그마파일공유 및 코멘트툴
https://ossam5.tistory.com/307


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #21. 이미지(디자인에셋) 내보내기 - Export

이번에는 이미지나 소스를 내보내기를 해보겠습니다.
이미지 내보낼때 해상도에 대한 개념을 알아야 해서
이미지 해상도까지 수업에 넣었습니다.



#피그마강좌 #이미지내보내기 #디자인해상도
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 해상도개념이해하기 - 01:00
2. 내보낼 이미지 컨텐츠 제작하기 - 08:05
3. 각각 내보내기(Export) - 13:31
4. 한번에 내보내기 - 16:39

============================================================
◈ 블로그 강의 주소 - 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기)
https://ossam5.tistory.com/306


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #20. Rename It - 피그마플러그인 사용법

지난번에 오쌤이 선택한 피그마 플러그인
TOP10에 나왔던 Rename It 플러그인 사용법입니다.
이건 기능이 많아서 한강좌로 빼봤습니다.
한번 사용해보면 좋을 것 같아요!



#피그마강좌 #RenameIt #피그마플러그인
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 숫자 혹은 알파벳으로 정리 변경 - 01:12
2. 현재 레이어명참조 변경 - 09:40
3. 크기참조 변경 - 17:42
4. 특정 텍스트를 검색 후 변경 - 19:12
5. Quick Rename 기능 - 20:38

============================================================
◈ 블로그 강의 주소 - 20강 Rename It 플러그인
https://ossam5.tistory.com/305


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #19. 오쌤 Pick! 피그마 플러그인 Top 10

오쌤이 선택한 피그마 플러그인
TOP10입니다.
정말 사용하면 좋을 것들만 엄선해봤어요.



#피그마강좌 #plugins #피그마플러그인
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Content Reel - 01:04
2. Unsplash - 03:19
3. Lorem Ipsum - 05:00
4. Material Design Icons + Iconify - 06:11
5. Rename It - 08:38
6. Color Palettes + Brandfetch - 10:12
7. Handy Components - 12:20
8. Wireframe - 13:29
9. Autoflow - 15:33
10. Google Sheets Sync - 15:55


============================================================
◈ 블로그 강의 주소 - 19강 오쌤 Pick! 피그마 플러그인 Top 10
https://ossam5.tistory.com/304


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #18. Prototype05 - Dropdown menu

프로토타입을 이용해 드롭다운메뉴를
만드는 것을 배워보도록 하겠습니다!
드롭다운메뉴는 마우스 올렸을때
하위메뉴가 떨어지는 것을 의미합니다.



#피그마강좌 #Prototype #dropdownmenu
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 서브메뉴 원본컴포넌트 제작 - 01:00
2. 메인메뉴 원본컴포넌트 제작 - 05:21
3. 실행프레임제작 - 15:39
4. 홈페이지 메인메뉴 제작 - 21:58


============================================================
◈ 블로그 강의 주소 - 18강 Prototype - Dropdown Menu
https://ossam5.tistory.com/302



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #17. Prototype04 - hover이미지

프로토타입을 이용해 hover이미지를
만드는 것을 배워보도록 하겠습니다!
hover이미지는 마우스 올렸을때
바뀌는 이미지를 의미합니다.



#피그마강좌 #Prototype #hover이미지
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. hover이미지 유의사항 확인 - 01:00
2. 원본컴포넌트 제작 - 03:45
3. variants와 prototype 제작 - 07:58
4. hover이미지 프레임 제작 - 11:15


============================================================
◈ 블로그 강의 주소 - 17강 prototype - HOVER이미지
https://ossam5.tistory.com/301



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #16. Prototype03 - 모바일패널 오버레이

프로토타입을 이용해 모바일 패널 오버레이를
만드는 것을 배워보도록 하겠습니다!



#피그마강좌 #Prototype #패널오버레이
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 메인페이지 프레임만들기 - 01:00
2. 패널 프레임만들기 - 10:34
3. 사용될 프로토타입 기능정리 - 13:26
4. 모바일패널 프로토타입 만들기 - 14:57


============================================================
◈ 블로그 강의 주소 - 16강 prototype - 모바일패널
https://ossam5.tistory.com/300



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #15. Prototype02 - Slide Image

프로토타입을 이용해 슬라이드 이미지를
만드는 것을 배워보도록 하겠습니다!



#피그마강좌 #Prototype #피그마프로토타입
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 사용될 프로토타입 기능정리 - 01:00
2. fade image 인터랙션만들기 - 02:19
3. slide image 인터랙션만들기 - 07:34


============================================================
◈ 블로그 강의 주소 - 15강 Prototype - Slide Images
https://ossam5.tistory.com/299



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #14. Prototype01 - 토글버튼, hover효과, 네이버로그인창 만들기

피그마의 컴포넌트를 조합하는
Variants기능을 사용해서 Prototype을 만들어보겠습니다.
프로토타입을 이용해서 토글버튼, hover효과가 실제로
구현되는 것 같은 느낌을 배워보겠습니다.



#피그마강좌 #Prototype #피그마프로토타입
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Prototype과 Interaction 기능정리 - 01:00
2. Toggle Switch Button 설정 - 04:40
3. Check Box 설정 - 07:27
4. Login Button 설정 - 08:49
5. Input Field 설정 -11:43


============================================================
◈ 블로그 강의 주소 - 14강 Prototype - 네이버 로그인창
https://ossam5.tistory.com/289




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #13. Variants - 토글버튼, hover효과, 네이버로그인창 만들기

피그마의 컴포넌트를 조합하는
Variants기능을 사용하는 법을 보도록 하겠습니다.



#피그마강좌 #Variants #피그마베리언츠
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Toggle Switch Button 제작 - 01:00
2. Check Box제작 - 05:03
3. Login Button 제작 - 06:56
4. Input Field 제작 -10:18
5. 네이버 로그인 창 제작 - 13:52


============================================================
◈ 블로그 강의 주소 - 13강 Variants - 토글버튼, hover효과
https://ossam5.tistory.com/289




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #12. Auto Layout과 Constraints - 2022년 5월 업그레이드 버전

피그마의 오토레이아웃과 컨스트레인츠를
사용하는 법을 보도록 하겠습니다.
최근 오토레이아웃 사용법이 좀 바뀌었는데요.
그에 맞게 강의를 준비했습니다.




#피그마강좌 #AutoLayout #Constraints
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Auto Layout의 padding - 01:00
2. Auto Layout의 Space Between - 04:55
3. Auto Layout의 Resizing - 08:14
4. Constraints -10:10
5. 응용 - 인스타그램 팔로워 리스트만들기 - 17:46
6. 보너스 - Absolute Position - 32:33


============================================================
◈ 블로그 강의 주소 - 12강 Auto Layout과 Constraints
https://ossam5.tistory.com/287




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor