📃 요약

요소 기술 :

– 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 – UI/Header – 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