피그마6 피그마 프로토타입 예제 - 슬라이드 배너 만들기(캐러셀 인터랙티브 컴포넌트) 드래그하면 옆으로 넘어가는 슬라이드 배너는 홈페이지의 메인에서 흔히 볼 수 있는 UI 이다. 이렇게 슬라이드 형태로 넘기는 UI를 캐러셀이라고 부른다. 이번 포스팅에서는 피그마로 캐러셀 배너 프로토타입 만드는 방법에 대해서 소개하려고 한다. 슬라이드 배너 프로토타입 만들기 먼저 피그마 파일을 하나 생성해서, 아래와 같은 구조의 디자인 시안을 만든다. 각 슬라이드가 보여지는 화면을 각각의 프레임으로 나누어 제작해야 한다. 디자인 요소들을 모두 만들었다면 첫번째 배너 이미지를 선택하고, 두번째 프레임으로 드래그한다. 인터렉션 디테일은 On drag, Smart animate, Ease in and out으로 지정한다. 애니메이션 속도는 300~500을 추천하는데, 본인 취향에 맞게 설정해 주면 된다. 나머지.. 2023. 3. 10. 피그마 프로토타입 (3) 애니메이션 설정하기 지난 포스팅에서 피그마 프로그램으로 웹 프로토타입 만드는 방법에 대해서 소개했었다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 2023.02.17 - [디자인/Figma] - 피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 오늘은 인터렉션 트리거, 액션 설정에 이어 애니메이션을 설정하는 방법에 대해서 알아보려고 한다. 피그마에서 제공하는 프로토타입 기능을 제대로 배워두면, 별도 프로토타입 제작 프로그램을 사용하지 않아도 충분히 멋진 ui 프로토타입을 만들 수 있다고 생각한다. 애니메이션은 아래와 같이 액션이 None 상태일때는 설정할 수 없다. (당연하잖아?) 어떻게 움직이게 할 것인지 선택을 해야 하단에 애니메이션 항목이 보여진다. 나는 액션을.. 2023. 3. 2. 피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 이전 포스팅에서 피그마 프로토타입 화면의 기본 구성에 대해서 설명했다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 이제부터는 프로토타입 메뉴의 설정 옵션들에 대해서 하나씩 자세히 설명하려고 한다. 예제가 필요할 듯 하여 빨간색, 노란색 박스가 들어있는 화면 두 개를 준비했다. 화살표 형태의 커넥션을 선택하면 인터렉션과 애니메이션을 설정할 수 있다. 이번 포스팅에서는 애니메이션은 제외하고, 먼저 Interaction details 부분에 대해서 살펴보도록 하겠다. 첫번째 On tap 이라고 되어 있는 부분은 '트리거' 라고 불리는데, 이 곳에서 클릭, 드래그, 마우스 오버와 같은 트리거의 종류를 선택할 수 있다. 트리거 종류별 움직임은 아래와 같다. Non.. 2023. 2. 17. 피그마 프로토타입 (1) 기본 화면 살펴보기 오늘은 피그마에서 프로토타입을 설정하는 방법에 대해서 포스팅해보려고 한다. 피그마 화면 우측에는 Prototype 탭이 있다. 프레임 두개를 생성한 후에 Prototype 탭을 선택하고 첫번째 프레임에 마우스를 올리니 아래 이미지처럼 포인트가 표시되었다. 첫번째 프레임의 포인트에서 두번째 프레임으로 드래그를 하면 아래 이미지와 같이 화살표와 함께 Prototype 탭화면에 여러가지 항목들이 생긴 것을 확인할 수 있다. 각 요소들에 대해서 좀 더 알아보도록 하겠다. 핫스팟 : 사용자의 인터렉션이 시작하는 위치이다. 커넥션 : 두 프레임 사이의 에니메이션, 인터렉션을 연결하는 화살표이다. 데스티네이션 : 변경된 결과 화면을 가리킨다. 그리고 커넥션(화살표)을 선택하면 Prototype 화면에 다양한 옵션이 .. 2023. 2. 16. 맥북 > 피그마(figma) 키보드 오류, 자음 모음 분리현상 해결 방법 얼마 전, 기존에 사용하던 맥북을 처분하고 Apple 2020 맥북 에어 M1을 새로 구입했다. 속도도 빨라지고 성능도 업그레이드 된 것이 체감되어 매우 만족하며 사용하던 중에 치명적인 문제를 발견했다. 피그마 앱을 실행하면 키보드 오류 - 자음 모음 분리현상이 나타나는 것이다. 솔직히 이 원인이 맥북 에어(M1) OS에 있는 것인지, 피그마 프로그램에 있는 것인지, 나는 잘 알지 못한다. 하지만 이전 기기를 사용할 때는 발생하지 않았던 일이라 매우 당황했고, 인터넷 검색을 해보니 이것은 피그마를 사용하는 맥북 유저들이 자주 겪는 증상이었다. → 원인을 알고 계신 분이 계시다면, 댓글 부탁드립니다🙏🏻🙏🏻🙏🏻 그래서 이 문제를 해결하기 위해 이것저것 찾아서 시도해 보았고, 그 중 몇가지 해결방법을 공유하려.. 2022. 1. 21. 피그마(Figma) 소개 & 다운로드 설치 방법 나는 요즘 피그마(Figma) 프로그램을 사용하여 디자인 업무를 하고 있다. 2년 전쯤 지인의 소개로 알게 되었는데 처음 사용해 보자마자 이 녀석의 매력이 흠뻑 빠져서 이제는 거의 베프와도 같은 없어서는 안되는 존재가 되었다. (완전 소중) 피그마는 UI 디자인 프로토타입 도구로 스케치(Sketch)나 어도비XD와 비슷한 툴이라고 생각하면 된다. 당연히 이 프로그램들을 이미 사용해 본 경험이 있는 디자이너들이라면 어려움 없이 빠르게 적응이 가능하며, 포토샵만 할 줄 알더라도 단축키 등 비슷한 부분이 많기 때문에 하루만 마음잡고 집중하면 어느정도 기본적은 스킬들은 모두 익힐 수 있을 것이라 생각된다. 장점이 많은 피그마(figma)를 여러 사람들과 공유하고 싶어서 오래 전부터 계획하고 있었지만, 이런저런 .. 2021. 7. 28. 이전 1 다음
