📃 요약
요소 기술 :
– Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴
📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
– 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
5장 카드 UI 만들기
– Frame 만들기 / 그림자 효과 주기
1) 상단 툴바에서 2번째 아이콘 클릭
2) 캔버스에 드래그 앤 드롭 : 240 x 400
3) 우측 디자인 패널 – Frame 패널 : 원호 아이콘 – 10
4) 좌측 레이어 패널 – Frame 명 : UI/Card
- Fill : FFFFFF
5) UI/Card Frame 클릭
6) 우측 디자인 패널 – Effects 패널 : + 클릭
7) 우측 디자인 패널 – Effects 패널 : Drop Shadow 글자 앞의 아이콘 클릭
8) 설정 팝업 :
- Blur : 30
- 색상/투명도 : CCCCCC , 50%
– 이미지 추가하기
9) 상단 툴바 – Place Image 클릭
- 지금은 다운로드 예제 이미지가 없으므로 옆에 완성된 샘플 이미지를 복사해서 붙여넣기 함
– 텍스트 추가하기
1) 상단 툴바 : T 아이콘 클릭
2) 오른쪽 디자인패널 :
- X : 20, Y : 260
3) 오른쪽 디자인패널 – Text : - 크기 : 13
- Text align left
4) 오른쪽 디자인패널 – Fill : - 색상 : 999999
5) 상단 툴바 – Frame : 16 x 16 프레임 만들기
6) 오른쪽 디자인패널 – Fill :
- 클릭 :
7) 상단 툴바 – T :
- 입력 : 이탈리아 세프에게 직접 배우는 파스타 요리
7) 오른쪽 디자인패널 – Text : - 크기 : 16
- 두께 : Bold
- 색상 : 333333
8) 상단 툴바 – Shape Tool : Line 선택
9) 오른쪽 디자인패널 :
- X. : 20
- W : 200
10) 오른쪽 디자인패널 – Stroke : - 색상 : EFEFEF
11) 상단 툴바 – T :
- 입력 : 1인 35,000원
12) 오른쪽 디자인패널 – Text : - 크기 : 20
- 두께 : Black
- 색상 : 333333
– 도형으로 아이콘 만들기
1) 상단 툴바 – Frame :
- 이름 : Icon/Shape/Bookmark
2) 오른쪽 디자인패널 – Frame : - 크기 : 24 x 24
3) 오른쪽 디자인패널 – Fill : 색상 : EEEEEE
4) 상단 툴바 – Retangle : 선택
- Icon/Shape/Bookmark Frame 안에 넣기
4) 오른쪽 디자인패널 – Design : - W : 8
- H : 12
- Align Horizontal centers
- Align Vetical centers
5) 오른쪽 디자인패널 – Fill : - 색상 : CCCCCC
6) Retangle 선택후 Enter : 벡터 편집 모드로 변경됨
- 하단 아래 마우스 위치 : 펜모양 변경됨
7) 오른쪽 디자인패널 – Design : - Y : 14
