캔버스 정리
유아이 플로우 디자인 합니다.
송금 유아이 플로우를 원본 파일을 참고합니다.
총 5개 프레임으로 이루어진 플로우 입니다.
가이드는 필요 없으니 숨김처리 합니다.
shift r
아이콘을 모아둔 프레임은 이제 필요 없습니다.
숨김 처리 합니다.
유아이 플로우 설계 합니다.
모든 페이지가 필요하지는 않습니다.
모달 형태로 사라지는 유아이도 필요 합니다.
플로우를 유심히 지켜보며 유저 입장에서 가장 편리한 유아이를 설계 합니다.
flow1
이미 완성입니다.
flow2
이미 완성입니다.
flow3
디자인 시안 참고해서 모달 하나 그립니다.
프레임 레이어 최하단에 배치 합니다.
모달 상단 라운드 처리 합니다.
쉐도우 스타일 적용 합니다.
캔버스 - 프레임 셀렉
프로퍼티 - 디자인 - 필 - 오른쪽 마이너스 유아이 탭
필칼라가 없음 처리 됩니다.
프레임 백그라운드 투명은 이렇게 처리 합니다.
캔버스 - 프레임 셀렉
프로퍼티 - 디자인 - 프레임
우측 상단 리사이즈투핏 유아이 탭 합니다.
프레임 스케일이 엘레멘트 사이즈에 딱 맞게 변경 됩니다.
프로퍼티 - 디자인 - 프레임
스케일 체크하면 위스가 360 보다 커지는 경우도 있습니다.
왜냐하면 엘레멘트가 영향을 끼쳤기 때문입니다.
이런 경우 다양한 해결 방법이 있을 수 있습니다.
프레임 위스 재조정
툴바 - 레이어
현재 프레임 네임 제외한 내부만 전체 셀렉합니다.
우클릭 - 프레임 셀렉션
현재 프레임 내부에 하나의 프레임이 생성되었습니다.
이것을 현재 프레임 밖으로 꺼냅니다.
비어 있는 현재 프레임은 삭제 합니다.
새 프레임을 flow3로 프레임 네이밍 합니다.
물론 제일 좋은 방법은 처음부터 이런 일을 만들지 않는 것입니다.
flow4
flow3 페이스트 합니다.
레퍼런스 참고해서 유아이 수정 합니다.
flow5
레퍼런스 참고해서 디자인 합니다.
모든 프레임을 센스있게 디스플레이 합니다.
코워킹 하는 경우 여러 상황을 고려하여 자리를 배치해야 합니다.
최대한 직관적으로 배치 합니다.
'Figma - project' 카테고리의 다른 글
| 14 책상 정리 / 자원관리 (0) | 2026.04.19 |
|---|---|
| 13 요소를 프레임으로 만들기 / 키패드 가져오기 / 프레임을 콤포넌트로 만들기 (0) | 2026.04.19 |
| 11 프레임 복사해서 새프레임 만들기 / 텍스트 스타일 등록 (0) | 2026.04.19 |
| 10 그림자 효과 스타일 등록 하기 / 컴포넌트 그룹 관리 (0) | 2026.04.19 |
| 9 파일 히스토리 사용법 / 파일 버전 관리 방법 (1) | 2026.04.18 |