디자인 TIP18 피그마(Figam) 팁 : Figma로 Lottie활용해서 로딩 아이콘 만들고 파일 추출하는 방법 예전에는 로딩아이콘을 만들 때 after effect를 활용해서 만든 후에 변환하는 번거로운 작업을 거쳐서 만들었습니다. 확인해 보니 figma를 통해서도 간단한 로딩아이콘 정도는 충분히 만들 수 있어서 편리한 팁으로 제작방법을 소개해 드리려고 합니다. :)먼저 최종 결과물입니다 ㅎㅎ 간단하게 도형의 크기변형과 색상이 돌아가는 느낌을 주는 로딩아이콘을 만들어보았습니다. 아래 파일은 figma에서 작업 후 lottie 플러그인을 사용해서 gif로 추출한 이미지입니다. lottie로는 gif로도 할 수 있고 json파일로도 추출할 수 있어서 아주 유용합니다.1. Figma로 로딩 아이콘 만들기먼저 figma로 로딩으로 하고 싶은 모형을 프레임별로 나눠서 제작합니다.저는 after delay기능을 활용해서 몇.. 2024. 5. 29. 피그마(figma) 팁 : Autolayout 활용해서 인풋 콤포넌트 만들기 (Input, Label, Supporting text) 피그마를 사용해서 콤포넌트를 만들 때 가장 중요한 것은 역시나 Autolayout일 것 같습니다. 실제 UI화면을 구성할 때 UI디자이너가 가장 많이 사용하는 그룹핑 방법이지만, 아직 피그마의 사용법이나 Autolayout을 사용하는 작업 방식에 대한 개념이 잡히지 않은 분들을 위해서 Autolayout을 사용해서 인풋 콤포넌트를 만드는 과정에 대해서 설명해 보려합니다. 빠른 이해를 돕기 위해서 Google Material Guide에 나온 인풋을 그대로 만드는 과정을 영상으로 담았으니 전체 작업 과정이 궁금하시다면 아래 영상을 참고해 주세요.인풋 제작과정의 단계별 설명은 주요 액션별로 화면을 캡쳐해서 설명글과 함께 아래쪽에 상세히 포스팅해 놓았습니다. 피그마(figma)로 인풋 콤포넌트 만드는 방법 영.. 2024. 1. 5. 피그마(Figam) 팁 : 상업 무료 이용 아이콘 플러그인 사용 방법 UI화면을 디자인하다보면 필연적으로 아이콘을 많이 사용하는데요. 규모가 큰 회사라면 아이콘을 전문적으로 그리는 담당 디자이너가 따로 있지만 규모가 작다면 UI 디자이너가 아이콘까지 다 그려야하는 경우가 많습니다. 아이콘이 작아 보이지만 사실 미세한 아이콘의 차이로 UI 화면의 퀄리티가 확 달라져 보일 때가 많습니다. 이럴 때 고민없이 완성도 높은 아이콘들을 활용하면 정말 편리한데요, 게다가 상업적으로 무료라면 사용하지 않을 이유가 없겠죠. 오늘은 피그마에서 상업 무료 아이콘을 사용할 수 있도록 도와주는 플러그인에 대해서 알아보고 사용방법을 살펴보려고 합니다. 상업적으로 무료로 사용 가능한 아이콘과 라이선스가 궁금하다면 아래의 포스팅을 참고해주세요 2023.11.23 - [UIUX 디자인] - 상업적 사용.. 2023. 12. 27. 피그마 (Figam) 기초 : 피그마 그룹핑 방법 (Group, Frame, Section, Autolayout) 피그마에서 UI 화면을 디자인할 때 가장 많이 쓰이는 기능 중에 하나가 바로 그룹핑인데요. 이 그룹핑 방법들의 차이를 정확히 인지하고 있어야, 디자인 목적에 맞는 적절한 그룹핑을 선택해서 작업할 수 있습니다. 그래서 오늘은 각각의 그룹핑 방법의 특성과 차이점 그리고 각 그룹핑은 언제 사용하면 좋은지에 대해서 포스팅해보려고 합니다. 피그마에서 요소를 그룹핑하는 방법은 아래와 같이 4가지가 있습니다. 피그마 그룹핑 방법 4가지 & 정의 1. Group : 공간(페이지, 영역 등)이 아닌 단순히 요소들의 묶음 2. Frame : 화면(페이지) 단위 또는 헤더, 푸터와 같은 큰 틀을 의미 3. Autolayout : 요소들의 집합으로, 레이아웃(간격 등의)을 적용할 수 있는 작은 공간 단위를 의미 4. Sect.. 2023. 11. 20. 피그마 꿀팁: 'Mockup Library' 플러그인 사용해 피그마로 목업하기 예전에는 정말 포토샵을 많이 썻는데, 프로그램이 무겁기도 하고 키려면 시간이 좀 걸려서 번거롭기도 해서 그런지 점점 디자인 외의 프레젠테이션 파일 작업도 피그마에서 하게 되는 것 같습니다. 하지만 포트폴리오 목업의 경우, 어쩔수 없이 포토샵을 사용했는데, 대부분의 디자인 파일이 피그마에 있다보니 목업을 위해서는 화면을 일일이 Export 해야하는 번거로움이 있었습니다. 오늘은 이러한 번거로움을 줄여줄 수 있는 피그마 Mockup Library플러그인을 소개하려고 합니다. Mockup Library플러그인을 사용하면 포토샵을 거치지 않고 다양한 perspective의 3D 목업도 가능하기 때문에 특히나 포폴을 위한 목업에 효과적입니다. 'Mockup Library'플러그인 사용방법 1. 먼저 피그마 Com.. 2023. 5. 13. 피그마 (Figam) 꿀팁 : Absolute positioning 정복하기 요소끼리 위/아래로 겹쳐서 표현해야할 때 CSS에서 주로 Absolute Position을 많이 사용해서 구현합니다. 이러한 Absolute Position을 피그마에서도 구현할 수 있는데요~ 생각보다 디자인할 때 이곳 저곳에서 사용할 일이 많아 소개해드리려고합니다 :) Absolute positioning 1.배경 요소에 Auto Layout 입히기 먼저 피그마에서 요소들을 Auto Layout (Shift + A)을 입혀줍니다. 특히 배경이되는 요소, 즉 아래에 깔릴 요소에는 무조건 오토레이아웃이 되어 있어야합니다. 하기 예시이미지에서는 Bar Graph BG가 배경이 되는 요소이고 Bar가 위에 띄울 요소입니다. 2. 피그마 우측 패널 상단에서 Absolute position 버튼 클릭 우측 패널에.. 2023. 4. 2. 피그마 (Figam) 기초 : 오토레이아웃(Auto layou) 정복하기 피그마를 활용해서 처음 디자인을 진행하는 입문자들에게 가장 낯선 기능 중 하나가 오토레이아웃(Auto layout)이라고 생각한다. 나 역시 포토샵에서 홈페이지와 이벤트 프로모션 디자인을 하다가, 본격적으로 앱기반 UIUX를 디자인하면서 지금의 피그마로 디자인 툴을 변환할 때 가장 어색했던 기능이 오토레이아웃(Auto layout)이었던 것 같다. 이번 포스팅에서는 피그마 초심자분들이 오토레이아웃(Auto layout)의 개념을 쉽게 이해하고 사용할 수 있도록 오토레이아웃(Auto layout)의 역할과 구성요소 그리고 생성방법 및 요소 설정방법을 소개하고자 한다. 1. 오토레이아웃(Auto layout)의 역할 오토레이아웃은 하나의 컴포넌트를 구성하는 작은 요소라고 할 수 있는데 컴포넌트에는 작은 버튼.. 2022. 12. 24. 피그마(Figma) 꿀팁 : 피그마에서 Themer 플러그인으로 라이브러리 변환하기 보통 스타일 가이드는 1개만 있을 것이라고 생각하지만, 작업을 하다 보면 프로젝트의 성격에 따라 스타일 가이드가 1개 이상이 되기도 한다. 특히 라이트 모드와 다크 모드를 모두 고려해 프로젝트를 진행한다면 스타일 가이드는 자연스럽게 라이트 모드와 다크 모드로 2개가 생성된다. 보통 라이트 모드 스타일 가이드를 활용해 먼저 디자인을 하고 다크 모드로 변환하는 작업을 진행하게 되는데 이때 컬러부터, 폰트 스타일 등을 일일이 변경해야 한다면 사실상 또 다른 하나의 프로젝트를 진행하는 것과 다를 바가 없을 것이다. 이를 위해서 피그마에는 라이브러리 스와이프 기능이 있지만, 이 기능은 한 번에 모든 프레임의 컬러를 다 변환해 버리기 때문에 한 프레임씩 감도를 맞추며 작업하기에는 적합하지 않다. 이럴 때를 위해서 .. 2022. 12. 11. 피그마(Figma) 꿀팁 : 그리드 생성 방법 및 라이브러리 스타일로 지정하는 방법 디자인의 기본이자 가장 중요한 뼈대인 그리드, 이러한 그리드를 Figma로 쉽게 설정하고 라이브러리에 저장해서 언제든 꺼내서 사용할 수 있다는 것을 알고 계신가요? 특히나 그리드는 매번 변경하기보다는 특정 양식을 정해놓고 사용하는 경우가 많기 때문에 피그마를 통해서 그리드 레이아웃을 설정하고 라이브러리로 관리하면 정말 작업 시에 정말 편리합니다. 이번 포스팅에서는 피그마에서 그리드를 설정하고 변경하는 방법과 평소 실무에서 자주 사용하는 PC의 기본 그리드 스타일인 Container형과 Fullscreen형과 모바일의 기본 옵션 값을 공유하려고 합니다. 또 한 번 설정한 그리드의 옵션 값을 매번 다시 지정하지 않아도 되도록 개인 라이브러리로 지정해서 사용하는 방법도 함께 소대 해 드리려고 합니다. 아래에 .. 2022. 11. 20. 이전 1 2 다음
