반응형 [Figma]17 [Figma] Android Studio 에 SVG 파일 적용하기 이전 글에서 notification에 쓰일 small Icon을 만들어줬습니다. 그럼 이렇게 만든 아이콘을 SVG로 export하여 Android Studio에 적용하는 과정을 진행하겠습니다. Android Notification small Icon의 가이드라인 크기는 24dp x 24dp인데 이미지는 결국 픽셀단위이기 때문에 고정값을 다루면 drawable 별로 이미지를 모두 내보내고 관리해줘야하는 과정이 필요하지만 SVG로 다루게 되면 dp 형태로 이미지를 다룰 수 있어서 이런 불필요한 과정을 모두 줄일 수 있습니다. 우리가 이전 글에서 만들었던 아이콘 파일을 SVG 파일로 내보내줍니다. 그리고 Android Studio의 내 프로젝트로 들어가서 drawable 리소스파일 오른쪽 클릭 -> New -.. 2023. 12. 10. [Figma] Android Notification smallIcon GuideLine 강의 Android Notification에 등록하는 smallIcon에는 가이드라인이 있다. 일반적인 Firebase Push 알람을 통해 오는 아이콘과는 다르다고 봐야한다. 가이드라인 1. 크기는 24dp x 24dp 2. 흰색만 사용 1번은 바로 다음 글에서 설명드릴 예정입니다. 2번의 경우, android smallIcon은 흰색과 투명색만 사용할 수 있도록 되어 있기 때문에 만약 이를 지키지 않을 시 온통 하얀색의 네모가 출력되는 현상을 겪을 수 있습니다. 그래서 기존의 제 앱의 아이콘을 어떻게 notification 전용 small Icon으로 변환하는지를 보여드리면서 이를 따라오시면 될 것 같습니다. 피그마를 열어줍니다. 제 앱의 아이콘인데, 이걸 small Icon 가이드라인에 맞는 디자인으로 .. 2023. 12. 10. Figma Prototyping - 1 이번 글에서는 프로토타입핑의 기초를 정리한다. 프로토타입핑은 프레젠테이션, 즉 화면의 이동 과정을 지정하는 작업이라고 보면 된다. 일단 화면 두개를 정의하고, 하나는 1 하나는 2 숫자를 써준다. 프로토타입핑 탭에 들어간다. 1이 써져있는 프레임을 클릭한 상황에서 화살표를 당길 수 있다. 당겨서 2에 올려놓으면, 슬라이딩 애니메이션 등 옵션을 다양하게 설정할 수 있다. 오른쪽 위에 재생버튼을 눌러 프로토타입핑을 진행해 볼 수 있다. 한가지 주의사항이 있는데, 만약 여러 다양한 화면에서, 하나의 화면으로 이동하는 프로토타입핑을 설정한 경우 해당 화면에서 뒤로가기를 누르면 어떤 화면으로 이동해야 할까? 이것은, Back 키를 눌렀을 때의 동작이 적용되도록 해주어야 하는데, 화살표를 당겨놓으면 알아서 뒤로가기.. 2023. 1. 4. Figma Text Style - 3 Text Style의 마지막. Text Scale에 대해 다룬다. 텍스트 두 개를 준비했다. 그 중 위에있는 텍스트에 대해 마우스 오른쪽 버튼을 클릭한 뒤에, Outline Stroke를 클릭해준다. 그럼 이건 더 이상 텍스트가 아니다. 이젠 Shape가 되었기에, 드래그를 통해 찌그러지기도 한다. 하지만 텍스트는, 늘리고 당겨봤자 텍스트 프레임 영역만 변경될 뿐 텍스트 크기는 늘어나지 않는다. 텍스트 스케일링 방법은 크게 두가지가 있다. 1. 텍스트 영역을 클릭한 뒤에, 디자인 패널에서 폰트 사이즈 영역을 클릭한 뒤 opt + 마우스 좌우 드래그 하면 폰트 사이즈 변경이 가능하다. 2. 메뉴 중에 Move 대신 Scale로 선택한 뒤에, 텍스트를 늘리고 당기면 된다. + 텍스트 영역 안에서, 개별 텍스.. 2023. 1. 2. 이전 1 2 3 4 5 다음 반응형
