피그마로 레이아웃 그리드 설정하는 방법 - 피그마 강좌 1-4
HTML-код
- Опубликовано: 29 апр 2024
- 안녕하세요! 이번 강의에서는 디자인 도구에서 사용되는 레이어, 그룹, 프레임, 섹션, 페이지 등의 핵심 개념들을 심층적으로 다룹니다. 초보자부터 숙련된 사용자까지, 누구나 쉽게 이해하고 실제 작업에 적용할 수 있도록 구성하였습니다.
레이어: 디자인의 기본 구성 요소로, 다양한 요소들이 층층이 쌓여서 최종 이미지를 형성합니다. 레이어의 순서를 조정하여 요소들의 앞뒤 관계를 쉽게 조절할 수 있습니다.
그룹: 여러 레이어를 하나의 단위로 묶어 빠르게 선택하고 조정하는 기능입니다. 그룹화 및 그룹 해제 방법도 소개합니다.
프레임: 화면의 틀을 설정하여 인터페이스 디자인을 구성하는 방법을 배웁니다. 다양한 해상도의 프레임을 쉽게 생성하고 수정할 수 있습니다.
섹션: 프레임을 포함할 수 있는 더 큰 단위로, 디자인을 체계적으로 관리할 수 있게 해 줍니다.
페이지: 하나의 파일 내에서 여러 디자인 요소를 체계적으로 관리할 수 있는 고급 기능으로, 큰 규모의 프로젝트에서 특히 유용합니다.
이 강의를 통해 기본적인 레이어 관리부터 고급 프레임 및 페이지 관리까지, 디자인 도구의 모든 기능을 마스터할 수 있습니다.
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ / @designbase
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 공식 웹사이트 : designbase.co.kr/
감사합니다 생명의 은인이세용
감사합니다 :)
열심히 배워볼게요 ! 감사합니다.
너무 좋은 영상이네요! 감사합니다!!
감사합니다~!ㅎㅎ
피그마 처음인사람한테 너무 도움됩니다. 응원할게요
감사합니다ㅎㅎ
반응형에서 칼럼 기능
stratch type 3:59 (거터값은 고정이나, 칼럼 영역이 디스플레이 사이즈에 따라 늘어나는 기능)
컨테이너 폭 고정 4:26 (width가 빨간색 컬럼 부분에 해당하는 값)
그리드도 스타일로 관리 가능 6:09 (자주쓰는 그리드는 스타일화 해두는게 편함)
그리드 스타일 수정하기 6:45
좋은 영상 감사합니다👍👍👍
우와 피그마도 처음이고 웹 관련 공부 하려고 배웠는데 이해가 잘돼요!
정주행 갑니다😊
설명 잘하시네요 ㅎㅎ
감사합니다 :)
좋은 영상 고맙습니다 컬럼에 대한 질문이 있는데 디자인 하면서 6단 4단 어떤 차이가 있나요?
그리드를 사용하냐 마냐의 차이만 있고, 모바일 기준으로 4, 6단의 큰 차이는 없습니다. 3단 그리드를 자주 사용하는 경우라면 디자인과 개발을 편하게 하기위해 추가하는 것이라서요.
그리고 디자인 하면서 컬럼 값이나, 아이콘 디자인 그리드 값 같은건 어떻게 아는걸까요?
아이콘 그리드값은 머티리얼 디자인 가이드에 아이콘 확인하시면 됩니다. uxui 강의에서 짧게나마 다루고 있으니 관심있으시면 시청 부탁드릴게요~!