📃 요약
요소 기술 :
- 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 패널 : corner radius : 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 클릭
- 이미지 넣고 240 x 240 크기를 조정합니다.
- 텍스트 추가하기
1) 상단 툴바 : T 아이콘 클릭
2) 오른쪽 디자인패널 :
- X : 20, Y : 260
3) 오른쪽 디자인패널 - Text :
- 크기 : 13
- Text align left
4) 오른쪽 디자인패널 - Fill :
- 색상 : 999999
5) 상단 툴바 - Frame : 16 x 16 프레임 만들기
6) 오른쪽 디자인패널 - Fill :
- + 클릭 :
- 생상 클릭 : 색상 팔레트 팝업 나옴
- 3번째 아이콘(Image) 클릭
- 중앙 그림에 마우스 올리면 : Choose Image 버튼 클릭
- 이탈리아 깃발 이미지 넣기
- 왼쪽 디자인패널: Icon/Flag
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
- corner radius : 5
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
