Тёмный

figma에서 스크롤 기능 구현하는 방법ㅣ 프로토타입핑 Part 3/4 

연정's Figma
Подписаться 27 тыс.
Просмотров 90 тыс.
50% 1

Опубликовано:

 

18 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 48   
@domagecom
@domagecom 8 месяцев назад
피그마 배우는 사람한테는 보석같은 영상입니다.
@ewzn-y7w
@ewzn-y7w 3 года назад
선생님 복받으세요!!!
@lifeis3000
@lifeis3000 3 года назад
스크롤링 간단하게 알려주 셔서 고마워요
@공인선-t9b
@공인선-t9b Год назад
징짜 최고에요...
@antiphramine
@antiphramine Год назад
지난 내용까지 세세하게 다시 설명하면서 진행해 주셔서 강의내용 따라가는데 쉽고 많은 도움이 됩니다.👍
@np4797
@np4797 3 года назад
가로스크롤 찾고있는데 강사님 정말 감사합니다!!!
@songji3342
@songji3342 3 года назад
차근차근 따라하니까 너무 쉽고 재밌어요 감사해요 연정님
@bandnell
@bandnell 10 месяцев назад
감사히 배워갑니다. 깨알 단축키 짱이예욧!
@ohh5833
@ohh5833 2 года назад
감사합니다. 계속 헷갈렸던 부분이있었는데 5:20부분에서 해결됐어요 이제 캐러셀만 남았ㅜㅜ흑..
@dev_jeongdaeri
@dev_jeongdaeri 3 года назад
정말 감사합니다!
@조수민-c9m
@조수민-c9m 4 года назад
와..너무 유용해요 영상 너무 감사합니다:)
@yeonjung-figma
@yeonjung-figma 4 года назад
시청해주셔서 감사합니다^^
@projectmanagerray9986
@projectmanagerray9986 2 года назад
설명 진짜 잘하고 차분한 목소리라 더 잘들리네요..ㅎ
@AshutosJain
@AshutosJain 4 года назад
정말 대단한 영상에요. 감사합니다 🙌
@yeonjung-figma
@yeonjung-figma 4 года назад
감사합니다~ ^^
@designzipshowkorea2746
@designzipshowkorea2746 3 года назад
잘보고있습니다
@user-jq8sz2dd9e
@user-jq8sz2dd9e 4 года назад
딱 지금 알고 싶던 내용이었어요, 감사합니다!
@yeonjung-figma
@yeonjung-figma 4 года назад
ㅎㅎ 이전 댓글들을 찾아보던 중이었는데 제가 답글찬스를 놓쳤었네요. 가장 많이 답글을 남겨 주셨더라구요. 감사합니다.♡
@user-jq8sz2dd9e
@user-jq8sz2dd9e 4 года назад
@@yeonjung-figma 아이고 좋은 영상 만들어 주셔서 감사하지요! 앞으로도 잘 부탁드립니다S2 힘힘!
@yeonjung-figma
@yeonjung-figma 4 года назад
내일 8시에 하나 올라갑니당. 하지만 이미 아는 내용 일수도~
@김주만-n9o
@김주만-n9o Год назад
잘 봤습니다. 감사합니다^^!
@녹아버린사과
@녹아버린사과 2 года назад
진짜 너무 감사합니다.
@projectmanagerray9986
@projectmanagerray9986 2 года назад
'컨테이너'와 '컨텐츠 프레임' 의 차이를 언급해주셨으면 더 좋을 거 같아요. 쉽게 말해서, 1, 2, 3, 4, 5, 6, 7, 8, 9 라는 숫자를 가로 스크롤링 할 때, 컨테이너는 1 ~ 5까지만 하고, 컨턴츠는 10까지 다 해놓아야 스크롤링 시 문제가 없다... 이런 내용요ㅎ
@인공눈물-f2b
@인공눈물-f2b 2 года назад
안된 이유가 그거였네요.. 영상이랑 저랑 조금 다른 것 같지만 저는, 세로스크롤에서 개체만들어서 오토레이아웃 2개잡고, 프레임 셀렉션 한담에, 2개 중 아랫부분을 더블클릭하여 Ctrl + D로 복사하여 주고 스크롤링 기능을 주었을 때 되더라구요. Clip Content 굳이 안줘도 되는 것 같더군요..!
@인공눈물-f2b
@인공눈물-f2b 2 года назад
연정님 그.. 이제 Auto Layout 적용안하고도, 그냥 Retangle 만들고나서 Frame Selection으로 영역지정만 하고, 가로/세로 스크롤 중 하나 지정 한다음에, 프레임 영역을 줄이면 스크롤이 적용 되더라구요. 저는 오토레이아웃 사례로 좀 어렵게 된 것 같던데, 허나 강의가 1년전이라 좀 다르게 바뀌었을 수도 있겠다는 생각은 듭니다. 결론은 좀 더 쉽게 스크롤이 구현이 가능할 수 있게 되었습니다.. 새싹 피그마러라 조금 해맸는데.. 이런 사례도 있었다는걸 참고해주시면 좋을 듯 합니다.
@yeonjung-figma
@yeonjung-figma 2 года назад
새싹 피그마러님, 안녕하세요. 참고 사례 공유 감사합니다. 말씀해주신 것처럼 하나를 만드는 데는 제가 알려드린 방법 외에도 다양한 방법이 있습니다. 더 쉽고 최적의 방법은 분명 존재할 수 있습니다. 시간이 지나면 프로그램이 개선이 되기도하고 더 좋은 방법이 나타나기 마련입니다. 그래서 저또한 한 사람의 영상만을 참고 하지 않습니다. 더 좋은 방법을 찾기위해 지금 처럼 다양한 방법을 시도해 보시고 저말고도 다른 사람의 방식도 참고해서 새싹 피그마러님의 방법을 찾아 가시길 응원합니다. 그게 제가 멈추지 않고 영상을 제작하는 이유이기도 합니다. 과거보다 더 좋은 방법이 있다면 기꺼이 공유드리기 위해서입니다. 새싹러님도 언젠가 저처럼 좋은 방법들을 유튜브를 통해 공유해 주시면 다른이들에게 도움이 될거 같습니다.
@yoni-ww9mg
@yoni-ww9mg 2 года назад
연정님, 저는 디자이너로 혼자 일하고있습니다. 보통 디자인을 먼저 다 하고나서, 프로토타이핑을할텐데 디자인 과정에서도 아트보드(프레임)는 딱 핸드폰스크린사이즈로 맞추고 아래로 그냥 오브젝트들을 프레임밖으로 빼서 작업하나요? 아님 프로토타이핑을 위한 작업으로 따로 두개 스크린을 만드는지..궁금해요 저는 보통 프레임을 길게 늘려서 작업하는데 보통의 다른 디자이너들도 이렇게 하는지 궁금해서 댓글 남깁니다!
@yeonjung-figma
@yeonjung-figma 2 года назад
시안 작업 시 프로토타입핑할 해상도(가로 375, 아이폰 기준)로 작업을 하고요~ 시안을 가지고 프로토타입핑을 바로 진행할 수 있으면 좋겠지만 특정 제약이 있는 경우가 발생해서 결국엔 별도의 프레임에 프로토타입핑 진행을 했던 경험이 있습니다. (ex. 시안을 수정이 용이하도록 레이아웃을 #frame이 아닌 오토 레이아웃으로 진행한 경우 > 스크롤 시 헤더나 푸터를 위 또는 아래쪽에 고정해 줘야하는 경우)
@bumang
@bumang 3 года назад
연정님!! 정말 많은 도움이 됐습니다! 그런데 별거 아닌데 궁금한게 있습니당.. 꼭 내용물을 프레임으로 만든 담에 CLIP CONTENT - SCROLLING 설정 해줘야 스크롤이 되더라구요!! 굳이 FRAME SELECTION 안 하고... 그냥 컴포넌트 상태에서 CLIP SELECTION - SCROLLING해도 되지않나? 해서 해봤는데 안 먹히네요. 음.. 프레임으로 만들어야만 스크롤링이 가능한게 맞을까요?
@yeonjung-figma
@yeonjung-figma 3 года назад
네 맞아요. 프레임 영역을 벗어났기 때문에 스크롤 해주는 것이기 때문이죠~ 이 경우 프레임이 곧 스크롤 영역입니다.
@bumang
@bumang 3 года назад
답변 감사합니다!!!! 정말 복받으실거에요ㅠㅠ🤗
@enjoydiscover
@enjoydiscover 7 месяцев назад
6:29 7:38 8:19
@eunyoungkim9878
@eunyoungkim9878 2 года назад
상단 고정 스크롤 관련해서 질문이 있는데요. 처음부터 상단에 위치한 요소를 상단에 고정시키는 것이 아니라, 특정 높이만큼 상단에서 떨어져 있는 요소가 스크롤 되어 상단 위쪽에 붙어지는 순간 부터 고정되는 형태는 구현이 가능한가요??
@dongdongsfilm
@dongdongsfilm 3 года назад
안녕하세요 강좌 너무 잘 봤습니다! 혹시 피그마에서 롤링 배너를 구현할 수는 없나요? 모바일 홈 메인에서 정말 많이 쓰는 배너인데, 좌우 스와이프 시 배너 단위로 넘어가는 걸 구현하고 싶어서요! 어떤 강의 참고하면 좋을까요? ㅠㅠ
@yeonjung-figma
@yeonjung-figma 3 года назад
안녕하세요. on click 이라는 프로토타입 기본 옵션 대신 after delay 라는 기능을 활용하시면 롤링 배너를 만드는 거 가능해요. 아쉽게도 저의 영상에서 다룬 적은 없습니다.😂
@gametallica
@gametallica 3 года назад
좋은 강좌 감사합니다! 그런데 가로 또는 세로 스크롤을 지정하려면 각 엘리먼트가 일단 콤포넌트가 되어 있어야 하는건가요? 예를 들어 단순히 텍스트박스 4개를 가로 배열 후 가로 스크롤하려면 안되는거죠?
@yeonjung-figma
@yeonjung-figma 3 года назад
컴포넌트로 만들지 않아도 스크롤은 가능해요. frame 안쪽 영역에 텍스트 박스를 가로로 배열하시면 됩니다. (텍스트 박스를 frame으로 감싸야 해요) 즉 frame 영역이 스크롤 영역입니다. 다만 텍스트 박스 내용이 frame 보다 작은 경우는 스크롤이 무의미 하겠죠~
@gametallica
@gametallica 3 года назад
@@yeonjung-figma 헐! 답변 감사합니다~ 즐거운 주말되세요~
@user-gy2yn2eq9m
@user-gy2yn2eq9m 9 месяцев назад
가로스크롤
@glee5709
@glee5709 3 года назад
강좌 항상 감사히 잘 보고있습니다. 궁금증이 하나 있는데 '3/4 세로 스크롤 기능' 까지 전부 따라해서 기능구현 했는데 밑까지 전부 스크롤했을때 하단 내비게이션에 가려져서 맨 밑에 있는 카드는 일부 가려지더라구요 그래서 임의로 카드프레임 길이를 살짝 늘렸는데 이 방법밖에는 없는 건가요?
@yeonjung-figma
@yeonjung-figma 3 года назад
아마 구현시에도 마찬가지로 마지막 카드에 하단 내비게이션보다 높이 큰 여백(eg. margin-bottom) 을 카드 밑으로 줄거에요.
@인공눈물-f2b
@인공눈물-f2b 2 года назад
왜캐 잘알려줘요
@dolzzi_official
@dolzzi_official 3 года назад
안녕하세요!ㅠㅠㅠ 혹시 시프트+a를 했을때 화면 구성이 바뀌는데 혹시ㅡ,, 바뀌지 않게 하는 방법은 없을까요? ㅠㅠ
@minguan2
@minguan2 3 года назад
스크롤이 부드럽게 넘어가는게 아니라 여러 카드형이 나열되어있다면 옆으로 스크롤 할 때 하나하나 락이 걸리듯이 멈춰지는 걸 할 수 있는 방법도 있을까요? (예를 들어, 페이에서 카드가 넘어가는 형식)
@yeonjung-figma
@yeonjung-figma 3 года назад
프로토파이로는 가능해요~
@ghg7569
@ghg7569 3 года назад
06:45
@chajenny
@chajenny Год назад
5:43 스크롤 영역 지정하는 방법, overflow hidden, 포토샵 클리핑마스크 처럼 숨겨지는 기능
@yeonjung-figma
@yeonjung-figma 4 года назад
*피그마 프로토타입핑 강좌 전체보기: designer-story.tistory.com/22 *Part 3 목차 0:32 1/4 스크롤 기능 구현을 위한 화면 배치 {팀 라이브러리 활용, 컴포넌트 활용, 오토 레이아웃 기능 활용, 기타 Tip} 5:23 2/4 가로 스크롤 기능(Horizontal Scrolling) 6:30 3/4 세로 스크롤 기능(Vertical Scrolling) 8:15 4/4 좌우상하 스크롤 기능(Horizontal & Vertical Scrolling)
Далее
БЕЛКА РОЖАЕТ? #cat
00:26
Просмотров 571 тыс.
Master Design Tokens - From Basics to Advanced
44:30
Просмотров 21 тыс.
【20min Tutorial】 Just follow it Figma UIUX Design
24:09