피그마 layout (2) 썸네일형 리스트형 피그마 7일차 - 플러그인 Break points를 이용한 반응형 웹사이트 만들기! 안녕하세요 시란입니다. 이번 시간에는 반응형 홈페이지를 쉽게 작업하는 방법을 알아보도록 하겠습니다. 먼저 준비물은 각 웹 홈페이지가 되겠습니다. 사이즈별로 desktop 버전, 모바일버전, 태블릿버전을 만들어줍니다. 그리고 버튼 배치나 아이콘 배치를 각각 해주면 됩니다. 저는 아래 사진과 같은 예시 페이지들을 가져왔습니다. 그리고 나서 반응형 페이지 작업을 쉽게 도와주는 breakpoints라는 어플을 설치하도록 하겠습니다. 현재 breakpoints는 유료네요. 이 breakpoints라는 플러그인은 우리가 지금 준비한(만든) 모바일화면, 태블릿 화면, 데스크톱 화면을 하나의 프레임으로 만들어서 해당 프레임의 크기를 변경하면 자동으로 모바일, 태블릿, 데스크톱으로 변경해줍니다. 무료버전 사용하기를 통해.. 피그마 6일차 - 피그마 필수 과정 Layout Grid 설정 안녕하세요 시란입니다. 레이아웃에 그리드 설정하는 방법을 알아보도록 하겠습니다. 먼저 레이아웃 그리드는 디자인을 할때 정렬 및 컴포넌트들을 배치하는데 도움이 됩니다. 디자인 할때 기본 구조 작업을 한다고 생각하면 편합니다. 다음번에 기회가 된다면 그리드 또는 작업선에 대해서 좀더 자세한 얘기를 해보고 싶네요. 일단 레이아웃 그리드를 만드는 방법에 대해서 알아보도록 하겠습니다. 자 먼저 데스크톱 프레임을 만들어줍니다. 작업 크기는 조금 변경해서 w, h 값을 1600과 2000으로 맞춰봅니다. 그리고 나서 프레임을 클릭한 후 우측 아래쪽 작업창을 보시면 layout grid 라는 항목이 있습니다. 해당 항목을 +를 눌러줍니다. 그럼 아래 그림과 같이 빽빽하게 그리드가 생성됩니다. 이 그리드는 우리가 원하는.. 이전 1 다음
