워밍업으로 아주 간단한 패션앱을 디자인해 보겠습니다.
이번 실습은 레퍼런스를 그대로 재현하는 것을 목표로 합니다.
완성 프랙티스 미리 보기
https://lshjju.tistory.com/1028
Fashion app
2036 Look book App design Project viewhttps://www.figma.com/design/XaYdHhe4j7eCYumRdcGOlU/Fashion-app?node-id=2003-26&t=spTywCQhBlcLhuMm-1 FigmaCreated with Figmawww.figma.com Prototype viewhttps://www.figma.com/proto/XaYdHhe4j7eCYumRdcGOlU/Fashion-app?nod
lshjju.tistory.com
Refenece
이번 실습 진행할 레퍼런스입니다.
레퍼런스를 아래 코드카드에서 이미지를 다운받거나 아래 파일로 다운받으세요.
https://kr.pinterest.com/pin/849421179695006375/
https://kr.pinterest.com/pin/849421179695006375/
kr.pinterest.com
새파일 만들기
피그마 설치하고 새 파일 하나 만듭니다.
https://lshjju.tistory.com/1018
Figma start index
피그마 설치하고 새 파일까지 만들어 봅니다.https://lshjju.tistory.com/1003 UI 디자이너가 피그마를 반드시 사용해야 하는 이유피그마(Figma)는 현재 전 세계 UI/UX 디자이너와 프론트엔드 개발자들이 가
lshjju.tistory.com
새 파일 만들었습니다.
파일네임 지정 합니다.
레퍼런스 배치하고 프레임 만들기
레퍼런스를 캔버스에 배치 합니다.
윈도우 디렉토리에서 피그마 캔버스로 드래그 하면 됩니다.
프로젝트 프레임 만듭니다.
안드로이드 콤팩트로 만듭니다.
레퍼런스 하이트를 안드로이드콤팩트 하이트와 동일하게 조정합니다.
콘텐츠 프레임 만듭니다.
스케일은 적절하게 조정 합니다.
https://lshjju.tistory.com/1024
프레임 만들기
피그마 제공 프레임 만들기 프레임 메뉴 탭 합니다. 안드로이드 콤팩트 셀렉합니다. 프레임이 생성되었습니다.사용자 지정 프레임 만들기 프레임 매뉴 탭 합니다.캔버스에 일단 대충 그립니다.
lshjju.tistory.com
백그라운드 이미지 배치
이렇게 만들겁니다.
백그라운드 이미지로 사용할 쿨이미지를 아래 사이트에서 가져와서 캔버스에 대충 배치 합니다.
크기는 나중에 다시 조절할거니까 대충 만듭니다.
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
https://unsplash.com/photos/woman-in-black-long-sleeve-shirt-covering-her-face-OVS3rqXq9gg
Unsplash에 있는 Alireza Dolati의 사진
Unsplash에 있는 Alireza Dolati의 이 사진 다운로드
unsplash.com
쿨이미지를 프로젝트 프레임에 배치 합니다.
cumtom 옵션은 편한것으로 셀렉 합니다.
여기서는 fit 으로 합니다.
이미지 위에 배치할 블랙 랙탱글 하나 만들어서 대충 배치해 둡니다.
이것은 이미지와 콘텐츠 사이 콘트라스트 조절 역할을 할 것입니다.
백그라운드 블랙 오파시티 30입니다.
https://lshjju.tistory.com/1008
이미지 가져오기와 배치하기
Image control이미지 가져오기이미지를 가져오는 방법은 간단 합니다.이미지를 피그마 캔버스로 드래그 합니다.이렇게 이미지를 로드해서 사용할 수 있습니다. 하지만 일반적으로 피그마는 이 방
lshjju.tistory.com
contents 프레임
이렇게 만들겁니다.
각 프레임 백그라운드는 블랙 오파시티 30적용했습니다.
레퍼런스 보고 적당한 크기로 대충 배치해 둡니다.
중요한 것은 모든 엘리먼트를 좌측상단부터 순서대로 배치하는 것입니다.
이렇게 하면 크루가 쫌 좋아 합니다.
status bar 프레임
위스 370 프레임 만들고 햄버거와 톱니바퀴 넣습니다.
프로젝트 프레임 상단에 배치 합니다.
센터 정렬 합니다.
☰ ❖
햄버거와 톱니바퀴를 아래 사이트에서 가져와서 콘텐츠 프레임에 배치 합니다.
Cool Symbols & Cool Fonts - Symbols, Emoji & Fonts
A collection of cool symbols that provides access to many special fancy text symbols, letters, characters... It also comes with a cool font generator tool.
coolsymbol.com
text 프레임
프레임 만들고 텍스트 넣습니다.
레퍼런스 보고 대충 만듭니다.
레퍼런스에 보이는 모든 텍스트 콘텐츠를 타이핑하거나 아래 사이트에서 가져와서 콘텐츠 프레임에 배치 합니다.
Lorem Ipsum - All the facts - Lipsum generator
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library
www.lipsum.com
ui 프레임
프레임 만듭니다.
레퍼런스 보고 대충 만듭니다.
contents 프레임 완성합니다.
https://lshjju.tistory.com/1025
텍스트 편집
피그마 텍스트 편집 방법을 알아보겠습니다.아주 간단합니다. 텍스트 셀렉 합니다.캔버스나 프레임에 탭 합니다.텍스트 작성 합니다. 무브 셀렉 합니다.무브 셀렉 안하고 텍스트 드래그해도 효
lshjju.tistory.com
콘텐츠 준비 완료
파일을 드래프트로 이동 합니다.
https://lshjju.tistory.com/1026
파일 이동하기
파일 이동하기파일을 팀 프로젝트나 다른 폴더로 이동할 수 있습니다.팀프로젝트에 있던 파일을 드래프트로 이동해 보겠습니다.상단 로고 탭합니다.백투파일스 탭하고 홈으로 갑니다.드래프트
lshjju.tistory.com
여기까지 완성본 보기
Figma
Created with Figma
www.figma.com
백그라운드 이미지 배치
백그라운드 랙탱글을 안드로이드 프레임으로 이동하고 적절하게 배치 합니다.
백그라운드 랙탱글 위에 블랙 랙탱글을 배치하고 명도를 조절 합니다.
두 랙탱글 모두 잠급니다.
status bar 프레임 정렬
프레임을 안드로이드 프레임으로 이동합니다.
엘리먼트 정렬 합니다.
디테일하게 디자인 합니다.
잘 됐다면 프레임 백그라운드 오파시티 0 세팅 합니다.
https://lshjju.tistory.com/1027
프레임 정렬
프레임 정렬에 대해 알아 보겠습니다. 대충 만든 프레임을 가져 옵니다.아이콘 두개를 좌우 정렬 합니다.대충 만든 프레임 셀렉 합니다.현재 레이아웃 프로퍼티는 이렇습니다. 레이아웃 우측 상
lshjju.tistory.com
text 프레임 정렬
프레임을 안드로이드 프레임으로 이동합니다.
레이어에서 엘리먼트를 적절하게 셀렉해서 포지션 프로퍼티로 센터정렬 합니다.
디테일하게 디자인 합니다.
잘 됐다면 프레임 백그라운드 오파시티 0 세팅 합니다.
ui 프레임 정렬
프레임 아래에 블랙 오파시티50 랙탱글 하나 배치하고 정렬 합니다.
프레임을 안드로이드 프레임으로 이동합니다.
레이어에서 엘리먼트를 적절하게 셀렉해서 포지션 프로퍼티로 센터정렬 합니다.
디테일하게 디자인 합니다.
잘 됐다면 프레임 백그라운드 오파시티 0 세팅 합니다.
레퍼런스와 비교해서 디테일 디자인 합니다.
필요없는 아이들은 숨김처리 합니다.
레이어를 좌측상단시작 순서로 잘 정리 합니다.
디스플레이 디자인 합니다.
심심하니까 디스플레이 디자인 살짝 추가해 봅니다.
드롭쉐도우 이펙트 적용 합니다.
https://lshjju.tistory.com/1012
이펙트 적용
이펙트 적용쉐도우 이펙트 적용하기 캔버스 - 엘레멘트 셀렉 프로퍼티 - 디자인 - 이펙트플러스 탭 셀렉트박스 - 드롭쉐도우 셀렉 드롭쉐도우 모달- 옵션 셀렉하여 원하는 효과 세팅 이펙트 완성
lshjju.tistory.com
디스플레이 살짝 넣어 줍니다.
완성 합니다.
프로젝트 png 파일 추출 합니다.
디스플레이 png 세이브 합니다.
앱 png 세이브 합니다.
https://lshjju.tistory.com/926
피그마 프레임 이미지로 저장하기
디자인 완성 후 프레임을 이미지로 저장 합니다. 캔버스이미지로 저장할 프레임 체크 합니다.피그마는 익스포트 할 때 프레임을 기준으로 익스포트 합니다.필요한 화면이 프레임인지 체크 합니
lshjju.tistory.com
https://lshjju.tistory.com/923
Figma prototype
프로토타입 세팅 엘리먼트 셀렉 프로퍼티 - 프로토타입 탭쇼우 프로토타입스 세팅스 유아이 탭 디바이스 기종/모델/백그라운드 등 세팅여기서는 처음부터 프레임을 android large로 셀렉해서 시작
lshjju.tistory.com
'Figma project' 카테고리의 다른 글
| Fashion app (0) | 2026.06.13 |
|---|---|
| Branding app index (0) | 2026.05.09 |
| E-commerce app index (0) | 2026.04.26 |
| Bank app (1) | 2026.04.11 |
| Bank app index (0) | 2025.11.22 |