69917pwpadmin

디자인 전달받고 나서“폰트 크기 뭐였지?”, “간격 기준은?”, “컬러 코드가 맞나?”매번 디자이너에게 묻고 있다면, 지금 바로 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

클라이언트 작업을 하다 보면 꼭 듣게 되는 질문이 있어요.“이 폰트 맞아요?”, “로고 간격은 어느 정도 띄우면 되죠?”, “이 색 써도 되는 건가요?” 처음엔 친절하게 설명하지만, 이런 질문이 반복되다 보면‘이걸 한번에 정리할 수 없을까?’라는 생각이 들거에요! 그럴 때 꼭 필요한 게 바로 브랜드 스타일 가이드입니다. 이 부분 진짜 진짜 중요합니다!디자인의 방향성과 기준을 한 번에 정리해놓는 문서로,모든 … Read more

우리가 만드는 사이트의 프로덕트가 커지고, 팀원이 늘어날수록 디자인의 일관성은 점점 무너지기 쉽습니다.버튼 하나, 색상 하나에도 기준이 없으면 브랜드 신뢰도는 물론 개발 생산성까지 떨어지죠.바로 이런 문제를 해결하기 위해 필요한 것이 디자인 시스템이고,그걸 Figma에서 구축하면 생산성과 협업 효율이 눈에 띄게 향상됩니다. 이번 글에서는 실무에서 바로 적용 가능한 Figma 디자인 시스템 구축 방법을 핵심만 추려서 정리해드릴게요. 디자인 시스템이란? … Read more

디자인 툴을 배우고 싶은데, 어디서부터 시작해야 할지 모르겠죠? 유튜브도 어렵고, 책을 보면서 하는건 더 어렵죠? Figma는 설치 없이 웹에서 바로 사용 가능하고,초보자도 금방 익힐 수 있는 디자인 도구입니다.하지만 처음 접하면 용어도 생소하고, 막상 따라 해보려면 방향을 잡기 어려운 경우가 많습니다! 그래서 여러분을 위핵서 준비했습니다!하루 10분 투자로, 일주일이면 완성되는 Figma 왕초보 탈출 챌린지! 따라만 해도 UI/UX … Read more

Figma를 처음 배우다 보면 우리는 여러가지 말을 알게 됩니다. ‘프레임’, ‘컴포넌트’, ‘오토 레이아웃’이라는 용어가 자주 등장합니다.겉으로 보기엔 비슷해 보이지만, 실제로는 각각 전혀 다른 역할과 개념이 있습니다.이 세 가지 기능은 UI/UX 디자인의 뼈대를 구성하는 핵심이기 때문에 초반에 잘 이해하고 넘어가는 것이 중요해요. 이번 글에서는 디자인 경험이 없는 사람도 바로 이해할 수 있도록,Figma의 프레임(Frame), 컴포넌트(Component), 오토 레이아웃(Auto … Read more