나비와 벌

* 해당 글은 메타코드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을 열었다고 가정했을때 파일은 페이지로 구성되어있습니다. 여러개일 수도, 단독으로 존재할 수도 있어요. 페이지 내에는 여러 개의 레이어로 구성되어 있습니다. 파일..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 기본 화면 둘러보기 프로필 변경 : 프로필 선택 -연필 그림 선택 후 변경 가능합니다. 테마 변경 : 프로필 선택 - Theme 에서 선택 가능합니다. Setting 메뉴 : 피그마 세팅을 변경할 수 있는 공간 (account/Community/Notification) 입니다. Recents :최근 작업물 확인할 수 있습니다. Your teams : 팀에 관한 공간으로, 유저 혼자만 있으면 유저 혼자만 팀원으로 선정됩니다. Drafts : 유저가 만든 파일 + 팀 플랜 협업 가능 공간으로, 임시 파일을 볼 수 있으며 팀원들의 작업물들도 받아볼 수 있고 수정권한을 받는다면 수정 또한 가능합니다. Teams : 팀 (..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 피그마는 어떻게 운영되나요? 피그마는 먼저 기본적으로 유저 1명으로 진행됩니다. 하지만 팀을 결성해서 초대를 하면 확장을 할 수 있습니다. 피그마는 1명으로 진행해도 팀이 생성이 되고 한 팀에서만 소속할 수 있는 것이 아닌 다수의 팀에서도 소속하여 활동할 수 있다는 장점이 있습니다. 그래서 피그마는 작업하기에 굉장히 용이한 툴인거죠. 팀원별 권한 부여에 대해 팀으로 활동을 하게 된다면 별도로 권한을 부여할 수 있습니다. 피그마에서는 팀원 역할이 뷰어, 오너/어드민, 에디터로 나뉘는데요. 이렇게 권한을 나누어 수행하다보면 작업 수행 능력이 빨라지기도 하고 피그마 내 유료회원을 이용하는 사람들은 결제 요금을 절약할 수..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 피그마 시작하기 오늘은 피그마를 웹,그리고 데스크탑, 미러링 앱을 통해 시작할 수 있는 방법에 대해 알아보겠습니다. 강의에서는 레나선생님께서 먼저 피그마를 웹에서 접속하는 방법에 대해서 알려주시는데요. 피그마를 웹에서 시작하는 방법은 다음과 같습니다. 구글에 Figma를 검색하고 Figma 공식 사이트에 접속을 합니다. 피그마에 접속하면 다음과 같은 창이 뜨는데요. Get started for free 라고 적힌 검정색 버튼을 클릭하거나 Get started라고 적힌 보라색 버튼을 클릭합니다. 구글계정 또는 회사 업무용 메일이 있다면 업무용 계정으로 시작해주세요! 계정을 만드시면 다음과 같은 창으로 넘어가는데요. ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 강의를 접하게 된 계기 강의를 접하게 된 계기는 유튜브였습니다. 기존에 포트폴리오에 대한 고민이 많았는데 디자인 전공생 친구가 Figma를 활용하여 포트폴리오를 구성하는 것을 보게 되었고 저 또한 그렇게 만들고 싶다는 생각이 들었습니다. 메타코드 유튜브를 구독하고 영상을 자주 보는 애청자로서, Figma 관련 서포터즈를 진행하게 되었습니다. Figma란? Figma에 대해 생소한 분들이 계실 것 같습니다. Figma는 UI/UX 디자이너들이 가장 많이 사용하는 디자인 툴인데요. 기존의 다른 디자인 툴과는 차별성을 띄고 있다는 점에서 활용도가 높다고 할 수 있겠습니다. 실제로 앱 개발자들도 종종 사용한다고 합니다. ..