📃 요약
요소 기술 :
- Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
- 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
11장 스타일 사용하기
- 자주 사용하는 폰트/색상을 임의의 이름으로 저장해두고 일과적으로 적용하게 하는 기능- 스타일 등록하기
1) 11-1 - Ecommerce - CREEEM 선택 :
- 디자인 패널 - Text 패널 옆 아이콘 클릭 - + 클릭
- 옆에 팝업 보임 : Font/Title/Size/14 입력
- Create Style 버튼 클릭
- 폰트/사이즈/행간/자간 속성이 1세트 스타일이 됨
2) 위와 동일하게 작업 :
- Long Trench Coat 텍스트 : Font/Title/Size/20 입력
- 125,000원 : Font/Title/Size/26 입력
3) 11-1 - Ecommerce - Info - 상품명 선택 :
- 디자인 패널 - Text 패널 옆 아이콘 클릭 - + 클릭
- 옆에 팝업 보임 : Font/BodyText/Size/13 입력
- Create Style 버튼 클릭
- 폰트/사이즈/행간/자간 속성이 1세트 스타일이 됨
- 스타일 확인하기
- 스타일 등록시 /(슬래쉬) 로 구분하면 폴더 역할을 하게되어 화면에 분리되어 보임
- 등록한 스타일을 확인할때는 캔버스에서 아무것도 선택하지 않으면 됨
- 디자인 패널 - Local Styles 패널에 스타일이 나타남
- 등록된 스타일을 다른 곳에 적용하기
1) 11-2 - Checkout - UI/Header - CREEEM 클릭
- 디자인 패널 - Text 패널 옆 아이콘 클릭 : Font/Title/Size/14 선택
2) 11-2 - Checkout - UI/Header - Long trench coat 클릭
- 디자인 패널 - Text 패널 옆 아이콘 클릭 : Font/Title/Size/14 선택
3) 11-2 - Checkout - UI/Header - 125,000 클릭
- 디자인 패널 - Text 패널 옆 아이콘 클릭 : Font/Title/Size/20 선택
- 색상 스타일 적용하기
1) 11-2 - Checkout - CREEEM 클릭
- 디자인 패널 - Fill 패널 옆 아이콘 클릭 :
- 옆 팝업 : Color/General/GreyScale/20 선택
2) 11-2 - UI/Button - bg 클릭
- 디자인 패널 - Fill 패널 옆 아이콘 클릭 :
- 옆 팝업 : Color/Button/Solid/Main 선택
- 스타일 수정 / 삭제하기
1) 캔버스 - 디자인 패널 - Local Styles :
- Font/Title/Size/14 옆의 아이콘 클릭 : 수정 팝업 보임
- 14 -> 15
2) 캔버스 - 디자인 패널 - Local Styles :
- Font/Title/Size/14 에서 마우스 오른쪽 클릭
- Delete Style
