피그마매뉴얼4 피그마 프로토타입 (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) 다각형 그리기 피그마(figma)에서 다각형을 그리는 방법에 대해서 포스팅하려고 한다. 먼저 피그마의 디자인 파일을 열고 도형 > Polygon을 선택한다. 크기는 나중에 조정해주면 되니까 적당히 위치를 잡아서 마우스로 드래그 한다. 삼각형이 그려진 것을 확인할 수 있다. 이 때 쉬프트(shift) 키를 누른 채로 드래그하면 정삼각형을 그릴 수 있다. 만약 그리고 싶은 것이 정다각형이라면 처음부터 정삼각형을 그리는 것이 유리할 것이다. 해당 도형을 선택하고 우측의 Design 패널을 확인하면 X, Y, W, H의 수치가 표시되어 있는 부분 아래에 '3' 이라는 숫자가 보일 것이다. 3이라는 숫자는 이 도형의 변의 갯수를 의미한다. 삼각형 변의 갯수는 3개이니까 3이라고 표시되어 있는 것이다. 이 부분의 숫자를 그리고 .. 2022. 6. 16. 이전 1 다음
