📃 요약
요소 기술 :
- Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
- 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
2) 검색양식 : 처음 만나는 피그마
3) Open in Figma 버튼 클릭
4) Figma 에서 예제 파일 자동으로 열림
17장 개발자가 피그마 활용하기
- 에셋 추출 : 디자인 시안에서 사용한 이미지 추출하기- 디자인 에셋 추출하기
1) 레이어 패널 - Icon/Pentool 프레임 선택
- 디자인패널 - Export 패널의 + 클릭 : 3번 클릭(1x, 2x, 3x배수 이미지 생김)
- Export Pentool 클릭 : pc 에 다운로드됨
- copy as code 활용하기
- 시안 디자인의 css 코드를 확인할 수 있음
- 복사/붙여넣기로 소스에 쉽게 활용할 수 있음1) 레이어 패널 - help
- 아이콘을 클릭하세요 선택
- 마우스 오른쪽 클릭
- Copy/Paste as - copy as code - css
- vscode 또는 메모장에 붙여넣기 : 속성, 값만 들어있음
IT FullStack 강사