오늘은 피그마에서 컬러 팔레트를 쉽게 제작하는 순서와 팔레트를 만들때 사용했던 유용한 플러그인을 소개하려고 한다! 1. 제품의 콘셉트에 맞는 다양한 컬러들을 정의한다베이직 컬러의 color shade를 만들 때 일러스트의 blend 기능을 이용하였다.물론 피그마에도 다양한 플러그인을 가지고 있지만 내가 원하는 컬러 대비에서 shade를 뽑아내는 플러그인을 아직 찾지 못했다.light - dark를 지원하는 베이직 컬러 상 shade가 너무 미묘하게 변하거나 너무 격하게 변하게 되면 컬러를 뽑아 쓰기 어려운 것 같다. 이렇게 원하는 세 가지 컬러를 뽑아 shade를 완성하였다. 2. 피그마의 rename 기능으로 한 번에 컬러칩 네이밍을 한다.일러스트에서 만든 shade를 그대로 복사하여 피그마에 붙여..
최신글
-
디자인 시스템 디자이너가 AI 시대에 살아남는 법 — Claude Design 시대의 기록
AI 시대, 디자인 시스템 디자이너의 일은 어떻게 바뀌고 있을까. 그리고 우리는 정말 AI에게 대체될까. 1년 전, 우리는 이렇게 일했다불과 1년 전만 해도 디자이너의 하루는 작은 디테일과의 싸움이었다. 버튼의 크기, 아이콘의 위치, 글자 사이의 여백 한 픽셀까지. "이 작은 UI 하나를 어떻게 개선해야 사용성이 올라갈까"라는 질문을 붙들고 끝없이 토론했다. 가설을 세우고, 사용자 시나리오를 그리고, 동료들과 머리를 맞대며 더 나은 해결책을 찾아갔다.피그마와 개발 결과물 사이의 간극을 좁히기 위해 수없이 많은 회의를 했다. 컴포넌트 명명 규칙을 정하고, 토큰 체계를 세우고, 핸드오프 프로세스를 다듬었다. 디자인 QA를 돌리며 "여기 패딩이 4px가 아니라 6px이에요"라는 말을 몇 번이나 반복했는지 모르..
-
claude로 OKLCH기반 디자인 시스템 컬러 팔레트 플러그인 만들기
디자인 시스템 팔레트 개편을 하다가 사람의 머리론 계산하기 너무 어려워 오래된 숙제 하나를 꺼냈다. 발단디자인 시스템에서 컬러를 정리하다 보면 어느 순간 이상하다는 느낌이 온다. red-100이랑 blue-100을 나란히 두면 분명 같은 100인데 명도가 달라 보인다. 코드는 맞는데 눈이 틀렸다는 느낌. 처음엔 그냥 그런가 보다 하고 넘겼다.그런데 이게 누적되면 문제가 생긴다. 리스트 아이템마다 색이 달라 얼룩덜룩해 보이고, 라이트모드에서 괜찮았던 색이 다크모드에서 갑자기 튄다. 그러면 디자이너는 케이스마다 색을 수동으로 보정하게 된다. 이게 쌓이면 일관성이 무너진다.원인은 단순했다. HSL 기반으로 팔레트를 만들었기 때문이다. HSL의 한계초기에는 HSL를 기반으로 팔레트를 생성했는데 테마 변경 기능을..
-
[figma] 피그마에서 PPT 작업을?
인사이드 아웃의 불안이의 등장처럼 피그마에 갑자기 등장한 수상한 주황색 버튼!...config 당일날 갑자기 생성된 버튼 궁금해서 눌러봤는데 피그마에서도 이제 프레젠테이션을 할 수 있는 기능이 생겼다! Prototype Import 🧐가장 강력하다고 생각하는 기능은 프로토타입을 슬라이드에 포함하여 프레젠테이션을 보고있는 접속 유저들이 프로토타입을 테스트 해보고 투표도 할 수 있다는 것이다.이것은 구글 슬라이드도 못하고 ppt도 못하는 디자인 툴에서만 제공 할 수 있는 강력한 기능이라고 생각한다 . 더 이상 디자인 리뷰를 할 때 프로토타입을 보여주기 위한 영상을 만들거나 gif를 만들지 않아도 발표 도중에 바로 기능을 보여줄 수 있다. 또한 피그마의 동시 접속의 기능을 가져와 피그마와 동일하게 다른 유..
-
[우아콘 2022 Day1] 배민 선물하기 나만의 카드 개발 세션 후기
배민의 우아콘 일정중 제일 첫번째로 보았던 세션! 시간도 기획서도 없는 우리 회사 상황에 딱 맞는 제목이라 끌리게 되었다. 배민의 워킹그룹 ‘파티’ 유동적인 그룹구성, 상황에 맞는 의사결정, 자유로운 진행방식 그라운드 롤 정하기 (애자일 방법론 참고 변형해서 적용) 바쁘다보니 정책을 바꾸더라도 개발일정을 줄이게 됨 공유를 자주한다 의견제안을 언제든지 누구나! 킥오프 때 아이데이션 너무 많은 아이디어가 많아서 다만들기엔 시간이 부족하여 간략한 기능만 뽑아냈어야 함 직군 따라 중요하게 생각하는게 달랐음 서로가 동의하는 기능에 따라서 많은 토론끝에 mvp 기준을 잡음
-
[figma] 피그마에서 컬러 팔레트 쉽게 만들기!
오늘은 피그마에서 컬러 팔레트를 쉽게 제작하는 순서와 팔레트를 만들때 사용했던 유용한 플러그인을 소개하려고 한다! 1. 제품의 콘셉트에 맞는 다양한 컬러들을 정의한다베이직 컬러의 color shade를 만들 때 일러스트의 blend 기능을 이용하였다.물론 피그마에도 다양한 플러그인을 가지고 있지만 내가 원하는 컬러 대비에서 shade를 뽑아내는 플러그인을 아직 찾지 못했다.light - dark를 지원하는 베이직 컬러 상 shade가 너무 미묘하게 변하거나 너무 격하게 변하게 되면 컬러를 뽑아 쓰기 어려운 것 같다. 이렇게 원하는 세 가지 컬러를 뽑아 shade를 완성하였다. 2. 피그마의 rename 기능으로 한 번에 컬러칩 네이밍을 한다.일러스트에서 만든 shade를 그대로 복사하여 피그마에 붙여..