찐망고'S 퍼블리싱그리고디자인

안녕하세요! 찐망고 입니다.혹시 디자인 토큰에 대해서 들어보신분 🤚 이전포스팅에서 Variable에 대해서 이야기하면서 나온게 토큰이죠? 피그마는 이젠 디자인과 개발 협업을 도와주는 프로그램으로 자리잡고 있어요.HTML은 프로그래밍언어가 아니죠? CSS도 마찬가지죠 하지만 CSS는 은근 까다로운 친구란 말이죠.쉽게 봤다가 뒷걸음질 몇번 쳐야해 그리고 또 CSS도 꾸준히 새로운 기능이 추가돼서 놓치면..하지만 모 어렵지는 않어 ㅋㅋ 여튼, CSS를 쓰기 불편했던 것 중에 하나가 반복되는 셀렉터와 반복되는 속성들 때문인것도 있거든요.그래서 등장한게 SASS/LESS 같은 전처리기들인데..여기서는 변수를 도입해서$primary-color: #1A1A1A; 이렇게 한번만 정의해두고, 필요할 때마다 불러다 ..

안녕하세요 찐망고 입니다.피그마에 Variable이라는 개념이 생겼는데 이걸 베리언트랑 같다고 인식을 하더라구요!이건 아님..구글에다가 피그마 베리에이블 치는데 자꾸 제 블로그 베리언트가 나온다면서빨리 포스팅을 해야겠다고 마음먹고자 시작한 글입니다. 피그마에서 Variable은 디자인 속성을 값으로 저장해두고, 필요할 때 불러와서 일관되게 적용할 수 있는 기능을 뜻합니다.예를 들어 색상 hex값 #F8F8F8를 직접 쓰는 대신 Gray/50 같은 이름으로 변수화해 두면,나중에 변수값만 바꿔도 그 변수를 사용한 모든 디자인이 한번에 업데이트 되는것을 뜻합니다.CSS의 클래스, JS의 변수랑도 비슷하죠? Variable(변수)값을 저장하고 재사용하는 개념 (색상, 간격, 수치, 문자열 등)모드별(light/..

안녕하세요 찐망고입니다. 피그마에서 컬러 시스템을 구성하고 관리할 때 유용한 컬러 관련 플러그인들이 있어요.그중 제가 자주 쓰는 플러그인 몇 가지를 소개해볼게요! 첫번째 포스팅 할 플러그인은 Color Palettes입니다.Color Palettes는 색상 조합을 손쉽게 만들고, 스타일로 바로 저장 가능합니다. Color Wheel+ 메뉴를 클릭하면 색을 지정하는 팔레트가 나오고 상단 메뉴에서 다양한 컬러 조합 스타일을 선택할 수 있죠. Analogous (유사색): 부드럽고 조화로운 느낌Monochromatic (단색 계열): 통일감은 있지만 다소 단조로움Triadic (삼색 대비): 생동감 있고 균형 잡힌 느낌Tetradic (사색 대비): 다채롭고 화려하지만 조절 안 하면 산만할 수 있음C..

안녕하세요 찐망고입니다.초보자들이 피그마 작업시 꼭 알아야 할 6가지 포인트를 정리하고자 포스팅 하려고 해요 1. 모든 요소는 반드시 프레임 안에 배치할 것 화면에 보인다고 끝이 아님. 레이어 패널에서 프레임 밖에 빠진 요소는Auto Layout, Export, 개발자 전달 시 누락될 수 있음 2. Clip Content 옵션 확인은 필수프레임에 Clip Content가 체크돼 있으면프레임을 벗어난 객체는 화면에 보이지 않음→ 진짜 프레임 밖인지, 숨겨진 건지 헷갈릴 수 있으니 레이어 확인 필수 3. 좌표·크기·여백은 소수점 없이 정수로 → 1px 오차가 정렬 깨짐·버튼 밀림 문제를 유발함→ x, y, width, height, padding, radius 등은 정수값으로→ 단, 아이콘은 예외 (벡터..

안녕하세요 찐망고입니다. 피그마에서 줄자를 찾고 싶나요? 피그마 줄자 (Ruler) 위치단축키: Shift + R줄자를 활성화하면 캔버스 상단과 좌측에 눈금자가 나타납니다.   안내선 (Guides) 사용법안내선 추가: 줄자에서 드래그하여 가이드 생성안내선 이동: 선택 후 드래그안내선 삭제: 선택 후 Delete 또는 마우스 오른쪽 버튼 클릭 → Remove guide

안녕하세요 찐망고입니다.2025년도 벌써 두달이 지나갑니다.이번에는 반응형 웹을 위한 해상도 트렌드를 분석하면서,디자인 & 개발할 때 반응형 작업을 어떻게 하면 좋을지 정리해볼게요. 해당링크는 Statcounter입니다. Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage ShareTracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.gs.statcounter.com PC해상도부터 비교해볼까요? (2024 vs 2025) 1920 × 1080의 ..

안녕하세요 찐 망고입니다. 최근 Config 2024에서 재설계된 Figma UI3을 소개받았는데요.새로운 UI3은 디자인 경험을 단순화하려고 노력한 흔적이 보입니다.그리고 생각보다 많이 바뀌었어요. 해당 링크를 참고 삼아 포스팅해보려고 합니다.https://help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI  내비게이션 패널:UI 최소화: 클릭 아이콘으로 탐색패널과 속성패널을 축소할 수 있음파일 이름 및 위치:  파일이름 옆 드롭다운 아이콘을 통해 파일이동, 라이브러리, 브랜치생성, 버전기록등을 손쉽게 수행할 수 있음.Assets탭: 구성요소를 검색, 탐색, 삽입하는 과정이 더 쉬어짐     - 이전 피그마 page..

와 찐망고입니다..다른 발 빠른 분들에 비하면 조금 늦은 포스팅인데요.. 피그마가 업데이트를 했어요 이번엔 꽤 아주 훌륭한 내용들이 많은데 각각 업데이트된 내용을 피그마로 직접 작업 후 포스팅 하려다가 ㅎㅎㅎ그럼 시간이 더 걸릴 것 같아 올해 컨퍼런스 요약된 주요 업데이트 내용을 포스팅해보려 합니다. Figma Config 2024 컨퍼런스는 6월 26일부터 27일까지 샌프란시스코에서 열렸으며,디자이너와 개발자를 위한 혁신적인 기능과 업데이트를 발표했습니다. 일단 youtube 링크부터  youtube내용을 정리해 보면 Figma AI ( search for simillar명령어 ) 완성된 디자인(app)의 기존 피그마 파일 찾기 (01:44):  이미지 업로드로 유사한 디자인 파일 탐색 변경할 수 있음..