![[피그마] 오토 레이아웃으로 반응형 웹사이트 만들기](/img/o.gif)
28 күн бұрын
Ай бұрын
2 ай бұрын
3 ай бұрын
3 ай бұрын
3 ай бұрын
4 ай бұрын
5 ай бұрын
5 ай бұрын
5 ай бұрын
6 ай бұрын
7 ай бұрын
7 ай бұрын
8 ай бұрын
9 ай бұрын
10 ай бұрын
10 ай бұрын
11 ай бұрын
Жыл бұрын
Жыл бұрын
Жыл бұрын
Жыл бұрын
Жыл бұрын
Пікірлер
@김기현-l4z6y 7 сағат бұрын
백엔드 개발자입니다! Figma 강의 몇개 구매해서 맛보기 중인데 그중 몰입도가 가장 좋아요! 강의 만들어주셔서 감사합니다~!
@UXUI 6 сағат бұрын
우앙~~ 인프런에서 제 강의 구매해서 들어주셔서 감사합니다. 아직 수강평이 없어서 궁금했는데 👍😍👍👍👍 댓글 감사합니다. 끝까지 완강하세요!!! 감사합니다!!
@jumpwithjordan 5 күн бұрын
생초보가 들기에 살짝 진도가 빠르지만 너무나도 쉽게 설명해주셔서 좋았습니다
@UXUI 3 күн бұрын
안녕하세요. jumpwithjordan님 이 영상은 어느정도 피그마 사용을 할수 있는 분들이 들으시면 좋을 것 같아요. 오토레이아웃을 공부하신 후에 이 영상을 보시면 이해가 쉬울꺼에요. 시청해 주셔서 감사합니다. 😊
@nomonomo7063 5 күн бұрын
좋은 강의 감사합니다. 잘 봤습니다!
@UXUI 4 күн бұрын
영상시청해 주시고 댓글도 남겨주셔서 감사합니다 👍❤️
@김호랑-o2e 7 күн бұрын
선생님....2분20초경에 프로토타입 호버 -> change to로 설정하려는데 change to로 안걸려요ㅠ이부분이 비활성화되어있어요ㅠ왜이얼죠ㅠ
@UXUI 6 күн бұрын
안녕하세요 호랑님 change to 액션이 안나오고 navigate to 가 나오면 컴포넌트 세트가 안됐다는 의미입니다. 컴포넌트 세트안에서 액션은 항상 change to 로 자동으로 설정이 됩니다. 다시 확인해주세요. 영상 시청해주셔서 감사합니다.❤️
@hyee_yaming 7 күн бұрын
감사합니다! 디자이너인데 개발자에게 어떻개 주어야할지 고민이었거든요 ㅠ
@UXUI 6 күн бұрын
안녕하세요 yaming 님 영상이 도움이 되셨길 바래요. 시청해주셔서 감사합니다 👍🥰
@kangsungchel574 8 күн бұрын
루씨님 너무 잘 봤습니다. 저는 에펙에서 모션을 만들고 json으로 추출했는데 훨씬 더 간결하고 쉬워졌습니다. 피그마에서 애니메이션이나 로티파일즈에서 움직임을 주고 결국엔 json 같은 결과물이 있어야하는데 유료를 신청하고 사용 해야하는거죠?
@UXUI 7 күн бұрын
안녕하세요. 애니메이션을 만든 후에 download & handoff 에서 lottieJSON으로 다운로드 해주세요. 무료 플랜에서도 lottieJSON은 가능합니다. 다만 optimized dotLottie와 optimized lottieJSON으로 다운받으려면 유료 플랜을 결재하셔야 해요. 영상 시청해 주셔서 감사합니다.🥰
@숨덕탈출 8 күн бұрын
한국께 많이 없ㅇㅓ서 아쉽네요 ㅎㅎ
@UXUI 8 күн бұрын
국내 서비스는 윗wwit , uibowl 에 많이 있습니다.
@숨덕탈출 13 күн бұрын
감사합니다
@UXUI 13 күн бұрын
@@숨덕탈출 영상시청해 주셔서 감사해요 😊
@숨덕탈출 13 күн бұрын
제 피그마가 이상한건가요? alt ctrl B 눌려도 컴포넌트 해제가 안 돼서 고통을 받고 있어요. ㅜㅜㅜㅜ(8:23) 설마 인스턴트 컴포넌트만 돼고 마스터 컴포넌트는 안 돼는 거예요?
@UXUI 13 күн бұрын
@@숨덕탈출 인스턴스 해제만 있어요. 컴포넌트 해제는 없어요. 플러그인 detatch component 사용해주세요^^
@숨덕탈출 15 күн бұрын
예재자료는 어디있나요??
@숨덕탈출 24 күн бұрын
3:51 혹시 컴퍼넌트 적용 된 박스의 크기를 자율자제로 움직일 수 있나요? 자율자제로 움직이지 않고 고정되어 있어서요 ㅜㅜ 혹시 자율자제로 움직일 수 있으면 알려줄 수 있나여??
@UXUI 20 күн бұрын
안녕하세요 컴포넌트 세트(보라색 점선)의 크기 조정을 변경하고 싶으신가요? 베리언트 추가하면 점선 크기도 같이 늘어납니다. 더 크게 하고 싶으면 점선을 늘리시면 되요^^
@geniusahn 27 күн бұрын
좋은 영상 만들어주셔서 넘나 유용하게 공부 하고 있어요. 한가지 질문이 있는데, Main 을 만들고 나서 약간 동영상이 편집되면서 잘린 것 같아서요. 똑같이 잘 안되는데 맞나요?
@UXUI 26 күн бұрын
안녕하세요 geniusahn님 제가 편집하다가 잘렸나봐요. 피그마 커뮤니티에 파일 올렸습니다. 파일 참고 부탁드려요. www.figma.com/community/file/1439043014635458834 영상 시청해 주셔서 감사합니다😍
@디어북노트 29 күн бұрын
반응형 궁금했는데 너무 좋은 강의 감사합니다 다음에 천천히 다시 볼께요 혹시 웹사이트 제작시 모바일 버전은 어떻게 제작해야 할까요 ? 모바일 크기로 다시 제작해야 할까요 지금처럼 이렇게 모든 디자인이 가능할까요 좀 더 편하게 반응형 디자인 어떻게 하는지 알고 싶어요 감사합니다
@UXUI 28 күн бұрын
안녕하세요 디어북노트님~ 반응형으로 디바이스에 따라 전환할 때 영상처럼 간단하게 전환 되지는 않아요^^;; 그래도 오토 레이아웃의 wrap이 생겨서 편해지긴 했어요. 우선 모바일 설계를 한 후에 오토 레이아웃 또는 베리어블 중 편한 방식으로 해주세요. 영상 시청해주셔서 감사합니다.🥰
@디어북노트 26 күн бұрын
@@UXUI 친절하신 설명 너무 감사드립니다 🤍모바일 버전 새롭게 만들어야 되는군요 😢 너무 감사드립니다 늘 유익한 강의 해주셔서 감사드립니다 🥹🤍🤍
@미생에서조생으로 Ай бұрын
너무 자세한설명 감사합니다!!! 번역은 어떻게 할까요?!?!
@UXUI 29 күн бұрын
안녕하세요 번역은 파파고나 구글 번역기로 해주세요^^;; 위젯이 있지만 피그마에서만 가능합니다. www.figma.com/community/widget/1133906465500929288/translate 영상 시청해 주셔서 감사해요!!😍
@뚜혜띠 Ай бұрын
따라해보는중인데 왜 글자가 나만 멈춰있는것인가..
@UXUI Ай бұрын
ㅋㅋ 혜띠님 잘안되나요?? 컴포넌트 세트로 만들고 두번째는 텍스트의 위치를 왼쪽으로 옮겨주세요. 안되면 [email protected]으로 파일 공유해주세요. 감사합니다!
@WoongJin017 Ай бұрын
우측 하단 ? 눌러서 go back to previous UI 누르면 예전 UI로 사용 가능해요. 근데 이게... 저는 이전 UI가 너무 익숙해서 내년부터 새로운 UI로만 사용 가능한다고 한다면 걱정이네요.
@UXUI Ай бұрын
안녕하세요. 얼른 새로운 UI에 적응하셔야 할텐데 ^^;; 써보니까 바뀐 UI가 훨씬 일할 때는편하더라구요. 영상 시청해 주셔서 감사합니다!
@daniel-3ud Ай бұрын
저에게 필요했던 강의인데 너무 감사합니다 !
@UXUI Ай бұрын
안녕하세요 성원제님 필요했던 내용이라 다행이네요. 피그마로 다양한 구현해보세요. 응원합니다!!!
@우방부동산장기엽 Ай бұрын
포토샵은 안하면 까먹어요...감사합니다.
@UXUI Ай бұрын
영상시청해 주셔서 감사합니다🥰
@siro-f5y Ай бұрын
안녕하세요!이번 강의와는 관련없는 질문입니다만 이전에 너무 도움을 많이 받았던 채널인지라 최근영상쪽에 질문 남겨봅니다..! 페이지 하나에서 각각 세로길이가 다른 이미지 여섯개를 좌우버튼을 누르면 한장씩 넘어가게 총 여섯 컴포넌트를 만들어 배리언트 했는데요, 문제는 각각 이미지 길이가 달라서 페이지 하단을 넘어가는 이미지가 있거나 하단 여백이 너무 많이 남는 이미지가 있어요. 각 이미지별로 페이지의 길이가 달라지게 하나의 배리언트를 만들고싶은데 어떻게 하면 좋을까요?
@UXUI Ай бұрын
안녕하세요. 설명만으로는 이해가 좀 어렵네요. 컴포넌트 세트로 만들고 가져온 인스턴스를 프레임에 배치해서 버튼을 누르면 페이지하 넘어가는 방식인가요? ㅁ 가져온 인스턴스를 오토레이아웃으로 만들고 높이를 hug로 해보세요. 그래도 안되면 [email protected]으로 파일을 공유해주세요^^
@siro-f5y Ай бұрын
@@UXUI 답변 감사합니다!알려주신 방법으로 테스트 해보았으나 구현되지 않아서 메일로 제작파일 전송해드렸습니다!ㅜㅜ 시간 괜찮으실때 확인해주시면 너무 감사드리겠습니다🙇♀️
@UXUI Ай бұрын
@@siro-f5y 메일 보냈습니다. 영상 시청해 주셔서 감사해요😍
@siro-f5y Ай бұрын
@@UXUI 안녕하세요!한가지 더 질문드려도 될까요...?페이지에 만들어놓은 스크롤이 프로토타입 fill screen으로 볼때는 표시가 되는데 fit width으로 보면 사라져서 전혀 표시가 안됩니다. 어떻게 하면 좋을까요?😥
@siro-f5y Ай бұрын
이유는 모르겠으나 어쩌다보니 해결되었습니다...!!
@디어북노트 Ай бұрын
설명 너무 잘해주세요 ❤
@UXUI Ай бұрын
댓글도 남겨주시고~~시청해주셔서 감사해요^^
@디어북노트 Ай бұрын
영상 마다 자세하세 설명해주셔서 정말 유익합니다 아직 너무 몰라서 좀 스트레스 쌓이고 힘들지만 좋은 강의 해주셔서 너무 감사드립니다 ㅠㅠ
@UXUI Ай бұрын
안녕하세요 디어북노트님 영상 모두 시청해주셔서 감사합니다. 끝까지 영상 다 들어보시고 피그마 마스터 해보세요^^ 화이팅입니다~~
@디어북노트 Ай бұрын
필과 허그에 대해 원리끼지 설명해셔서 감사합니다 포인트 명확하고 자세히 알려주셔서 정주행하겠습니다 아직 질모르겠지만 보다보면 차차 알게 될거 같은 희망이 생깁니다 김시힙니다 ❤
@UXUI Ай бұрын
댓글 감사합니다!! 피그마 정주행하시면서 정복해보세요. 응원합니다!!
@굿송롸이트투나잇 Ай бұрын
안녕하세요..게속 따라해봤는데 안돼요.. 도와주세요ㅠㅠ
@UXUI Ай бұрын
안녕하세요 [email protected]으로 파일 공유해주시면 봐드릴께요. 시청해주셔서 감사해요^^
@PJ-zs9id Ай бұрын
안녕하세요 루씨님 8:47 컴포넌트 해서 프레임에 넣었는데 한줄이 안 나오고 계속 두줄로 나오네요ㅠㅠ 왜 이러는지 알 수 있을까요?
@UXUI Ай бұрын
안녕하세요 컴포넌트 세트로 만들었나요? 아마도 컴포넌트로 만들것 같아요^^
@PJ-zs9id Ай бұрын
@@UXUI 루씨님 말대로 다시 확인해보니까 세트로 안만들었어요ㅠㅠ 감사합니다👍
@이름-n5y7u Ай бұрын
안녕하세요 루씨님 따라해보았는데 안되어서 메일보내드렸습니다ㅜㅜ 도와주세요
@UXUI Ай бұрын
안녕하세요. 메일보냈습니다. 5:29~5:40 처럼 end안의 로고는 위치가 왼쪽으로 이동해주세요. 영상 시청해 주셔서 감사합니다!
@미밉-x1f Ай бұрын
너무너무 큰 도움입니다..감사해요 그런데 저 이미지 링크는 어디서 생성되는 링크인지 알수 있을까요?!
@UXUI Ай бұрын
안녕하세요. 이미지는 언스플래쉬 웹사이트에 있는 이미지 주소입니다. 제품 이미지를 서버에 먼저 올린 후에 이미지 주소를 넣어주세요. 영상 시청해 주셔서 감사합니다^^
@미밉-x1f Ай бұрын
@@UXUI 와 감사합니다!!!!!!!!!!!❤️
@면오동통 Ай бұрын
쉬운 설명 감사합니다 유익해요!
@UXUI Ай бұрын
영상 시청해 주셔서 감사합니다!!
@별다방미스김 2 ай бұрын
누구보다 너무쉽게 설명해주셔서 육퇴후 적용하니 넘나감동스럽네요ㅠㅠ 감사합니다❤❤❤❤
@UXUI 2 ай бұрын
안녕하세요 별다방님~ 육퇴하셔서 시원하시겠어요~~ ㅎㅎ (완전 공감합니다) 콘텐츠 디자이너 또는 쇼핑몰 디자이너를 위한 영상 계획 중입니다. 완전 편리한 기능을 실무자가 사용하는 방법으로 마구 공개합니다. 조금만 기다려주세요. 영상 시청해 주셔서 감사합니다❤.❤
@면오동통 2 ай бұрын
너무 유익해요!!!! 쉬운 설명에 이해가 잘됐어요ㅠ 감사합니다
@UXUI 2 ай бұрын
영상 시청해주셔서 감사합니다. 로티의 매력에 빠져보세요^^
@rain13ow 2 ай бұрын
이 프로그램 무료가 맞을까요? 홈페이지 들어가서 pricing 에서 보니 무료상품은 없던데요
@UXUI 2 ай бұрын
로티 웹사이트와 플러그인은 무료입니다. 일부 애니메이션이 유료이고, 다운로드 형식에 따라 유료가 간혹 있습니다. lottiefiles.com/웹사이트에서 애니메이션 검색하면 무료 / 유료가 보입니다. 무료로 필터 체크하고 검색해보세요^^ 영상 시청해주셔서 감사합니다!!
@ODEZ-z6k 2 ай бұрын
6:20 에 레이어 패널이 완전히 닫히는 단축키 혹시 알려주실수있으실까용?
@UXUI 2 ай бұрын
alt(opt)+L 입니다. 영상 시청해 주셔서 감사해요!!!
@빽뛝 2 ай бұрын
이전 버전으로 쓰고 싶은데 UI 화면이 갑자기 바뀐 부분은 어떻게 되돌리나요? ㅜㅜ
@UXUI 2 ай бұрын
안녕하세요. 이전 버전으로 돌릴수 없는데요^^;;
@UXUI 2 ай бұрын
영상 시청해 주셔서 감사합니다😍
@michaeloh7685 2 ай бұрын
오픈마켓 상세페이지에 태그를 넣으면 적용되나요?
@UXUI 2 ай бұрын
안녕하세요 상세페이지의 html 코드 입력하는 부분에 넣어주세요. 영상 시청해 주셔서 감사합니다^^
@Y0J0-v6l 3 ай бұрын
컴포넌트 세트에 대해 이해가 잘 되었습니다. 한 가지 질문이 있습니다. 컴포넌트 세트에 귀속된 컴포넌트에 동일한 변화를 줄 수 있나요? 예를 들어 고양이 이모티콘이 전체가 다함께 크게 변경되는 것 (컴포넌트세트에 메인 컴포넌트가 존재하는지 여쭤보는 질문입니다.)
@UXUI 3 ай бұрын
안녕하세요 컴포넌트를 만들고 복사한 인스턴스로 다시 컴포넌트 세트를 만드는 즉 중첩이 가능합니다. 이런 경우를 처음에 만든 컴포넌트를 베이스라고 부릅니다. 규모가 큰 디자인 시스템을 구축할 때 사용하는 방법입니다. 해답이 되었을까요??
@UXUI 3 ай бұрын
하지만 다양한 크기가 있을 경우에 크기별로 베리언트를 만드는 것이 좋습니다. 영상 시청해 주셔서 감사합니다^^
@immungbean 3 ай бұрын
크롬에서는 ui3 사용이 가능한데 윈도우에서는 적용이 안되는데 어떻게해야되나요?
@UXUI 3 ай бұрын
안녕하세요. 설치한 앱은 기다려야해요. 순차적으로 업데이트입니다^^ 영상 시청해 주셔서 감사합니다😍
@박희-s9w 3 ай бұрын
안녕하세요. 게임을 개발 중인데 개발 중인 게임 내 UI 디자인에 엔바토에서 다운받은 그래픽 리소스를 활용해도 문제가 안될까요?
@UXUI 3 ай бұрын
안녕하세요 엔바토에서 구매하고 Add a licence에서 프로젝트를 등록해주세요. 꼭 라이센스 확인하고 사용하세요. 영상 시청해 주셔서 감사합니다!!
@bizdizwiz 3 ай бұрын
좋은 정보 감사합니다. 디자인 시스템 때문에 항상 머리가 아픈데 참고 잘 하겠습니다...^^
@UXUI 3 ай бұрын
영상 시청해주셔서 감사합니다^^ 오픈된 국내 서비스의 디자인시스템 참고하면 많이 도움이 될꺼에요. 응원합니다!!
@drawkim6369 3 ай бұрын
안녕하세요! 똑같이 해봤는데 왜 스무스하게 모션이 안 움직이고 딱 딱 끊겨서 움직일까요?
@UXUI 3 ай бұрын
안녕하세요. 스마트 애니메이트로 할 경우에 레이어 이름이 다르면 자연스러운 애니메이션이 안됩니다. 레이어 이름 다시 확인해주세요. 영상 시청해주셔서 감사합니다^^
@UXUI 3 ай бұрын
제 피그마 커뮤니티에 이 파일을 올렸습니다. www.figma.com/community/file/1407153343702441763/3-2-ui
@마르코-w8d 3 ай бұрын
안녕하세요. 좋은 정보로 피그마 공부에 많은 도움이 되고있습니다. 한가지 궁금한게 이렇게 만든 파일을 네이버 스마트스토어 상세 페이지에 사용 가능 할까요?
@UXUI 3 ай бұрын
안녕하세요 네이버 스마트 스토어에 코드 삽입이 가능해서 될꺼 같아요. 그런데 제가 해본건 아니라 확실하지 않아요^^;; 영상 시청해 주셔서 감사합니다!!
@myid1973 3 ай бұрын
이전 ui화면을 사용하고 싶은데 변경이 가능한지? 어떨때는 새로운 ui, 어떨때는 이전 ui로 나오는데 변경하는 메뉴가 있을까요?
@UXUI 3 ай бұрын
안녕하세요. 내년까지 새로운 UI로 순차적으로 적용된다고 해요. 기다려야해요.ㅠㅠ 하지만 크롬 확장프로그램 UI3를 설치해서 인터넷으로 사용하는 방법이 있습니다. 영상 시청해 주셔서 감사해요^^
@진공청소기 4 ай бұрын
탭바는 어떻게 해야하나 혼자서 시도하다가 안돼서 난감 했는데 덕분에 잘 배워갑니다!! 감사합니다!!!!
@UXUI 4 ай бұрын
안녕하세요 진공청소기님~ ㅎㅎ 혼자 공부 하시는데 도움이 되서 다행이네요~ 피그마가 은근히 까다로워요. 공부하시면서 어려우면 언제든지 댓글에 남겨주세요. 영상 시청해 주셔서 감사합니다!!!
@축구왕슛돌이 4 ай бұрын
완성된 디자인은 어떻게 다운로드 하나요? jpg파일로 저장을 할수가 없는데 어떤식으로 해야하는지... 부탁드립니다!
@UXUI 4 ай бұрын
안녕하세요 lottiefiles.com 웹사이트에서 대시보드로 가서 애니메이션을 우측 상단에 download & export 아이콘으로 gif,mp4,webM,mov,lottiejson,dotlottie로 다운로드 가능합니다. 아쉽게도 로티는 벡터방식이라 jpg로 다운로드는 할 수 없습니다. 영상 시청해 주셔서 감사합니다.
@cloudi_a 4 ай бұрын
구구절절 긴 댓글이지만... 항상 일러스트레이터랑 포토샵으로만 독학 + 학원으로 쭉 작업해오다가 다 끝내고 현재 독학으로 포트폴리오 만드는 과정에서 남들과는 다르게, 흰 화면에 포폴만 딱 박힌 디자인보다는 조금 더 현대적이고 애플스러움이 들어간 글래스모피즘 아이덴티티로 포폴 만드려고 이곳저곳 찾아보고, 자료도 얼마 없어서 it 유튜버들 보면서 ui 대강 봐오다가 한국인이 말아주는.. 그것도 제가 찾던 영상..ㅜㅜ 감사합니다 피그마 단 한 번도 안 써보고 말로만 들었기도 했고 항상 한글판 정품으로만 써오다가 영어 피그마로 해서 우왕좌왕했지만 30분만에 전부 완성하고, 굉장히 초보자 관점에서도 이해할 영상 만들어주셔서 너무 감사합니다 ㅜㅜ 유용하게 잘 보았습니다!!!
@UXUI 4 ай бұрын
안녕하세요 cloudi님 이런 댓글 보면 힘이 납니다 ฅ(՞៸៸> ᗜ < ៸៸՞)ฅ 영상 시청해주시고 댓글도 정성스럽게 남겨주셔서 감사합니다. 취업 준비중이신가봐요. 포트폴리오 만드는데 도움이 되셨다니 ~제가 다 뿌듯하네요~~ 포폴 잘 만드셔서 좋은 회사에 취업하시길 바래요~(｡♥‿♥｡) 앞으로도 알차고 도움이 될 영상 제작하겠습니다. 무더운 여름 건강하시길 바랍니다!
@축구왕슛돌이 4 ай бұрын
미리보기를 활용해 재생하면 잘 되고있습니다 ㅎㅎ 그런데 이 파일을 어떻게 다운받죠? gif로 다운을 받을수 없는데 어떤 경로로 다운을 받아야 하나요ㅜㅜ
@UXUI 4 ай бұрын
안녕하세요 lottiefiles.com 웹사이트에서 대시보드로 가서 애니메이션을 우측 상단에 download & export 아이콘으로 gif다운로드 가능합니다. 영상 시청해 주셔서 감사합니다.
@user-sjkim 4 ай бұрын
저 3d 캐릭터 자주 보이는데 소스인가요? 어디서 찾으셨는지 궁금해요
@UXUI 4 ай бұрын
안녕하세요 여자 얼굴은 제 미모지입니다^^;; 아이폰의 미모지로 만들었어요. 피그마 커뮤니티에 다양한 3d 캐릭터 있습니다. www.figma.com/community/file/1138254942249677742/fluent-emoji-1 영상 시청해주셔서 감사합니다^^
@김지후-y4j 4 ай бұрын
하 저만 안돼나요 다따라했는데
@UXUI 4 ай бұрын
안녕하세요 지후님 어디에서 잘 안될까요?? 파일 공유해 주시면 코멘트로 알려드릴께요. [email protected]입니다.
@circlecos6361 4 ай бұрын
완전 초짜라서 엄청 기초가 필요했는데 너무나 도움이 되었습니다! 정말 감사합니다!
@UXUI 4 ай бұрын
오 도움이 되서 기뻐요~~ 로티크리에이터로 간단한 애니매이션을 쉽고 빠르게 만들 수 있더라구요~ 영상 시청해 주셔서 감사해요~~~~