피그마 사용법과 반드시 설치해야하는 플러그인 정보
디자인 업무에 인공지능이 점점 깊숙이 파고들고 있죠? 이제 디자이너는 직접 모든 것을 만드는 사람이 만들고 고민하는것이 아니라, AI의 제안을 기반으로 빠르게 방향을 틀고, 효율적으로 완성도를 높이는 역할로 변화하고 있습니다. 특히 최근에는 무료로 사용 가능한 AI 디자인 툴들이 많이 등장하면서, 1인 디자이너, 프리랜서, 스타트업 실무자들도 부담 없이 활용할 수 있는 환경이 마련되었다. 이번 글에서는 Figma를 제외한, … Read more
슬라이드를 만들려면 윈도우 유저라면 PowerPoint나 저처럼 Apple mac 유저라면 Keynote가 있어야 할까요? 이제는 디자이너뿐 아니라 누구나 Figma로 멋진 발표 슬라이드를 만들 수 있어요.게다가 디자인 퀄리티까지 챙기면서, 협업 + 실시간 피드백까지 가능하니한 번 써보면 발표 준비가 훨씬 수월해질겁니다. 왜 굳이 Figma로 슬라이드를 만들까? 결국 우리는 디자인을 가장 좋게 보여줘야 채택이 되는 운명입니다. 발표가 모든걸 판가름 합니다. … Read more
Figma는 단순히 UI를 디자인하는 툴이 아니고, 솔직히 모든 디자인을 다 할 수 있는 정말 천재적인 툴입니다.디자인한 화면을 실제처럼 동작하게 만드는 프로토타입 기능까지 탑재된,올인원 툴 입니다. 제가 Figma를 극찬 하는 이유중 가장 큰 이유죠. “버튼을 누르면 화면이 넘어가고, 탭을 누르면 내용이 바뀌는”그런 인터랙션을 코드 없이 구현할 수 있는 현존 하는 최고의 툴이랄까요?이번 글에서는 Figma의 프로토타입 기능을 … Read more
이번엔 많은 디자이너들이 궁금해 할거라고 예상하는 우리에게 아주 필수적인“반응형 디자인 Figma에서 Responsive UI 만드는 방법이죠” Auto Layout + Constraints + 스마트 리사이징 조합으로 해보는거죠.Figma에서도 진짜 반응형처럼 동작하는 UI 디자인이 가능하다는 걸 쉽게 알려줄거야! 데스크탑, 태블릿, 모바일 등 다양한 화면 사이즈에 맞게 하고,UI를 자동으로 반응하게 만들어야 하는 경우가 많잖아요.Figma는 코드 없이도 이걸 디자인 단계에서 미리 구현하고 … Read more
Better Font Picker + SkewDat + Vary Font→ 이 조합이면 우리는 완전 글씨에 스타일, 왜곡, 기울기, 감성까지 다 표현 가능해서 더이상 어도비를 사용할 이유가 없어! 지금부터 대표적인 글씨 기울기 및 스타일 변화 플러그인 2개를 아래서 잘 살펴바바. 1. SkewDat – 텍스트 기울기 & 왜곡 효과 플러그인 기능: 사용 예시: 사용법: 참고: SkewDat은 실제로 텍스트를 왜곡하는 … Read more
디자인 시안을 만들다 보면 이미지나 고퀄리티 사진이 급하게 필요할 때가 많아요. 그리고 감각적이고 아름다운 사진을 찾기도 하구요. 그럴 때 매번 구글 이미지와 네이버를 뒤적거리고 있죠? 자 이제는 Unsplash 접속하고, 다운로드하고, 다시 Figma에 업로드하고…생각보다 번거로운 반복 작업입니다. 그런데 이 모든 걸 단 1초로 줄여주는 기가막힌 플러그인이 있어요.바로 Figma + Unsplash 플러그인 Unsplash 플러그인은 왜 써야 해요? … Read more
Figma와 유사한 디자인 툴을 찾고 있다면, 여러 가지 들어본 적들 있으시죠? Figma는 매우 훌륭하지만요.다양한 프로젝트 환경에 맞는 다른 툴들도 유용할 수 있어요.아래는 Figma와 유사한 주요 툴을 소개하면서, 각 툴의 특징과 사용 장점도 함께 정리해 봤습니다. 1. Adobe XD Adobe XD는 Figma와 매우 유사한 기능을 제공하는 툴이고, 저도 이걸 어도비를 사용하다 피그마로 갈아 타게 된 케이스 … Read more
Figma는 기본 기능만으로도 매우 만족스럽지만플러그인을 제대로 활용하면 작업 속도는 더욱 올라가고, 퀄리티는 정말이지 상상도 못할 만큼 올라갑니다.특히 실무에서는 반복되어지는 자동화, 시스템화, 코드 연동이 점점 더 중요해지고 있죠. 아래는 2025년 기준으로 실무 디자이너라면 반드시 알아야 할 Figma 플러그인 TOP 10입니다.기능만 요약한 게 아니라, 실제 언제, 어떻게 쓰는지까지 정리해봤네요. 1. Autoflow 플로우 차트나 사용자 흐름(UX Flow)을 간단히 … Read more
요즘 대세 CSS는 뭐다? 정답은요! Tailwind CSS Tailwind는 기존의 CSS 방식과 다르지요.디자인 요소를 클래스 단위로 바로 조합할 수 있게 해주는 유틸리티 퍼스트(Utility-first) CSS 프레임워크 입니다. 왜왜왜 대세일까요? Figma 디자인을 Tailwind CSS로 바로 바꾸는 방법은? 방법 1: 수동으로 스타일 읽고, Tailwind로 변환 가장 기본적인 방법은 Figma에서 디자인 요소의폰트 크기, 여백, 컬러, 둥근 정도(radius) 등을 보고Tailwind 클래스에 … Read more
디자인 전달받고 나서“폰트 크기 뭐였지?”, “간격 기준은?”, “컬러 코드가 맞나?”매번 디자이너에게 묻고 있다면, 지금 바로 Figma Inspect 탭을 확인해보세요. Figma의 Inspect 탭은 개발자를 위한 정보 추출 전용 뷰입니다.디자인 요소의 사이즈, 여백, 폰트, 컬러, CSS 코드까지 자동 추출해주기 때문에Zeplin 없이도 빠르고 정확한 개발이 가능하죠. 이 글에서는 Figma Inspect 탭을 100% 제대로 활용하는 방법을 소개할게요. Inspect 탭, … Read more