본문 바로가기

figma

(7)

[강의학습일지] Figma 활용법(2) 3주차 강의 프로토타입 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것Lo-fi(Low/High): 전체 흐름을 빠르게 맞춰볼 수 있는 수준. 와이어프레임. 피그마는 Lo-fi를 만드는데 특화됨Hi-fi(High Fidelity): 실제 제품과 거의 같거나 유사한 수준(사용자 대상으로 사용성 테스트, 제품 피드백 수집 가능)프로토타입을 만들거나 사용해 테스트하는것을 프로토타이핑이라고 함프리뷰 모드: Shift+Space문장으로 이해하면 편함: ~하면(조건,트리거) 어떻게(애니메이션) ~한다(액션) 1) 핫스팟(Hot Spot): 프로토타입을 시작하는 지점인터랙션(Interaction)에서 +를 클릭해도 OK 2) 커넥션(Connection): 화면을 서로 이어주는 연결선 3) 종착점(Destinatio..

[강의학습일지] Figma 활용법(2) 2주차 강의 다양한 환경에서의 UI 차이 UI는 기능과 목적이 중요하다 = UI 차이가 있다 = 목적에 차이가 있다 = UX에도 차이가 있다앱과 웹 둘 다 서비스를 하는 곳 비교해 보기주소입력해서 접근할 수 있는 화면들이 어떤 화면들인 가?거기에 사용자가 접근했을 때사용자를 어떻게 뒤로 돌려보낼지(ex. 잘못된 요청)오류처럼 받아들일 수이는 화면에 갈 수 없도록 대비하기 뒤로 가면 안 되는 화면에 뒤로 가기 접근하는 경우결제가 뒤로 가거나, 취소가 여러 번 돼서 서버에 문제가 되는 등 뒤로 가면 안 되는 화면 보호장치를 개발팀과 논의하기디자인 목적: 사용자가 더 편하고 수월하게 목적을 빠르게 달성할 수 있는 방향으로 수렴함웹이라고 반드시 메뉴가 상단, 앱이라고 하단이 아님! 디자인 목적을 생각해보기. 사용자가 편하..

[강의학습일지] Figma 활용법(2) 1주차 강의 컨테이너 컴포넌트 컴포넌트의 분류 6가지 중 하나합성 컴포넌트 (Compound Component)ex) 버튼은 이미 컴포넌트이지만 +폰트, 컬러, 여백 등등 만들어 다시 컴포넌트를 만듦팝업과 모달 팝업(Pop-up)일반적인 팝업의 뜻과 UI관점의 팝업은 다름 (회사/사람마다 부르는 이름이 다름)일반적 팝업: 현재 화면+새로운 화면모달(Modal)이름X, UI의 속성(팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등)어두운 화면: 뒤쪽의 화면이 멈추고 조작할 수 없음을 안내새로 떠있는 화면에만 시선을 집중시킴라이트박스(Lightbox) =스크림(Scrim), 딤드(Dimmed), 딤레이어(Dim Layer), 오버레이(Overlay)모달 UI를 사용할 때 어둡고 반투명한 층원래 있던 화면을 잠그고 사용..

[강의학습일지] Figma 활용법(1) 4주차 강의 컴포넌트 모양보다 기능이 중요함 (모양보다 무엇을 하는지 정의에 집중!)Action : 사용자가 중요한 행동을 수행할 때 (ex. 버튼)Input : 사용자의 입력을 받을 때 (ex. 텍스트 필드)Information : 사용자에게 서비스의 상태나 안내 사항을 전달할 때Container : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트Navigation : 사용자가 페이지를 이동할 때Control : 사용자가 설정이나 값을 수정할 때컴포넌트 1. 의사상태 버튼의 기본값에 (~했을) 때 (~)이 변하는 것Hover (마우스가 올라갔을 때)Pressed (눌렀을 때)Active VisitedLinkFocusCheckedDisabled컴포넌트 2. 마스터 컴포넌트와 인스턴스 원본: 마스터 컴포넌트..

[강의학습일지] UXUI 디자인 입문 4주차 숙제 - 피그마 프로토타입 만들기 1. 장바구니 화면의 Button/Menu 버튼 클릭> 메뉴 화면으로 이동(Navigate to)- 메뉴 화면이 흐린 상태에서 진해지며 노출 (Dissolve) 2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동 (Navigate to)- 장바구니 화면이 흐린상태에서 진해지며 노출 (Dissolve) 3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동 (Navigate to)- 상세 화면이 장바구니 화면 위로 밀어 들어오며 노출 (Move in) 4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동(Navigate to)- 상세 화면이 밀려나가며 아래로 장바구니 화면이 노출 (Move out)

[강의학습일지] Figma 활용법(1) 2, 3주차 강의 프레임과 그룹 그룹: 코드 블록 X, 개체를 묶을 때 사용(디자인 복잡한 그래픽). 그룹 내 개체가 따로 지정 X (같이 움직임)프레임: 코드 블록 O, 각각 블록 따로 지정 O (모든 것이 별개인 상태) 프레임그룹용도피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체다른 개체나 프레임을 넣을 수 있어서 컨테이너(Container)라고도 부른다.디자인을 정리하는 편의성을 위해 사용디자인이 복잡하거나 그래픽이 필요할 때 사용여러 요소를 한번에 컨트롤할때 사용코드인식코드 블록으로 인식 가능코드블록으로 인식하지 않음묶기묶을 프레임 선택 후 Frame selection (Ctrl+Alt+G)묶을 개체 선택 후 Group Selection (Ctrl+G)개체변경(스타일/크기)스타일 적용 시에 프..

[강의학습일지] Figma 활용법(1) 1주차 강의 UXUI 디자이너에게 가장 중요한 것1. 사용자의 문제를 해결해주려고 하는 끈기와 집요함2. 논리적으로 생각할 수 있는 것2-1. 상대방에게 설명, 설득할 수 있어야 함2-2. 상대방이 나와 다른 이야기를 했을 때 합리적이라면 수용할 수 있는 열린 사고3. 우리 웹사이트 들어오는 사용자들에 대한 관심, 애정 제품 제작 과정아이데이션 - 와이어프레임, 플로우차트 - UI 설계, 디자인 시스템 - 프로토타이핑 - 개발 핸드오프Figma 둘러보기Drafts (연습파일): 커뮤니티에서 가져온 파일도 여기에 저장됨Tab (탭): 전환하기 Ctrl+Shift+[/]Import (불러오기): .fig 확장자 파일 불러오기Community (커뮤니티): 가격, 저작권 확인하기 (검증된 플러그인 사용)Figma 디자인..

이전 1 다음

티스토리툴바