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