[figma]피그마 기초

피그마기초 1강 

frame&constraints 조절

 

ctrl(command) +R :이름바꾸기 

선택하고 Shift +2 : 중앙정렬

 

이미지불러오기

1: fill영역통해 불러오기 

2. shift+ctril(command)+k단축키통해 이미지불러오기, 이때 여러개 선택해서 불러올경우  다중이미지삽입가능

 

피그마 내 플러그인 통해 받기 #unsplash

 

Auto layout :shift+A

오토레이아웃이 그룹화와 차이점이 뭘까했더니

auto layout은 frame으로 묶여지고 frame 내 선택된 항목간의 간격설정(padding), 정렬(수평,수직)이 가능

 

그룹화: ctrl G

 

피그마기초 2강 :figma로 아이콘만들기

 

 

아이콘 디자인가이드 참고

https://material.io/design/iconography/system-icons.html#design-principles

Material Design

 

 

선으로 아이콘을 그리면 프레임을 잡고늘릴때 선의 stroke 값유지되서 크기대비 아이콘이 얇아짐

이때 선을 outline stroke로 바꾸고 프레임을 잡고 늘렸을때 스케일맞추면서 커짐

+

프레임을 잡고늘릴때 아이콘 같이안늘어나면 CONSTRAINTS기능 설정!!

아이콘이 프레임 사이즈를 늘렸을 때 함께 scale 되려면 프레임 안 객체의 constraints 값을 

(top, left 로 되어 있는 옵션을) 모두 scale로 조정해야한다

 

 

 

 

stroke 탭에  advanced stroke 유용한기능

export할때 벡터값이 유지되는 SVG형식으로 내보내는게 좋다

내보내고싶은 아이콘 선택 후 오른쪽마우스 클릭- copy as svg기능으로 바로 코드에 붙여넣기할수있음

 

Reference

https://youtu.be/4_WS782s96c