본문 바로가기

디자인 TIP (KO)23

Figma Tip | Ghost Plugin - 스켈레톤 UI 만들어주는 피그마 플러그인 추천 디자인 작업을 하다 보면 목업이나 로딩 상태를 표현해야 할 때가 자주 있습니다. 특히 서비스 초기 화면이나 네트워크 지연 상황을 대비한 스켈레톤 UI는 사용자에게 안정감을 주는 요소로 필수적으로 고려되어야 합니다.저도 초기에 이런 화면을 일일이 그리면서 "이 작업을 더 빠르게 처리할 수는 없을까?" 고민한 적이 많은데요.오늘 소개할 플러그인 Ghost는 이 작업을 단숨에 해결해주는 도구입니다.Ghost는 기존 UI layout은 그대로 유지한 채, 콘텐츠만 스켈레톤 형태로 깔끔하게 변환해줍니다. 특히 Figma에서 작업하는 디자이너라면 바로 실무에 적용할 수 있는 강력한 도구입니다.Ghost 플러그인 설치 방법Step 1: Figma 홈 → Templates and tools → From Communit.. 2025. 6. 10.
Figma Buzz 피그마 버즈 기능 사용 후기: 템플릿 제작과 등록, 활용방법 A to Z 피그마 버즈(Figma Buzz)는 피그마에서 제공하는 AI 기반 디자인 어시스턴트 기능입니다. 최근 디자인 툴에 AI가 접목되면서 작업 효율성이 크게 향상되고 있는데, 과연 피그마의 AI 기능은 얼마나 실용적일까 궁금했습니다.특히 템플릿 제작부터 팀 내 공유까지의 전체 워크플로우를 직접 경험해보고 싶어서 이번 실험을 시작하게 되었습니다. 디자인 업무에서 반복되는 작업을 줄이고, 팀원들과 효율적으로 협업할 수 있는 방법을 찾고 계신 분들께 도움이 되길 바라며 상세한 후기를 공유드립니다.1단계: 피그마 버즈 기능 접근하기피그마 버즈 기능은 피그마 인터페이스 우측 상단의 패널에서 접근할 수 있습니다. Create버튼을 눌러서, Buzz를 선택해주세요2단계: 실제 작업물 제작 및 템플릿으로 등록하기저는 우선 .. 2025. 6. 4.
피그마 플러그인 추천 | Design Lint - Style 연결 끊김, 해제 한번에 정리하기 (디자인 라이브러리 연결하기) 실무에서 디자인 파일을 여러 개 작업하다 보면 라이브러리나 스타일 연결이 끊어지는 경우가 자주 발생합니다. 특히 텍스트 스타일이나 컴포넌트가 원본과 분리되어 따로 놀고 있는 상황을 한 번쯤은 겪어보셨을 텐데요. 오늘은 이런 문제를 효율적으로 해결할 수 있는 Design Lint 플러그인 사용법을 공유해드리겠습니다. 연결이 끊긴 요소들, 어떻게 찾을까요?디자인 파일을 여러 개 만들다 보면 라이브러리가 끊겨 있는 경우가 자주 있어요. 저 같은 경우 특히 텍스트 스타일이 자주 끊깁니다. Pretendard 폰트로 통일해서 사용하고 있는데, 어느 순간 보면 연결이 끊어져서 독립적인 스타일로 변해있더라고요.이런 상황에서 하나하나 찾아서 다시 연결하기엔 너무 비효율적이죠. 특히 페이지가 많은 프로젝트에서는 더욱 그.. 2025. 5. 29.
피그마(Figam) 팁 : 플러그인 활용해서 디자인 가이드 (Design Guide) 쉽고 편하게 만들기 - 피그마 유용한 플러그인 추천 디자인 컴포넌트를 만들고 제일 중요하지만 귀찮은 부분이 사실 디자인 가이드를 만드는 부분이라고 생각합니다. 이 작업을 쉽게 해주는 플러그인이 있어서 피그마에서 쉽고 편하게 디자인 가이드를 만들 수 있는 유용한 플러그인을 소개해 드리려고 합니다. 덧붙여서 디자인 가이드 생성 후 컴포넌트 별로 디자인 가이드를 연계하여 관리하는 방법까지 함께 소개해 드리겠습니다.1. UI Stories장점 :  생성된 디자인 가이드를 별도 페이지에 생성할 수 있음단점 : Varient 유형까지만 간단하게 표현 됨[사용방법]1. 디자인 가이드를 제작하고 싶은 컴포넌트를 선택하고 UI Stories 플러그인을 실행합니다. (Generate on new page 선택 : 새 페이지에 디자인 가이드가 생성됨)2. Figma Page.. 2025. 2. 19.
피그마(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.

티스토리툴바