나비와 벌

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 생산성을 높여주는 플러그인 플러그인 사용해보기 플러그인 사용하는 방법은 다음과 같습니다. resource 메뉴 -> plugins 플러그인을 잘 활용하면 매우 다이나믹한 작업물을 만들 수 있는데요. 그 중 가장 유명한 플러그인 3가지를 소개해드리려고 합니다. 1. Autoflow 컴포넌트나 버튼을 누르는 경우 각각의 다른 화면으로 분기 처리되어 이동하거나 플로우를 그려보는 것과 같은 플러그인을 사용 가능합니다. shift를 누른 채로 화면 선택시 플로우 생성이 가능하며 화살표 위치를 유저가 조정 가능합니다. 2. Unsplash 고퀄리티의 스톡 이미지가 있는 사이트의 플러그인입니다. 더블 클릭하여 스톡 이미지를 빠..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 피그마 파일 썸네일 만들어보기 썸네일을 만드는 이유 작업을 하다보면 피그마 메인 화면이 겉잡을 수 없이 복잡해지기 마련입니다. 그러므로 작업물을 찾기 어려운 경우가 발생하기 때문에 썸네일을 만드는 것은 필수입니다. 썸네일을 만들시 장점은 가시적으로 프로덕트 구분 가능, 파일의 빠른 탐색, 협업 조직 내 쉬운 파일 설명 등이 있습니다. 해당 강의는 유료이기 때문에 실습 진행은 생략합니다. 피그마 커뮤니티에서 꼭 소장해야하는 리소스 리소스 1. Google, Material 3 Design kit 구글 디자이너들은 어떻게 컴포넌트를 활용/운영하는지 알 수 있습니다. 가이드 기반이기 때문에 개발 모드 또한 지원합니다. ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 단축키,컬러 파일, 넛지 내 상황에 꼭 맞는 작업 환경 셋팅하기 저번 시간에는 오토 레이아웃에 대해 알아보았습니다. 이번 시간에는 유저들에게 도움이 되는 작업 환경 셋팅하기에 대해 알아보겠습니다. 작업 환경 셋팅에는 단축기, 컬러 프로파일, 넛지 등이 있습니다. 단축키 설정 단축키 설정 방법은 다음과 같습니다. 메인메뉴-> preferences-> keyboard layout 단축 키에는 여러 가지가 존재하는데요. Essential 탭에는 다음과 같은 키가 존재합니다. show/hide UI : ctrl+\ pick color : I Quick actions : ctrl+/ 또한, 유저가 원하는 키보드 형식으로 변..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 오토 레이아웃 오토 레이아웃이란? 오토 레이아웃이란 피그마에서 제작한 UI가 화면 크기가 바뀔 때마다 바뀌는 화면의 UI 레이아웃을 유저가 일일이 조정할 필요없이 자동적으로 조정해주는 옵션을 의미합니다. 오토 레이아웃으로 설정할 수 있는 옵션은 크게 3가지가 존재합니다. 개체 크기 정렬 및 방향 절대 위치 예시를 들어볼게요. 가령 라벨이라는 컴포넌트가 있다고 합시다. 오토 레이아웃을 설정한 후 강의용이라고 이름을 변경했을 때 휴지통의 아이콘이 하늘색 배경 밖으로 삐져 나가는 것이 아닌 텍스트 길이에 알맞게 잘 이동하는 것을 확인할 수 있습니다. 오토 레이아웃을 설정하지 않는다면 유저가 일일이 조정해야 하기 때문에 ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 면과 선의 속성 이해하기 피그마는 벡터 기반의 프로그램 피그마는 베터 기반으로 그래픽이 구현되는 프로그램으로, 모든 그래픽들이 손실 없이 깨끗하게 나온다는 특징이 있습니다. 벡터는 방정식으로 계산 선이나 면이 프로그래밍되어 구현됩니다. 비트맵은 픽셀 단위 도형이나 그래픽을 구현하게 되는 방식입니다. 피그마에서 면과 선의 개념 면의 특징 하나의 도형 개체로 인식합니다. 모서리 라운드값 설정이 가능합니다. 크기 변경 시, 자동 비율 적용이 됩니다. 선으로 변경 불가합니다. 선의 특징 스타일 속성으로 우선 인식합니다. 다양한 모서리 스타일값 적용 가능합니다. 크기 조절 시, 기존 두께 우선 유지합니다. 면으로 변경 가능..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 섹션,프레임,그룹의 구조 작업 환경에서의 위계 순서 작업 환경에서의 위계 순서는 다음과 같습니다. Section Frame Group 이 위계 순서는 틀어질 수도 없고 변경 또한 불가합니다. 'Section'은 동일한 Section 내에서는 이동할 수 있지만 Frame 내에서는 존재할 수 없습니다. 컴포넌트와 인스턴스 반복적으로 관리해야 하는 요소 다루기 작업을 하다 보면 매번 만들기 귀찮은 아이콘이 존재할겁니다. 가령 서비스 내에서 검색 아이콘은 결국 같은 룩을 가지고 있을텐데 이를 관리하기 위해서는 매번 만드는 것이 아닌 컴포넌트로 관리를 할 수 있습니다. 컴포넌트가 된 요소를 복사하면 인스턴스가 되는데요. 인..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 상단 도구 메뉴 상단 도구 메뉴 살펴보기 📚move -> 페이지 이동 등 이동에 관한 메뉴 📚 격자무늬 frame -> 화면의 아트보드를 만들때 사용 비율 조정 📚 section -> 한꺼번에 프레임 집합을 묶어줌 📚 rectangle -> 프레임 안에서 도형 그리기 📚 pen -> 아트보드에 원하는 지점으로 펜툴을 통해 그림을 그릴 수 있음 📚 resource -> 컴포넌트/플러그인/위젯으로 구성 컴포넌트: 기존에 만들어 놓은 작업물들을 확인 플러그인: 원하는 플러그인은 커뮤니티에서 찾을 수 있음 위젯: 위젯을 설치하여 연동하여 이슈를 생성 또는 불러올 수 있음 📚 comment 메뉴 -> 새로운 코멘트 작성 폰..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 왼쪽 패널 페이지,레이어,에셋 메뉴 왼쪽 패널 메뉴에 대해 알아보기 - 페이지 이름 변경하기 📚페이지 이름 변경하는 방법 페이지 위에 더블클릭 오른쪽커서클릭 후, rename page 클릭 📚페이지 삭제하는 방법 오른쪽 커서 delete page 클릭 ❓ 실수로 페이지를 삭제했을때 키보드에서 cmd+z를 누르면 다시 복구 완성된 페이지 관리하기 표시가 되어 있는 페이지는 dev버전 ready for dev로 추출가능하는 것을 의미합니다. 개발로 넘겨도 무리 없을 정도로 완료된걸로 표시할 수 있다고 볼 수 있겠네요. 이렇게 완성된 페이지와 미완성된 페이지를 분류하여 관리할 수 있습니다. 레이어 살펴보기 레이어는 페이..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 권한 및 모드별 화면 권한 및 모드별 화면 변화에 따른 차이점 알아보기 피그마에서는 권한에 따른 화면이 다른데요. 편집이 가능한 권한은 오너/어드민, 그리고 에디터가 존재합니다. 반면, 편집이 불가한 권한으로는 뷰어가 있습니다. 에디터 권한은 복제하거나 편집이 가능하고 레이어들의 속성값 변환 또한 가능합니다. 에디터 권한 vs 뷰어 권한 상단 에디터 권한 하단 뷰어 권한 상단의 툴들 뷰어 권한과 에디터 권한의 큰 차이점은 상단의 툴들인데요. 뷰어 권한 상단에 보면 일부 툴들이 보이지 않습니다. 중앙에 ask to edit가 있음을 확인할 수 있는데요 클릭을 하면 파일에 대한 에디터 권한을 가진 사람들에게 edit ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 파일,페이지,레이어 기본 개념 알아보기 파일이 만들어지는 과정 파일은 어떻게 만들어질까요? 피그마는 팀 단위로 움직입니다. 그래서 가장 큰 개념은 팀-프로젝트-파일 순입니다. 파일이 가장 작은 단위라고 할 수 있겠네요! 현재 보이는 그림에서는 각 프로젝트 하위에 파일이 3개씩있음을 확인할 수 있는데요. 파일이 가장 작은 단위입니다. 프로젝트는 다른 팀으로 복제, 이동이 가능합니다. 파일 구성 요소 파일의 구성 요소도 한 번 살펴볼까요? 프로젝트 a의 파일1을 열었다고 가정했을때 파일은 페이지로 구성되어있습니다. 여러개일 수도, 단독으로 존재할 수도 있어요. 페이지 내에는 여러 개의 레이어로 구성되어 있습니다. 파일..