[Figma #3] figma 아이콘 만들기, 플러그인 설치, Auto Layout
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
1. google material icon 다운 받아서 디자인 경우
material.io/resources/icons/
material icon 저장 후 불러올때
shift + i
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
2. System icons 아이콘 직접 제작 시 가이드 라인
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
Figma
Created with Figma
www.figma.com
icon-keyline-24x24
** 화면 중앙으로 shift + 2
** frame 이름 변경 Command + R
** 여러개 이미지 삽입 command + shift + k
** 펜툴 단축키 P
** 복사하기 ctral + D
** 색 복제 > 대상 클릭 > ctral + C > 원하는 색 클릭
아이콘 제작
1. 이미지로 내보내기
1x png / 2x png / 3x png / svg > 4 가지로 Export fram
SVG가 선명하여 사용 권장
2. 코드로 내보내기
아이콘 드래그 > copy/paste as > copy as svg
3. Constraints - Scale
비율대로 확대
4. Outline stroke
모든 라인 선택 후 > outline sotroke > 일정한 라인으로 확대
5. 도형 및 펜툴 활용 Stroke
line arrow > 화살표 생성
왼쪽 포인트 선택 후 line arrow
오른쪽 포인트 선택 후 line arrow
라인 끝처리
6. Plugin 설치
Figma
www.figma.com
검색창에 > unsplash > 다운로드
unsplash plugin > 이미지 검색 > 사진 선택 후 삽입
7. Auto Layout
단축키 Shift + A
가로 정렬, 세로 정렬 쉽게 체인지
사이 패딩 쉽게 조절
마지막으로 figma 원본 파일 저장 시 file > save as figma