피그마 (5) 썸네일형 리스트형 피그마 7일차 - 플러그인 Break points를 이용한 반응형 웹사이트 만들기! 안녕하세요 시란입니다. 이번 시간에는 반응형 홈페이지를 쉽게 작업하는 방법을 알아보도록 하겠습니다. 먼저 준비물은 각 웹 홈페이지가 되겠습니다. 사이즈별로 desktop 버전, 모바일버전, 태블릿버전을 만들어줍니다. 그리고 버튼 배치나 아이콘 배치를 각각 해주면 됩니다. 저는 아래 사진과 같은 예시 페이지들을 가져왔습니다. 그리고 나서 반응형 페이지 작업을 쉽게 도와주는 breakpoints라는 어플을 설치하도록 하겠습니다. 현재 breakpoints는 유료네요. 이 breakpoints라는 플러그인은 우리가 지금 준비한(만든) 모바일화면, 태블릿 화면, 데스크톱 화면을 하나의 프레임으로 만들어서 해당 프레임의 크기를 변경하면 자동으로 모바일, 태블릿, 데스크톱으로 변경해줍니다. 무료버전 사용하기를 통해.. 피그마 6일차 - 피그마 필수 과정 Layout Grid 설정 안녕하세요 시란입니다. 레이아웃에 그리드 설정하는 방법을 알아보도록 하겠습니다. 먼저 레이아웃 그리드는 디자인을 할때 정렬 및 컴포넌트들을 배치하는데 도움이 됩니다. 디자인 할때 기본 구조 작업을 한다고 생각하면 편합니다. 다음번에 기회가 된다면 그리드 또는 작업선에 대해서 좀더 자세한 얘기를 해보고 싶네요. 일단 레이아웃 그리드를 만드는 방법에 대해서 알아보도록 하겠습니다. 자 먼저 데스크톱 프레임을 만들어줍니다. 작업 크기는 조금 변경해서 w, h 값을 1600과 2000으로 맞춰봅니다. 그리고 나서 프레임을 클릭한 후 우측 아래쪽 작업창을 보시면 layout grid 라는 항목이 있습니다. 해당 항목을 +를 눌러줍니다. 그럼 아래 그림과 같이 빽빽하게 그리드가 생성됩니다. 이 그리드는 우리가 원하는.. 피그마 4일차 - 컴포넌트 개념 및 애니메이션 효과 ..2 저번 포스팅에 이어 이번에도 컴포넌트 작업과 애니메이션 효과를 표현해보겠습니다. 자 여기까지 지난 작업 내용이였어요. 이 만든 버튼을 컴포넌트화 시켜보겠습니다. 먼저 만든 버튼을 마우스 드래그 해서 선택합니다. 그리고 나서 메뉴의 빨간 사각형 부분을 클릭해줍니다. 그러면 왼쪽 작업 화면이 변화된 것을 확인할 수 있습니다. 자세히 보시면 아이콘도 변경되었어요. 바로 컴포넌트화 되었다고 할수 있습니다. 이제 이 컴포넌트의 variant를 추가해보겠습니다. 아래 화면처럼 해당 버튼을 누르면 됩니다. 버튼을 누르면 아래처럼 우리가 만든 버튼 모양이 하나 더 생기게 됩니다. 이런식으로 + 버튼을 눌러서 새로운 variant를 추가시킬 수 도 있습니다. 여기까지 잘 따라하셨죠? 이제는 두번째 버튼의 색을 변경해봅시.. 피그마 3일차 - 컴포넌트 개념 및 애니메이션 효과 ..1 안녕하세요 시란입니다 . 이번시간엔 피그마의 꽃이라 할수있는 컴포넌트의 개념에 대해서 알아보고 프로토타입 탭을 통한 애니메이션 효과를 주는 방법에 대해 알아보겠습니다. 피그마는 컴포넌트 개념을 통해서 내가 만든 UI/UX가 어떻게 동작하는지 정확하게 동료들에게 보여줄 수 있겠죠? 예를 들어 버튼을 클릭했을 때 색깔이 변했으면 좋겠다. 또는 버튼을 클릭했을때 다른곳으로 이동하면 좋겠다. 등등이 있겠죠? 물론 말로 설명해도 좋지만 직접 보여준다면 그보다 더 효과적인 의사소통이 없겠죠? 이런 애니메이션 효과와 인터렉션효과를 줄수있는 부품, 요소들을 만들어서 여러 페이지에 사용할 수 있는 작업을 하면 됩니다. 컴포넌트란 간단하게 말하면 부품이라는 의미이며, 부품 틀을 만들어서 해당 부품들을 찍어낸다 생각하시면 .. 피그마 2일차 - 에디터를 활용한 카드 UI 만들어보기 안녕하세요 시란입니다. 이번시간에는 앞서 배운 에디터를 이용해서 카드UI를 만들어보겠습니다. 우리가 직장에서 일하다보면 카드뉴스라던지 카드콘텐츠들을 많이 보거나 받아보셨을꺼에요 이번시간에는 에디터를 활용해서 웹사이트에서 볼법한 콘텐츠 카드를 한번 만들어보겠습니다. 먼저 pixabay를 통해서 무료사진을 하나 가져왔습니다. 이 사진을 가져올 프레임을 먼저 만들어야겠죠? 프레임 크기는 240 x 400으로 만들어줍니다. 오른쪽에 W와 H값을 변경하면 240x 400 사이즈로 제작 가능하겠죠? 카드의 배경이 될 프레임의 색상은 FFFFFF로 고정합니다. 오른쪽 메뉴중 FILL부분을 수정하면 되겠죠? 그리고 카드 이미지의 모서리를 둥글게 만들어주겠습니다. 마찬가지로 오른쪽 메뉴에서 아래와 같이 라운드 입력란을 .. 이전 1 다음
