본문 바로가기

UXUI 스터디/Figma 배우기6

[Figma] 윈도우 녹화 기능 및 GIF로 프로토타입 영상 만드는 방법 프로토타입을 만들다 보면어떻게 돌아가는지 녹화를 해야할 경우가 많이 있습니다.처음엔 저도 어떻게 하는지 잘 몰라서 찾아보다가제가 하는 방법을 소개해드립니다. 우선 윈도우 녹화 기능은 키보드의 윈도우키win+G로 열 수 있습니다.두개의 키를 누르면 아래와 같은 화면이 나옵니다.캡처라고 써있는 창에 동그란 버튼, 녹화버튼을 누르면 녹화가 시작됩니다. 버튼을 누르지 않고 바로 녹화를 시작할 수도 있습니다.win+alt+G를 누르면 바로 녹화가 시작됩니다. 이렇게 만들어진 파일은 보통 내PC > 동영상 > 캡처 파일에 저장이 됩니다. 저장된 파일 mp4를 그대로 활용하셔도 되지만,15초의 짧은 영상의 경우 GIF로 만들 수도 있습니다.윈도우에서 기본으로 사용할 수 있는 Clipchamp로 간단하게 편집을 합니다.. 2024. 6. 20.

[UX/UI 디자인입문] 피그마로 간단한 프로토타입 만들어보기 UXUI 디자인 입문 4주차 과제- 피그마로 간단한 프로토타입 만들어보기 이번 과제는 피그마로 프로토타입 만들기이다.앞선 과제들이 머리를 많이 쓰는 거여서 시간이 오래 걸렸었는데,애니메이션을 추가하는 심화과정까지간만에 빠르고 간편하게 과제를 완성했다. 1. 장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동 + 화면이 흐린 상태에서 진해지며 노출되도록 > Dissolve 2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동 + 장바구니 화면이 흐린 상태에서 진해지며 노출되도록 > Dissolve 3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동 + 상세 화면이 장바구니 화면 위로 밀어 들어오며 노출되도록 > M.. 2024. 6. 4.

[Figma] 프로퍼티, 배리언트 적용하는 방법 피그마 프로퍼티, 배리언트 적용하는 방법 프로퍼티, 베리언트 방법이 너무 헷갈리고 어려워서 좀 더 공부해보면서 정리해보았다. - 프로퍼티 (속성): 디자인 구조가 바뀌지 않는 선에서 (파운데이션 값이 바뀌지 않는) 변경되는 요소를 다룰 때아이콘 변경이 대표적인 예시이다. - 배리언트 (변화): 컴포넌트의 가상의 상태를 만들 때 사용S/M/L사이즈의 변화나 Default, Hover, Click 등의 상태로 바꿀 때 사용한다. 이 속성을 조정해서 다양한 조합의 인스턴스를 손쉽게 조정할 수 있다.안에 글자도 쉽게 바꾸고, 다른 아이콘으로도 바꾸고, on.off도 버튼으로 조정할 수 있다. 프로퍼티 종류 중 하나가 배리언츠로 볼 수도 있다. 프로퍼티 ⊃ 배리언츠, 불리언, 인스터스 스왑, 텍스트하지만 별.. 2024. 5. 31.

[Figma] 피그마로 포트폴리오 템플릿 만드는 방법 오늘은 PPT보다 쉬운 피그마 마지막 과제로포트폴리오 템플릿 만드는 방법을 알아보겠습니다. figma에는 Community라는 공간이 있는데, 여기서 다양한 템플릿들을 구할 수 있습니다.메인 화면에 좌측하단에 Explore Community를 클릭합니다 검색 창에 Portfolio로 검색을 해서 마음에 드는 템플릿을 선택합니다.* 여기서 우측 하단마다 있는 하트와 사람 아이콘 옆에 숫자가 클수록 좋은 템플릿이 많습니다! Open in Figma를 눌러 템플릿을 열고 자유롭게 수정해봅니다. - 유용한 피그마 플러그인 Mock up - 아이폰, 노트북 등 Mock up 만들기 Mockup Plugin – Devices Mockups, Print Mockups, AI Mockups | F.. 2024. 5. 9.

[Figma] 클릭하면 이동하는 피그마 프로토타이핑 만드는 방법 오늘은 PPT보다 쉬운 피그마 강의 3주차 과제로클릭하면 이동하는 피그마 프로토타이핑 만드는 방법에 대해 설명해보겠습니다. 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것입니다. 우선 연결될 화면들을 준비합니다. 프레임을 선택한 후, 우측에 프로토타입을 눌러줍니다. 프레임의 가장자리에 마우스를 갖다대면 각 변 마다 점이 생깁니다 오른쪽 점을 드래그를 하면 화살표가 생기는데, 이것을 옆에 프레임으로 가져갑니다 여기서 파란색 점을 핫스팟이라고 하고, 인터렉션이 시작되는 위치입니다.화살표가 있는 선은 커넥션 라인이라고 하고, 두개 요소 사이의 연결선으로.. 2024. 5. 2.

[Figma] 피그마 플러그인을 활용한 유저 플로우 만드는 방법 PPT보다 쉬운 피그마 강의를 들으며 1주차 과제로피그마 플러그인을 활용하여 유저 플로우 만드는 방법에 대해 설명해보겠습니다. 우선 피그마 (https://www.figma.com/)를 열고, 로그인을 합니다. 왼쪽 상단에 피그마 로고, Move tool 옆에철망 같이 생긴 이 아이콘을 누르고, 드레그하여 프레임을 만듭니다.크기는 자유롭게 만듭니다. 저는 1000*1080 크기의 프레임을 만들어보았습니다. 다음은 네모 별 마름모로 이루어진 이 아이콘을 누르고상단 메뉴에 있는 components 옆에 plugins을 누릅니다. 검색 창에 Flow Chart 라고 쳐주면 나오는 아래와 같은 플러그인을 선택합니다. 클릭을 하면 아래와 같이 다양한 도형이 뜨게 됩니다. 예시와 같이 각이 둥근 사.. 2024. 4. 25.

이전 1 다음

728x90

티스토리툴바