나비와 벌

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. 라이브러리 히스토리 관리하기 라이브러리 히스토리를 관리해봅시다. quick action에 Show version history를 선택하면 우측에 히스토리가 나오는 것을 확인할 수 있습니다. (또는 history 검색) 저장은 quick action에서 Save to version history를 통해 가능합니다. 각 시간대별로 자동으로 저장된 히스토리가 존재하고 restore this version을 눌러도 가장 최신의 버전은 그대로 존재하고 최근 작업에 영향을 미치지 않습니다. 작업 파일에서 커뮤니케이션하기 작업 파일에서 커뮤니케이션하는 방법은 다양합니다. 먼저, 우측 상단 share 버튼을 통해 작업물을 동료에..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. (실습)상세 페이지 스크롤 구현하기 오늘은 상세 페이지 스크롤을 구현해봅시다. 현재 썸네일이 잘린 ui가 있는데 화면이 넘어가도록 설정하겠습니다. 스테이터스바, 앱 바,하단의 버튼을 fixed 처리 해주시고 필요한 ui에만 애니메이션을 설정해줍니다. 애니메이션 설정 시 scroll with parent - horizontal로 설정해주시고 present하면 앱바나 다른 요소들은 고정된 채 필요한 ui만 스크롤 되는 것을 확인할 수 있습니다. (실습)장바구니 담기 모션 구현하기 장바구니 담기 모션을 구현해봅시다. 장바구니와 관련된 snack-bar를 하나 만들어줍니다. 애니메이션 설정을 해줍니다. 장바구니 버튼과 연..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. (실습) 앱 초기 화면 전환 구현하기 애니메이션 프로토타이핑 툴 차이점에 대해 알아보겠습니다. 피그마 화면 디자인과 애니메이션 동시 작업 하나의 툴& 요금제로 사용 가능 제한적인 애니메이션 구현 프로토타이 섬세한 애니메이션 구현 애니메이션 코드 제공 프로토파이 추가 개별 구매 전에 만들었던 스플래쉬과 로그인 화면을 복붙하고 스켈레톤 프레임을 새로 만듭니다. 스프래쉬 화면을 선택하여 좌측의 프로토타입으로 변경하고 마우스 드래그해서 스켈레톤 화면으로 연결합니다. 프로토타입을 설정하는 창이 뜨는데 상단의 On tap을 After delay로 변경합니다. 그러면 하단의 미리보기 창에서 화면 움직임이 보이고 instant는..

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다. (실습)검색 화면 만들기 오늘은 검색 화면을 만들어 봅시다. 화면 설계를 위해 필요한 목록이 뭔지 텍스트로 작성해줍니다. 그리고 이전 시간에 불러왔던 앱바를 설정해줍니다. 프레임은 안드로이드 라지를 사용했습니다. 이전 시간과 거의 유사하게 작업이 진행되는데요. 최근 검색어 텍스트를 생성하고 위치 지정 후, 적고자 하는 텍스트를 적어줍니다. '해당 텍스트를 오토 레이아웃 설정하고 높이랑 너비를 fixed로 변경합니다. 배경색과 글자색을 변경하고, 1개 복사하여 다중 선택 후 오토 레이아웃 설정합니다. 오른쪽으로 옮기고 패딩은 8으로 설정하고 복붙하여 텍스트를 변경합니다. 실시간 검색어 순위를 한 번 만들어볼게요. 순..

* 해당 글은 메타코드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로 변경하면 스크롤 중에도 앱바를 고정시킬 수 있습니다. 모바일 ..