[피그마] Constraints로 디바이스에 따라 유연하게 반응하는 디자인 만들기
HTML-код
- Опубликовано: 6 фев 2025
- 피그마] Constraints로 디바이스에 따라 유연하게 반응하는 디자인 만들기
다양한 디바이스에 대응하는 반응형 레이아웃 디자인을 해야 될 때 오브젝트를 효율적이고 배치하고 이동해서 유동적으로 디자인하기 편리한 기능입니다.
0:20 Constraints 설정 전 주의사항
0:50 Horizontal Constraints (수평통제)
1:32 Vertical Constraints (수직통제)
2:14 Constraints 설정 전의 주의사항
2:22 Constraints 무시
2:37 Status Bar의 Constraints 설정
4:13 Navigation bar의 Constraints 설정
5:12 Tab Bar의 Constraints 설정
7:00 FAB 의 Constraints 설정
8:20 Signup Screen의 Constraints 설정
#피그마강좌 #Constraints #반응형디자인 #피그마컨스트레인트 #피그마툴기능설명 #figma #UXdesign #UIdesign
-----------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너 등을 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일(lucymygirl@naver.com)로 해주세요. 영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!
Hello ~
Welcome to The UXUI Design Channel.
This channel offers UXUI design, Figma, Photoshop, Illustrator, HTML, CSS, data driven , GA.
I'm interested in design tool review, design book review ... and more fun reviews.
Contact me: lucymygirl@naver.com
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
© 루씨의 UXUI 디자인. ALL RIGHTS RESERVED.
본 영상으로 강의, 영상 추출, 참고 영상으로 링크 제공 등 금지합니다.
![[피그마] 핀터레스트의 Masonry Layout 만들기](http://i.ytimg.com/vi/m-JByaEe4sk/mqdefault.jpg)
![[피그마] 핀터레스트의 Masonry Layout 만들기](/img/tr.png)
![[피그마] 인터랙티브 컴포넌트와 오토레이아웃을 활용한 캘린더 UI 만들기](http://i.ytimg.com/vi/M6YY5AyIv4o/mqdefault.jpg)
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
탭바는 어떻게 해야하나 혼자서 시도하다가 안돼서 난감 했는데 덕분에 잘 배워갑니다!! 감사합니다!!!!
안녕하세요 진공청소기님~ ㅎㅎ
혼자 공부 하시는데 도움이 되서 다행이네요~ 피그마가 은근히 까다로워요. 공부하시면서 어려우면 언제든지 댓글에 남겨주세요.
영상 시청해 주셔서 감사합니다!!!
설명 너무 잘해주셔서 한번에 이해돼요! 감사합니다!!
이해가 잘 되었다니 다행이에요!! 영상 시청해 주셔서 감사합니다^^
감사합니다
영상 정주행 감사합니다!!!
구세주……ㅠㅠㅠㅠ 감사합니다. ㅠㅠㅠㅠㅠ 절 받으십셔……
제가 더 감사합니다😍👍 다음 영상도 기대해주세요~~~
피그마 강의 참고할것도 많고 많은 도움이 되었습니다 :)
한가지만 더 말씀드리자면 영상만드실 때 볼륨을 조금만 더 올려주시면 좋을 것 같아요!
네 .. 제가 영상편집을 못해서요 흑흑.ㅠ.ㅠ 볼륨 신경써서 제작 할께요.
영상 봐주셔서 감사합니다^^
이해 잘 되네요 감사합니다~~!!
감사합니다^^ 다음 영상도 기대해주세요~~
선생님 프레임 자체는 반응형으로 선택할 수 없는거죠? 일단 w값에 100%라고 쓸 수 없길래, FHD 사이즈로 만들었는데 프로토타입을 노트북에서 재생하면, 스크롤이 생겨서 보기 힘드네용 ㅠ
제 디자인을 노트북으로 보던지, PC 모니터로 보던지 같은 디자인으로 볼 수 있게 하는 방법은 없나요?
w에 %단위는 아직 안되네요. ㅠ.ㅠ %가 된다면 정말 좋을 듯 한데.. 저도 코딩으로 할 때 다시 변환해야 되서 불편 하더라구요. 영상 시청해주셔서 감사합니다!!!
presentation mode - fit width/fill screen 으로 조정하시면 모니터 사이즈에 맞게 줄이거나 늘여서 볼 수 있어요^^
안녕하세요 루씨님! 영상 너무 잘 봤습니다! 제가 소기업에 uiux디자이너가 된지 두달밖에 안됐는데 사수가 없어요ㅠㅠ 혹시 업무를 시작할 때부터 어떤 세팅으로 시작하고 업무를 하는 기본적인 과정을 담은 영상을 만들어주실 수 있나요? 일은 유출되면 안될테니 예시라도... 제가 공부를 하면서 일을 하는 중인데 너무 막막하고 컴포넌트, 나인패치, 퍼블이나 프론트개발자님께 파일전달 시 png? psd? 어떤 확장자로 등등,, 이론으로만 이해하지 실제 업무로서 어떻게 적용하고 진행하고 왜 그렇게 해야 하는지 이해를 못하면서 하는 중이라 이게 맞는 건지 모르고 하고 있어요.... 영상이 어렵다면 신입들에게 팁이라도 부탁드립니다ㅜㅜㅠㅠㅠ
안녕하세요~ 우선 시청해 주셔서 감사드려요^^ 제가 어떤 부분을 도와드리면 좋을까요? 제 메일로 lucymygirl@naver.com 으로 당장 빨리 알고 싶은 부분을 적어서 메일 주시면 영상으로 제작하거나 메일로 답변 드리겠습니다. 즐거운 주말 보내세요^^
첫부분 대타이틀 오타있어요^^;; Constaints -> Constraints
^^;; 그러네요 ㅠ.ㅠ 영상이라 수정도 못하네요.. 시청해주셔서 감사합니다!!
🙈🙉🐵
😀