$$config title: (국)임베디드풀스택개발자과정 - FIGMA https://to2.kr/edO keywords: - 국비 - FIGMA $$ # 페이지 정보 - 주소 : [to2.kr/edO](https://to2.kr/edO) - 클래스 : (국)임베디드풀스택개발자과정 - FIGMA --- # 유용한 자료 - [HTML, CSS 실무 팁](https://slog.gg/p/2707) - [포트폴리오 코딩 질문](https://slog.gg/p/10803) - [FIGMA 강좌, 연정's figma](https://www.youtube.com/@yeonjung-figma) - [프로젝트 라이언 클론코딩](https://slog.gg/p/3064) # 포트폴리오 프로토타입 - [메인](https://codepen.io/vexxxx/pen/ExpNwgE) - [포트폴리오](https://codepen.io/vexxxx/pen/BaPQmdw) - [메일발송](https://codepen.io/vexxxx/pen/QWBGOJZ) --- # 조별 프로젝트 Figma - [1조, to2.kr/efd](https://to2.kr/efd) - [2조, to2.kr/eeR](https://to2.kr/eeR) - [3조, to2.kr/eeY](https://to2.kr/eeY) - [4조, to2.kr/efe](https://to2.kr/efe) --- # ? 챕터 1 : FIGMA 회원가입 및 설치 - [FIGMA](https://www.figma.com/) - 설치 및 회원가입 진행 - 단축키 - `V` : 이동 툴 - `F` : 프레임 툴 - `T` : 텍스트 툴 - `R` : 사각형 툴 - `Shift + G` : 그리드 보임/숨김 - `Space + drag` : 핸드 툴 - `Ctrl + +` : 확대 - `Ctrl + -` : 축소 - `Shift + 2` : 선택한 레이어 확대 - `esc` : 선택 취소 - `tab` : 다음 레이어 선택 - `Ctrl + G` : 그룹화 - `Ctrl + Shift + G` : 그룹/프레임 해제 - `Ctrl + Alt + G` : 프레임화 - `Alt` : 간격 확인 - `Alt + 레이어 드래그` : 레이어 복제 # ? 챕터 2 : FIGMA Community - figma 오픈소스, 플러그인, 위젯 등 다양한 파일을 공유하거나 설치할 수 있는 공간 - Plugin 추천 - `Iconify` : 아이콘 - `Unsplash` : 무료 고화질 이미지 - `Blush` : 무료 일러스트 (커스텀 가능) - `Material Design Icons` : 아이콘 - `Icons8 Background Remover` : 자동 누끼 - `Contrast` : 웹 접근성 기준에 적합한 색상 대비도 검사 # ? 챕터 3 : Style ## 개념 - [[개념] Style](https://to2.kr/dDy) ## 실습 - [[실습] Style](https://to2.kr/dXL) ### Material Design 타이포 가이드 - [Material Deisign Type scale generator](https://material.io/design/typography/the-type-system.html#type-scale) - 한글 본문 폰트 추천 : `Noto Sans KR` - 영문 본문 폰트 추천 : `Roboto` # ? 챕터 4 : Layout Grid - 레이아웃 그리드가 안 보일 때 - `Shift + G` : 레이아웃 그리드 보이기/숨기기 - 세 줄 요약 1. 디자인을 한다면, 시작하기 전 Frame을 생성하여 Layout Grid 잡기. 2. 코딩/디자인 할 때, 간격을 띄울 경우 8의 배수, 넓다면 4의 배수로 띄우는 습관 들이기 3. 12col grid 생성 (1200px 컨테이너) : 넓이 `56`, 거터 `48`, 정렬 `center` ## 개념 - [[개념] Layout Grid](https://to2.kr/dDp) ## 실습 - [[실습] Layout Grid](https://to2.kr/dXM) # ? 챕터 5 : Component ## 개념 - [[개념] Component](https://to2.kr/dDI) ## 실습 - [[실습] Component](https://to2.kr/dXN) # ? 챕터 6 : Variants - 컴포넌트의 기능을 정리하는 기능, 각 변화에 대한 속성들을 분류에 맞게 정리함. ## 개념 및 실습 - [링크](https://www.figma.com/file/ZnqEedGTdtqN7RkfgOG2Cg/FIGMA-Variants?node-id=0%3A1) # ? 챕터 7 : Auto Layout - Auto Layout 생성 단축키 : `Shift + A` ## 개념 - [[개념] Auto Layout](https://to2.kr/dDP) ## 실습 - [[실습] Auto Layout](https://to2.kr/dYh) # ? 챕터 8 : Prototype ## 개념 - [[개념] Prototype](https://to2.kr/d1a)