📃 요약
요소 기술 :
– Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴
📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
– 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
8장 컨스트레인트 사용하기
- 컨스트레인트 기능 : 휴대폰, 테블릿, pc 등 해상도가 변경되더라도 디자인이 변경되지 않게 만드는 기능
– 컨스트레인트 로그인 화면에 적용하기
1) 레이어 패널에서 UI/Status bar – Time 선택
- 디자인탭 – Constraints : Left, Top 선택
2) 레이어 패널에서 UI/Status bar – Wifi 선택
- 디자인탭 – Constraints : Right, Top 선택
3) 레이어 패널에서 UI/Status bar 선택
- 디자인탭 – Constraints : Left & Right, Top 선택
4) 레이어 패널에서 title-group 선택
- 디자인탭 – Constraints : Center, Center 선택
5) 레이어 패널에서 indicator 선택
- 디자인탭 – Constraints : Center, Bottom 선택
6) 레이어 패널에서 UI/Title 선택
- 디자인탭 – Constraints : Center, Bottom 선택
7) 레이어 패널에서 UI/Login :
- 로그인, button 2개, 이메일을 잊으셨어요?
- 디자인탭 – Constraints : Center, Top 선택
8) 레이어 패널에서 UI/Login 선택:
- 디자인탭 – Constraints : Left & Right, Bottom 선택
– 화면 크기 변경하기
1) 레이어 패널에서 8-1 선택
- 디자인탭 – Frame 클릭
- 드롭다운 메뉴 : iPad mini 8.3 선택
