1. Section, Frame, Group
🧑🏻💻 역할
Section여러 개의 화면 Frame을 담기 좋음Frame아트보드로 활용을 많이 함Group화면 안에서 공통된 요소들을 묶을 때 사용
🤔 Frame vs Group
Frame이 Group 안에 속할 수 있지만 Frame이 더 높은 위계임
Frame은 레이어가 없어도 존재 가능 ➡️ Group보다 독립적인 권한
Group은 레이어가 꼭 있어야 함(레이어에 영향을 받음) ➡️ 레이어를 지우면 group도 사라짐, 레이어의 크기를 조절하면 group의 크기도 영향을 받음
2. 컴포넌트, 인스턴스, 베리언트
컴포넌트
반복적으로 관리해야하는 요소 관리 (ex. 검색 아이콘)
- 에셋 패널&리소스 메뉴에서 확인 가능
- 인스턴스 생성 시, 메인 컴포넌트가 됨
- 다양한 속성값을 '베리언트'로 구별
인스턴스
컴포넌트가 된 요소를 복사하면 인스턴스
- 컴포넌트 없이 생성 불가
- 메인 컴포넌트가 수정되면 함께 수정됨
- 메인 컴포넌트가 삭제되면 업데이트 안 됨
- 메인 컴포넌트의 베리언트가 있을 시, 반영
- 일부 속성 개별 수정 가능
베리언트
메인 컴포넌트의 속성값을 세분화하는 묶음(ex. 사이즈)
메인 컴포넌트는 하나지만 사이즈를 세분화한다든가..하는 느낌
요약
컴포넌트 베리언트 인스턴스 메인 컴포넌트 속성값을 품은 애 컴포넌트 요소 복사된 애
3. 면과 선의 속성 이해
벡터, 비트맵
피그마는 벡터 기반의 프로그램
벡터: 사이즈를 키우거나 줄이거나 상관없이 곡선이나 그래픽이 부드럽게 사이즈에 구애받지 않고 표현됨
비트맵: 사이즈를 키우거나 줄이면 도형 자체의 shape이 손실이 되는 특징을 가짐
구현되는 방법
벡터는 방정식으로 계산되어 선이나 면이 프로그래밍 되어 나오는 반면
비트맵은 작은 네모(픽셀)들이 모여서 그래픽을 구현하게 되는 구동 방식
특징
벡터 --> 각 꼭짓점에서의 핸들로 움직임 --> 자유자재로 수정 가능
비트맵 --> 수정이 어려움 --> 다시 지워서 그리거나 새롭게 도형을 추가해서 표현해야 함
디자이너에겐 벡터 기반의 프로그램이 좋음
🍜 면
- css가 면을 하나의 도형 개체로 인식함
- radius 값을 조정해 각 모서리 라운드값 설정 가능
- 보통 아이콘을 면화하여 저장
- 선으로 변경이 불가능
📏 선
- 스타일 속성으로 우선 인식 --> 개체라고 인식하기 보다는 선의 스타일 속성값을 가지는 구나 ~ 라고 인식함
- 다양한 모서리 스타일값 적용 가능(끝점 라운드 처리 등) --> css에서 티가 안 남
- 면에서는 선 스타일 속성을 추가해야 모서리 스타일을 적용할 수 있음
- 크기 조절 시에 두께를 우선 적용 --> 그니까 크기를 키워도 두께는 유지되는 상태로 길이만 길어지는 느낌
- 면으로 변경 가능
면과 선의 크기 조절 차이
좌측 면은 가로세로 크기 적용이 되는데,우측 선은 길이만 길어지는 것을 확인 가능
면, 선 실습
선의 상태에서는 코드화하는 것을 추천하지 않음
개발자에게 넘길 때는 선 그 상태로 넘기는 것보다 선을 면화해서 넘기는 게 좋음
style 값에 티가 나지 않기 때문인데
Ouline stroke or shift + cmd + o로 stroke 처리하면
높이(height)값이 생겨 outline stroke가 적용됐음을 확인할 수 있음
면에서도 stroke 두께를 설정하고 outline stroke 처리를 하면 개발자모드에서 height 값을 나타낼 수 있다.
(outline stroke 처리를 통해 line -> Rectangle로 바뀐 것임)
도형 불리언 그룹 활용하기
불리언(Boolean) 그룹이란?
만들어진 도형들을 4가지 방법으로 빠르게 편집할 수 있는 것
- 두 개 이상의 도형이 필요
- 어도비 그래픽 프로그램의 패스파인더랑 같은 기능
- 에디터 권한이 있으면 사용 가능, 뷰어는 사용할 수 없음
불리언으로 가능한 작업
불리언 그룹 실습
Flatten으로 병합하기
🤔 Flatten?
- 위에서 불리언 그룹 작업을 통해 만든 도형으로 병합
Flatten 적용 전에는 이렇게 좌측에 레이어가 남아있음
Flatten 적용하면 좌측에 레이어가 남지 않음
펜툴로 사각형을 하나 더 만들었을 때 플랫튼에 레이어가 생기지 않고,
유니언 상태인 곳에는 vector 1 레이어가 생긴 것을 볼 수 있다.
종모양 아이콘으로 실습
- 유니언으로 만들면 색이 하나로 결정되게 되는데 상위 계층의 속성이 우선 적용 되어서 그럼..
마스크 활용하기
🤔 마스크란?
특정 개체를 프레임으로 지정하여 그 영역만큼만 하위 레이어를 노출할 수 있는 기능
특정 영역만 마스크 영역으로 지정하면 지정한 영역 만큼만 보여지게 된다.
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
