반응형
피그마 프로토타입 실습! TIL 첼린지 7일차!
shift + R = 눈금자 표
아이콘 만들 때 투명 프레임(4의 배수 크기) 안에 넣어서 만듬
간격보기 Alt 누르고 다른 개체에 마우스 올리기
개발자 일 하는 방식 알기
1. 영역 잡기
피그마 기반 모바일 UI 기획 설계
- 테스트 디바이스를 선정항 향후 UI 디자인 제작 시 대표가 되는 디바이스 사이즈를 선정
- 테스트 디바이스와 피그마와 연동하여 실제로 작동하는 모습을 테스트
- 디바이스 선정
- 디바이스 표준 해상도 선정
- sratcounter에서 디바이스, 나라, 기간을 기준으로 디바이스 해상도 점유율 확인 가능
- 피그마에서 테스트 디바이스에 적합한 Frame 제작
- 프로토타입 제작
- 테스트 디바이스에서 테스트
4px 그리드
4px 그리드란?
4의 배수로 간격을 통일시키는 것
4px 그리드의 사용 이유
다양한 배율(0.5x, 1.5x ...)에서의 Export 할 때 픽셀 틀어짐을 방지
필요에 따라 그리드 확장 및 축소하여 디바이스 크기와 해상도에 적용 가능
개발자가 디자인을 구현할 때 일관성 유지 및 오류를 줄일 수 있음
4px 그리드를 사용하지 않았을 때의 문제점
Export 할 때 픽셀 틀어짐과 소수점이 발생하여 개발자 업무에 지
피그마 프로토타입
- 프로토타입
- 프로토타입은 디자인 아이디어를 각적으로 나타내는 모델
- 주로 개념적인 시각화와 사용자 경험 시뮬레이션에 사용
- 디자인의 초기 아이디어를 시각적으로 공유하고 검증하는 데 중점
- 프로토타이핑
- 프로토타이핑은 실제 화면 디자인을 생성하고 사용자 인터페이스( UI)를 구축하는 과정
- 실제 디자인 요소와 상호작용을 나타내며, 디자인을 실제로 구현하는데 중점
- 사용자에게 실제 화면을 보여주고 디자인 아이디어를 구체화하고 테스트하는데 사용
shift + Space = 프리뷰
피그마 커뮤니티 & 헬프센터 & 플러그인
피그마 커뮤니티에서는 다양한 템플릿, 피그마 파일 등을 볼 수 있고
헬프센터에서는 피그마의 자세한 사용법을 익힐 수 있다.
그리고 플러그인은 업무 효율을 높여줄 수 있는 기능인데 아래의 플러그인은 많은 사람들이 사용하는 플러그인이다.
1. Iconify
2. Meterial Design Icon
3. Unsplash
반응형