디자인 TIP19 피그마(Figam) 팁 : 플러그인 활용해서 Variables 스타일을 쉽게 스타일 가이드로 만드는 방법 (Variables관련 유용한 플러그인 모음) 피그마로 작업을 하면서 스타일 가이드를 보통 Local Style이나 Variables로 많이 구축합니다. 저는 Token Studio를 대체하는 용으로 Variables을 더 사용합니다. 그래서 이번 포스팅에서는 Variables로 지정된 스타일을 쉽게 스타일 가이드로 제작해 주는 플러그인에 대해서 소개해볼까 합니다. 스타일을 지정한 후 가이드로 만들려면 일일이 매칭되게 기입해야 하고 또 작업하다가 스타일을 추가하거나 변경하면 그걸 다시 변경하고 만들어야 해서 관리가 번거롭습니다. 하지만 유용한 플러그인 하나면 스타일 지정만 하고 가이드는 보다 편리하게 생성할 수 있습니다. 또 변경이 되었을 경우에도 버튼 클릭 하나로 새롭게 추가된 스타일이 자동으로 업데이트되어 생성되기 때문에 저는 플러그인을 활용합니.. 2024. 10. 31. 피그마(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. 이전 1 2 3 다음
