디자인 시안을 만들다 보면 이미지나 고퀄리티 사진이 급하게 필요할 때가 많아요. 그리고 감각적이고 아름다운 사진을 찾기도 하구요. 그럴 때 매번 구글 이미지와 네이버를 뒤적거리고 있죠? 자 이제는 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
Figma 디자인 전달 체크리스트 (디자이너용) 기본 준비 스타일 정리 컴포넌트 & Auto Layout 개발자 전달 편의성 최종 전달 전 체크 공유 방식
디자인 작업이 끝나고 나면, 이제 개발자에게 넘겨야 할 차례.하지만 이 과정이 막히면 전체 프로젝트 속도가 확 떨어집니다.예전엔 Zeplin 같은 툴을 통해 디자인을 전달했지만,요즘은 Figma 하나로 디자인 → 전달 → 코드 참고까지모두 가능하다는 거, 알고 계셨나요? 이번 글에서는 Zeplin 없이도 가능한개발자 친화적인 Figma 전달 방식을 정리해드립니다. Zeplin 은도 물론 아주 훌륭한 도구 입니다. 하지만 또 다른 … Read more
자자 주목 해주세요! 디자인은 끝났는데, 개발에 전달하자마자“폰트 사이즈가 이상한데요?”, “이 버튼 여백 맞나요?”, “컬러 코드가 다르네요” 같은 얘기를 들어 봤을겁니다! 디자인이 깔끔해도, 전달 방식이 정리되지 않으면 개발 단계에서 꼬이기 쉽상이죠?그래서 디자이너와 개발자가 모두 알아야 할 게 바로 Figma-to-Code 워크플로우예요.이 글에서는 디자인을 코드로 자연스럽게 넘기는 실무용 협업 루틴과 도구를 소개할게요. 1. 디자인을 ‘개발 가능한 형태’로 정리하는 … Read more
처음 Auto Layout을 접하면 “정렬이 자동으로 되는구나” 정도로만 느껴질 수 있어요. 근데 내가 컴포넌트를 만지다 보면,하지만 이 기능을 제대로 이해하고 쓰기 시작하면,버튼, 카드, 모달, 리스트, 전체 페이지까지 반응형처럼 유연하게 구성할 수 있습니다. Auto Layout은 단순한 ‘정렬 도우미’가 아니란 말입니다.반응형 UI의 핵심 도구이자, 컴포넌트 시스템의 기반 이라고 할 수 있죠.이번 글에서는 초급을 넘어서 실무에서 바로 적용할 … Read more
Figma를 쓰다 보면 가장 많이 듣는 단어 중 하나가 ‘컴포넌트’예요. 그런데 이 컴포넌트를 복사하거나 화면 곳곳에 배치하다 보면어느 순간 “이건 인스턴스라고 뜨는데 뭐가 다른 거지?”라는 의문이 생기죠. 사실 컴포넌트(Component)와 인스턴스(Instance)는디자인 시스템을 효율적으로 관리하는 핵심 구조입니다.이 두 개념을 제대로 이해하면반복 작업은 줄이고, 수정은 한 번에, 협업은 더 빠르게 할 수 있어요. 컴포넌트(Component)란? 컴포넌트는 말 그대로 원본(마스터) … Read more