나비와 벌

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. (실습)약관 동의 화면 만들기 리소스 파일에서 안드로이드 스테이터스 바를 복붙하여 라이브러리에 준비합니다. 컴포넌트화 하고 다중 선택 후 combine as variants를 클릭하고 publish하면 라이브러리를 최신화하고 디자인하는 파일에서 연결되어 있는지 확인합니다. light 버전과 dark 버전을 둘다 publish하여 연결해주었습니다. 디자인 패널 asset에서 스테이터스바를 드래그하여 붙여넣어서 사용합니다. 백그라운드 레이어를 찾아서 배경색을 안보이게 처리합니다. 로그인 프레임을 찾아서 동일하게 하고 배경색도 안보이게 처리합니다. 이제 약관 동의 화면을 설계해볼건데요. 텍스트를 적고 스타일을 저장하여 ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. (실습)라이브러리 파일과 작업 파일 분리하기 라이브러리 파일과 작업 파일 분리하는 방법 라이브러리 구축과 활용에서 라이브러리 파일을 별도 파일로 분리해두지 않을시 서비스 디자인이나 프로젝트 디자인 할 때 여러가지 피그마 파일을 만들때 파일들의 유기적 연결이 어려워집니다. 이를 방지하기 위해 라이브러리 파일과 작업 파일을 분리하여 팀 안에 있는 모든 협업자들이 모든 디자인 파일에 이 라이브러리를 참고할 수 있게 됩니다. 먼저, 디자인 라이브러리 라는 파일에서 화살표모양 아이콘을 만든 후, 컴포넌트화합니다. 그리고 다른 파일에서도 이를 사용할 수 있도록 할건데요. [안드로이드]디자인 파일로 들어가, asset 패널에서..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 실습)네비게이션 바 디자인하기 Material 3 Design Kit 사용하기 오늘은 네비게이션 바를 디자인해보는 시간을 가져보겠습니다. 리소스 파일은 Material 3 Design kit을 사용할겁니다. Add to file을 클릭하여 파일을 열어주세요. 리소스 파일 중 Navigation bars UI를 가져옵니다. 현재 3개의 아이콘과 텍스트가 화면에 있는데요. 각자 원하는 sagment 값을 조정하고 icons를 변경해봅시다. 아이콘과 텍스트를 변경해 준 모습입니다. 컬러칩 또한 검색하여 변경할 수 있으니 입맛대로 작업해봅시다. 네비게이션 바를 다 완성하셨나요? 그렇다면 이제 ui 화면을 설계할 차례입니다..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 아이콘에 변수값을 설정하고 등록하기 아이콘은 왜 변수를 고려해야 하는 걸까? 아이콘은 왜 변수를 고려해야 하는걸까요? 다양한 상황 대응 여러 크기로 사용되는 아이콘 목적과 상태를 나타내는 아이콘 존재 커뮤니케이션 부채 절감 예상되는 변수는 초기에 설정하기 변수가 일어나면 개발과 소통이 쉬움 이렇듯 아이콘 또한 설정값을 지정하고 등록하면 사용하기 편리해집니다. 실습 현재 보시는 화면에서 보면 아이콘들이 컴포넌트화 되어 있는 것을 확인할 수 있습니다. 디자인 패널에서 variant 값을 조정할 수도 있습니다. 아이콘을 등록하고 사용하려면 반드시 컴포넌트화 되어 있어야 합니다. 그렇지 않으면 사용하지 못하는 것이죠. 컴..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 컬러 시스템 적용하기 컬러, 왜 시스템화 해야할까? 컬러 시스템 등록은 협업에 있어, 필수적인 사항입니다. 컬러를 시스템화하면 좋은 점은 다음과 같습니다. 반복 업무 해소 반복적으로 사용하는 컬러값 자동화 컬러별 옵션 값 적용 가능 컬러 사용 목적별 관리 가능 조직 내 통일된 디자인 컬러 파편화 현상 해소 개발자와 커뮤니케이션 부채 해소 간편한 디자인 온보딩 컬러 시스템을 한번 직접 등록해보는 시간을 가져봅시다. 컬러 시스템은 디자인 패널 밑에 내려가면 fill 설정 옆 4가지 점표 그림을 설정하여 등록할 수 있는데요. 현재는 all libraries에 아무것도 없는 것을 확인할 수 있습니다. 컬러 시스템 등록은 ..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 모바일 화면 기초 UI 세팅하기 Android 리소스 파일 다운받기 먼저 안드로이드와 ios 관련 ui kit 리소스 파일을 열어줍니다. 파일을 열면 안드로이드의 앱바, ios의 앱바, 키보드 등의 ui 화면들이 보이는데요. 오늘은 이걸 활용해서 ui 화면 세팅을 진행할 것입니다. 프레임은 android로 설정해줍니다. 다양한 디바이스 기종들을 지원하기 때문에 디자인 패널에서 설정 가능합니다. 리소스 파일에서 앱바를 가져온 뒤 detach instance을 설정합니다. 이후, Prototype 설정에서 Scroll behavior의 포지션을 Fixed로 변경하면 스크롤 중에도 앱바를 고정시킬 수 있습니다. 모바일 ..

* 해당 글은 메타코드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가지가 존재합니다. 개체 크기 정렬 및 방향 절대 위치 예시를 들어볼게요. 가령 라벨이라는 컴포넌트가 있다고 합시다. 오토 레이아웃을 설정한 후 강의용이라고 이름을 변경했을 때 휴지통의 아이콘이 하늘색 배경 밖으로 삐져 나가는 것이 아닌 텍스트 길이에 알맞게 잘 이동하는 것을 확인할 수 있습니다. 오토 레이아웃을 설정하지 않는다면 유저가 일일이 조정해야 하기 때문에 ..