감사합니다 연정님... 🙏🙏 진짜.. 이걸 왜 여태 몰랐을까.. 직무 상관없이 배워야 하는 툴이라고 생각하는데 무료 강의가 아니었으면 선뜻 시작 못 했을 것 같아요.. 이런 고급 지식을 나눔하시다니.. 당신은 엔젤...🧚♀ 앞 길에 행운만 가득하시길 바라며...🙇♀ 복 받으세요💓💓💓💓💓💓
*피그마 프로토타입핑 강좌 전체보기 @t *Part 1 영상 목차 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 - RUclips 모바일 App을 기준으로 UX/UI Case Study - 프로토타입핑 제작을 위한 기본 가이드 영상입니다. - Figma로 프레젠테이션 하는 방법에 대해 알아보세요. - 실무에 유용한 팁
특정 서비스 UI/UX에 대해서 문제 해결 관점으로 바라보고 재구성한 시안 = 케이스 스터디 또는 사례 연구 / 사람마다 케이스 스터디를 정의하는 기준이 다르겠으나, 저의 경우 자주 사용하고 있는 유튜브 서비스에 대하여 평소 개선했으면 좋겠다라는 점을 프로토타입핑으로 구현해 보았습니다. 다른 사례 예시로 brunch.co.kr/@vivishin/46 링크 공유 드려요. 검색 시 UI/UX 케이스 스터디로 검색하시면 비슷한 사례가 많이 나옵니다.
강의 너무 잘보고 있습니다! 감사해요! 혹시 작업된 프레젠테이션이나 파일을 Behance 같은 포트폴리오 사이트에 올릴때 gif를 embed해서 올리는 방법도 알려주실수 있을까요? 만든 파일에 움직이는 엘리먼트들을 export할수 있는 방법에 대한 정보는 거의 찾을수가 없어서요 ㅠㅠ
안녕하세요 선생님 영상 정주행중인데요~ case study로 프로토타이핑 연습하려고하는데 전 샘플이 없어서 어떻게하면 선생님이랑 같은 유튜브 화면으로 할수있을까요?? 구냥 제가 똑같이 만들어야지만 연습해 볼 수 있나요? 선생님이랑 똑같은 예시로 적용하면서 연습하고싶은데 그냥 봐서는 잘모르겠어서요 ㅠㅠ네비게이션 바에 연결된 하늘색 선이있어야지 프로토타입핑을 할 수 있나요? ㅠㅠ
5:27 네이밍을 다르거나 같게해서 Smart Animation을 적용해야 한다고 하셨는데 잘 이해가 되지 않습니다ㅠㅠ 아무리 Smart Animation를 적용해봐도 계속 하단바가 고정이 안되는데 Smart Animation로 하단바 고정시키기 위해서 하단바를 어떻게 만들어야 하는지 알려주실 수 있나요?
하단 바 고정 방법 : ruclips.net/video/t5G87A3t2CM/видео.html 혹시 이걸로 해결이 될까해서 공유 드립니다. [문의 내용 중] 네이밍을 다르거나 같게해서 Smart Animation을 적용해야 한다고 하셨는데 잘 이해가 되지 않습니다 -> 말로 개념 설명드리기가 너무 어렵네요. [예를들어, 프레임 1과 프레임 2가 있이 있다고 가정하겠습니다. 프레임 1에 있는 객체 A(Layer 또는 frame의 Layer명: Header)의 y 좌표값이 0이라고 할 때, 프레임 2에 있는 객체 A(프레임 1과 동일한) Header의 y 좌표값이 20이라고 하면 프레임 1에 버튼 객체를 만들어 버튼을 프레임 2로 Smart Animation 옵션으로 으로 연결해봅니다. 프로토타입핑 모드에서 프레임 1의 그 버튼을 클릭 시, Header의 위치가 x좌표 위치로 스무스 하게 애니메이션 됩니다.] 결론: Smart Animation의 전제 조건은 Animation으로 표현하고자 하는 연결된 두 프레임 A, B간에 객체의 상위 Layer 이름이 서로 같아야합니다. 반대로 객체의 이름이 서로 다를 경우 적용이 되지 않습니다. 이를 역이용할 수도 있는데요~ 의도하지 않았는데 두 프레임간에 Animation이 적용 될 경우, 움직이는 객체의 상위 레이어의 이름을 대상 객체와 다르게 변경하면 됩니다.
@@yeonjung-figma 답변 감사합니다. 제 질문의 의도가 잘 전달된 것 같지 않네요 ㅎㅎ; 영상의 예제인 아이폰 11의 경우 해상도가 828 x 1792, Pro는 1125 x 2436인데 피그마에서는 375 x 812 라고 나와서 단위가 어떻게 되는지 궁금하여 여쭤보았습니다. 어차피 반응형으로 디자인 해야 할 테니 중요한 요소는 아니겠지요?
@@Twibap 지나가다 답글 납깁니다! 고밀도 디스플레이 디자인 말씀하시는 것 같네요! 연정님 말씀대로 375*812로 작업하는데 이때 출력하는 단위는 픽셀 단위(x1배)입니다. 아이폰 Pro 처럼 초고밀도 디스플레이의 경우 실제 개발시 x3배율 디자인이 필요할텐데요. 다행이 피그마, 스케치, XD처럼 앱 디자인 툴의 경우 고배율로 내보내는 기능이 있습니다! 그리고 포토샵처럼 비트맵이 아닌 벡터기반 프로그램이기 때문에 고배율로 내보내도 깨지지 않습니다.(이미지 제외) 결론은 디자인 툴에서 디바이스에 맞는 프레임을 선택하여 그냥 작업을 하시면 됩니다. 그리고 개발시 제플린 등에서 자동으로 배율 변환이 되기때문에 개발에도 문제없습니다. 고밀도, 고배율 디자인에 대한 부분은 안드로이드(Dp), iOS(Pt)단위에 대해 검색해보시면 이해가 빠를 것 같습니다!
hover 기능은 컴포넌트와는 무관해요~ 연결된 액션과 연관이 있습니다. 물론 컴포넌트 및 베어리언트 기능을 활용해서 hover기능을 보다 더 쉽게 만들 수는 있어요. 그부분은 올해 상반기에 추가된 기능이어서 이 영상에서는 아직 다루지 않았고 추후에 추가될 예정이에요. youTube에 interactive components라고 검색하시면 연관 영상을 찾으실 수 있을거에요.
@@yeonjung-figma 0:34초에 explore아트보드에 있는 인기 추천 음악 영화 저부분은 가로로 스크롤이 가능한 부분이잖아요! 그부분을 인기클릭했을 때 밑에 이미지들이 바뀌고 추천클릭했을때 밑에 이미지들이 바뀌고 이런식으로 저부분은 스크롤되면서 안움직이고 밑이 이미지들만 바꾸는 방법이요!!
피그마 사용법을 이렇게 간단하고 알기 쉽게 알려주는 채널은 여기가 유일해요!!
학부생 한 명을 밤샘 과제로부터 살리셨읍니다 ... 저의생명의 은인 ...
디자인을 처음 해보는지라 첫 영상부터 정주행했는데 알짜 알짜만 들어있어서 넘 좋았어요 감사합니다ㅜ
감사합니다 연정님... 🙏🙏 진짜.. 이걸 왜 여태 몰랐을까.. 직무 상관없이 배워야 하는 툴이라고 생각하는데 무료 강의가 아니었으면 선뜻 시작 못 했을 것 같아요.. 이런 고급 지식을 나눔하시다니.. 당신은 엔젤...🧚♀ 앞 길에 행운만 가득하시길 바라며...🙇♀ 복 받으세요💓💓💓💓💓💓
선생님 정말 도움이 됩니다. 수업 계속 만들어주세요오~
피그마 강의 만들어 주셔서 너무 좋아요ㅠㅠ~!! 이런 강의 기다렸어요!!
많이 늦어져서 죄송해용~~ ㅜㅡ
감사합니다 ㅠㅠㅠ 이 기능 넘 필요했는데 ㅠㅠ 강의 잘 보고 있어용
이번 영상도 유용하게 잘 보았습니다! 감사합니다!
최근 피그마가 프로토타입핑 관련해서 새롭게 업데이트를 하였더라구요~ 그부분 관련해서도 추후에 업데이트 하겠습니다!!
*피그마 프로토타입핑 강좌 전체보기 @t
*Part 1 영상 목차
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
- RUclips 모바일 App을 기준으로 UX/UI Case Study
- 프로토타입핑 제작을 위한 기본 가이드 영상입니다.
- Figma로 프레젠테이션 하는 방법에 대해 알아보세요.
- 실무에 유용한 팁
100번째 좋아요 였어요 >ㅂ
너무 감사합니다!! 처음에 uxui 디자인 배울 때 마냥 신기하기만 했는데, 여러 기능을 알고 다시 보니까 더 재밌어요!!!!
점점 더 재미있어질거에요 ㅎㅎ
Back 이 있다는 건 또 처음아네요ㅎ 업무하는데 도움이 많이 됩니다.
많은 도움이 되고있습니다. 연정님 감사합니다😃
너무 좋아요 도움 많이 됩니다 감사합니다
고맙습니다❤
감사합니다 잘 봤어요 :-)
ㅠㅠㅠ사랑해 피그마
감사합니다
5:30부분경에 나오는 smart animation matching layers가 아예 안나오는건 어떤 경우인가요.
안녕하세요 연정님 :) ! 피그마로 프로토타이핑 만들기 배우려면 Part 1~4 영상만 봐도 가능할까요?
아니면 Figma 시작하기 전부 다 봐야할까요?
케이스 스토디로 제작했다는게 무슨말인가요ㅜㅜ? 현 유튭 페이지를 보고 수정했다는 뜻인가요?
특정 서비스 UI/UX에 대해서 문제 해결 관점으로 바라보고 재구성한 시안 = 케이스 스터디 또는 사례 연구 / 사람마다 케이스 스터디를 정의하는 기준이 다르겠으나, 저의 경우 자주 사용하고 있는 유튜브 서비스에 대하여 평소 개선했으면 좋겠다라는 점을 프로토타입핑으로 구현해 보았습니다. 다른 사례 예시로 brunch.co.kr/@vivishin/46 링크 공유 드려요. 검색 시 UI/UX 케이스 스터디로 검색하시면 비슷한 사례가 많이 나옵니다.
강의 너무 잘보고 있습니다! 감사해요! 혹시 작업된 프레젠테이션이나 파일을 Behance 같은 포트폴리오 사이트에 올릴때 gif를 embed해서 올리는 방법도 알려주실수 있을까요? 만든 파일에 움직이는 엘리먼트들을 export할수 있는 방법에 대한 정보는 거의 찾을수가 없어서요 ㅠㅠ
아쉽게도 피그마 기본 기능 자체만으로는 gif를 생성을 하는 방법이 없어요 ~ (현 버전 기준)플러그인을 찾아보시거나 동영상 캡쳐후 에펙이나 동영상 편집 프로그램을 거쳐야 할거에요.
안녕하세요 선생님 영상 정주행중인데요~ case study로 프로토타이핑 연습하려고하는데 전 샘플이 없어서 어떻게하면 선생님이랑 같은 유튜브 화면으로 할수있을까요?? 구냥 제가 똑같이 만들어야지만 연습해 볼 수 있나요? 선생님이랑 똑같은 예시로 적용하면서 연습하고싶은데 그냥 봐서는 잘모르겠어서요 ㅠㅠ네비게이션 바에 연결된 하늘색 선이있어야지 프로토타입핑을 할 수 있나요? ㅠㅠ
안녕하세요. 화면상 시안은 공유용이 아니고 영상제작을 위해 만든 케이스 스터디 자료입니다. 똑같이는 아니더라도 비슷하게 만드셔서 직접 제작해 보시는 걸 추천드려요~
버튼을 클릭하거나 호버했을때의 반응형은 못나타겠죠..? ㅠㅠ 암만 찾아봐도 없네요
뒤로가기 버튼 설정에서 백버튼 만드는 건 안보여주셨는데 어떻게 만드는건가요?
안녕하세요, smart animate가 뜨지 않는데 어떻게 설정하나요..
영상의 [search] 프레임에서 태그안의 X를 눌러서 삭제했을때
해당 레이어를 삭제되게끔 프로토타입 적용할 수 있는 기능은 없을까요? 삭제하려는 태그에 해당하는 레이어를 삭제한 프레임을 하나 더 만들어서 Instant를 해서만 적용이 가능한걸까요..ㅠㅠ
Starting Frame 옵션이 제 화면에서는 안보이는데, 혹시 업데이트되면서 사라진건가요..? 3:14초요,,
그런거 같네요. 😅
최근에 Flow Starting point로 변경되었어요. 덕분에 시작 프레임을 여러개로 설정 가능할 수 있게 되었죠~
시작 프레임을 선택하고, Prototype패얼에서 Flow Starting point 오른쪽의 + 를 클릭하시면 됩니다.
00:53 혹시 프레임에 텍스트 입력하면 프레임이 작아져버리는 건 왜 그러는 걸까요?
영상에 나오는 유튜브 케이스 스터디 프로토타입은 다운받을 수 없나요?
편집시 프로토타입 view를 보면 어떨때는 화면이 pc브라우져에 꽉차보이고 어떨때는 잘려서 보이는데 이거 view화면 크기조절 어떻게 하나요
프로토타입된 영상을 포트폴리오에 삽입하려면 어떻게 해야 할까요?
5:27 네이밍을 다르거나 같게해서 Smart Animation을 적용해야 한다고 하셨는데 잘 이해가 되지 않습니다ㅠㅠ 아무리 Smart Animation를 적용해봐도 계속 하단바가 고정이 안되는데 Smart Animation로 하단바 고정시키기 위해서 하단바를 어떻게 만들어야 하는지 알려주실 수 있나요?
하단 바 고정 방법 : ruclips.net/video/t5G87A3t2CM/видео.html 혹시 이걸로 해결이 될까해서 공유 드립니다.
[문의 내용 중] 네이밍을 다르거나 같게해서 Smart Animation을 적용해야 한다고 하셨는데 잘 이해가 되지 않습니다 -> 말로 개념 설명드리기가 너무 어렵네요.
[예를들어, 프레임 1과 프레임 2가 있이 있다고 가정하겠습니다.
프레임 1에 있는 객체 A(Layer 또는 frame의 Layer명: Header)의 y 좌표값이 0이라고 할 때,
프레임 2에 있는 객체 A(프레임 1과 동일한) Header의 y 좌표값이 20이라고 하면
프레임 1에 버튼 객체를 만들어 버튼을 프레임 2로 Smart Animation 옵션으로 으로 연결해봅니다.
프로토타입핑 모드에서 프레임 1의 그 버튼을 클릭 시, Header의 위치가 x좌표 위치로 스무스 하게 애니메이션 됩니다.]
결론: Smart Animation의 전제 조건은 Animation으로 표현하고자 하는 연결된 두 프레임 A, B간에 객체의 상위 Layer 이름이 서로 같아야합니다. 반대로 객체의 이름이 서로 다를 경우 적용이 되지 않습니다.
이를 역이용할 수도 있는데요~ 의도하지 않았는데 두 프레임간에 Animation이 적용 될 경우, 움직이는 객체의 상위 레이어의 이름을 대상 객체와 다르게 변경하면 됩니다.
좋은 영상 만들어주셔서 감사합니다.
그런데 프레임 선택시 넓이x높이 단위가 어떻게 되나요? 실제 스펙의 해상도와는 다릅니다.
요즘은 아이폰 375*812로 많이 하는 편입니다.
@@yeonjung-figma 답변 감사합니다. 제 질문의 의도가 잘 전달된 것 같지 않네요 ㅎㅎ; 영상의 예제인 아이폰 11의 경우 해상도가 828 x 1792, Pro는 1125 x 2436인데 피그마에서는 375 x 812 라고 나와서 단위가 어떻게 되는지 궁금하여 여쭤보았습니다. 어차피 반응형으로 디자인 해야 할 테니 중요한 요소는 아니겠지요?
@@Twibap 지나가다 답글 납깁니다! 고밀도 디스플레이 디자인 말씀하시는 것 같네요! 연정님 말씀대로 375*812로 작업하는데 이때 출력하는 단위는 픽셀 단위(x1배)입니다.
아이폰 Pro 처럼 초고밀도 디스플레이의 경우 실제 개발시 x3배율 디자인이 필요할텐데요. 다행이 피그마, 스케치, XD처럼 앱 디자인 툴의 경우 고배율로 내보내는 기능이 있습니다! 그리고 포토샵처럼 비트맵이 아닌 벡터기반 프로그램이기 때문에 고배율로 내보내도 깨지지 않습니다.(이미지 제외)
결론은 디자인 툴에서 디바이스에 맞는 프레임을 선택하여 그냥 작업을 하시면 됩니다. 그리고 개발시 제플린 등에서 자동으로 배율 변환이 되기때문에 개발에도 문제없습니다.
고밀도, 고배율 디자인에 대한 부분은 안드로이드(Dp), iOS(Pt)단위에 대해 검색해보시면 이해가 빠를 것 같습니다!
interactions 사용할때 컴포너트나 그런 기능을 쓰지않아서 hover나 슬라이드 기능이 안뜨는걸까요 아니면 플러그인을 설치해야 하는건가요..?ㅠㅠㅠ 종일 찾아봐도 어렵네요...
hover 기능은 컴포넌트와는 무관해요~ 연결된 액션과 연관이 있습니다.
물론 컴포넌트 및 베어리언트 기능을 활용해서 hover기능을 보다 더 쉽게 만들 수는 있어요. 그부분은 올해 상반기에 추가된 기능이어서 이 영상에서는 아직 다루지 않았고 추후에 추가될 예정이에요.
youTube에 interactive components라고 검색하시면 연관 영상을 찾으실 수 있을거에요.
@@yeonjung-figma 감사합니다❤️🔥
안녕하세요 :) 궁금한게 있는데, 프로토타입핑까지의 과정도 디자이너의 영역일까요?
일반적으로 그래왔습니다. 저의 경우 2015년 부터 였고요.. 다만 디자이너만의 영역은 아니었고 개발자 또는 기획자들이 하기도 했어요. 퇴근 몇년간 개발자들도 피그마를 사용해서 와이어프레임을 직접 설계하고 피그마로 포로토타입핑을 만드는 사례를 몇번 보았습니다.
@@yeonjung-figma 컴공 학부생인데, 앱 개발 프로젝트를 하는 수업에서 직접 저희가 피그마를 이용해서 프로토타입을 제작합니다. 사용법이 간단해서 바로 배워 쓸 수 있더라구요
안녕하세요 혹시 실수했을때 뒤로가는 방법이 뭘까요,,?
cmd (ctrl)+ z 또는 버전 히스토리로 되돌릴 수 있어요
@@yeonjung-figma 감사합니다,, 사랑합니다,,❣️
혹시 인기 추천 음악 영화 저부분을 가로로 드래그하면서 밑에 이미지들만 바뀌게하는법 알려주실 수 있으세요?ㅠㅠ
?? 오잉 질문에 대해 이해를 못했어요
@@yeonjung-figma 0:34초에 explore아트보드에 있는 인기 추천 음악 영화 저부분은 가로로 스크롤이 가능한 부분이잖아요! 그부분을 인기클릭했을 때 밑에 이미지들이 바뀌고 추천클릭했을때 밑에 이미지들이 바뀌고 이런식으로 저부분은 스크롤되면서 안움직이고 밑이 이미지들만 바꾸는 방법이요!!
아 그 경운 피그마 말고 프로토파이 프로그램을 써야 자연스럽게 될듯요~ 피그마로는 단순 인터렉션만 되서 클릭하면 장면을 전환할 수는 있는데 전체화면이 전환이 되어 UNI님이 원하는 인터렉션은 아닐거 같아요. 아쉽게도 제가 도움을 드릴 수 있는 부분이 아니네요..