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

안녕하세요 찐망고입니다.ai플러그인 관련 포스팅을 해달라고 했는데..제 맘에 쏙 드는 플러그인이 없어 포스팅을 안 하려다가..숏츠나 릴스보고 혹 하신 분들에게 이 글을 전합니다. 이전에 추천한 플러그인 중에 html.to.design이라는 플러그인이 있었죠?문서 링크를 연결하면 피그마 파일로 짠 하고 만들어주는 플러그인이었죠. 하지만 완벽하지 않다고...  관련포스팅글 피그마 추천 플러그인안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해uiweb.tistory.com   이번에 포스팅할 플러그인은 디자인 캡처이미지를 클론디자인해 주는 플러그인인데요.Codia Ai Design..

안녕하세요 찐망고입니다. 피그마가 업데이트 이후 툴바나 패널이 조금 바뀌었어요.오토레이아웃이나 컴포넌트, 베리언트, 컨스트레인트 등도 조금 바뀌었지요.영상을 만들면 조금 편할 거 같은데 왜 저는 아직도 텍스트로 포스팅을 하려고 하는 걸까요.옛날사람이라 그럼... 이전 글 참고 해주시고 포스팅을 이어할게요. 피그마 컴포넌트, 베리언트 (Component, Variants)안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일uiweb.tistory.com 피그마에서 컴포넌트와 베리언트는 디자인 시스템을 효율적으로 관리하고 재사용성을 높이는..

안녕하세요 찐망고입니다.오늘은 피그마를 이용하여 말풍선 컴포넌트를 만들어 볼 건데요.하나 만들어 놓으면 어떤 텍스트를 써도 어떤 방향으로도 사용하기 편한 말풍선이 가능합니다.일단 기본적인 Auto Layout과 Variant 정도만 알면 될 것 같아요 이전에 썼던 포스팅을 읽으면 피그마 말풍선을 쉽게 만들어 볼 수 있는데,컴포넌트로 만들기 위해선 몇 가지 작업이 더 필요해서 새로 포스팅해봅니다.   기본적으로 도형을 이용해서 툴팁박스를 만들 때아래쪽 꼬리 부분은 방향이 top, right, bottom, left로 바뀔 수 있으니 Auto Layout을 이용하여 만들 거예요.   도형 두 개를 합치고 꼭 해야할 것꼭 constrain을 맞춰주셔야 해요. 이후 컴포넌트로 등록합니다.컴포넌트 크기 확인해보세..

안녕하세요 찐망고입니다. 웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.Auto Layout과 Constraints를 이용해서 만들 수 있습니다.  일단 말풍선 모양을 만들 건데요.사각형 도형과 삼각형 도형을 합치고컴포넌트로 등록해야 합니다.   텍스트를 쓰고 섹션 프레임을 씌워서 Auto Layout을 먼저 해줍니다.말풍선과 Auto Layout을 해줄 건데요말풍선 컴포넌트를 잘라서 Frame1안에 붙여 넣어줄 거예요 둘이 겹쳐야 하는데 겹쳐지지 않고 저렇게 따로 놀아요그래서 저 Union컴포넌트를 앱솔처리해줄 거예요. 위 아이콘을 누르면 Union컴포넌트 아이콘 모양이 달라지면서 텍스트와 겹쳐집니다.참고로 오토레이아웃방향은 세로나 가로나 상관없고요중요한 건 레이어..

안녕하세요 찐 망고입니다. 최근 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):  이미지 업로드로 유사한 디자인 파일 탐색 변경할 수 있음..

안녕하세요 찐망고입니다. 오늘은 NH농협리츠운용모바일 사이트를 클론디자인해서 네비게이션에 인터렉션을 걸어볼겁니다. 일단 피그마는 디자인패널과 프로토타입 패널로 나누어지고, 프로토타입에서 인터렉션을 걸 수 있어요. Interractions에 더하기 아이콘을 클릭하면 이벤트와 애니메이션을 각각 고를 수 있는 메뉴가 뜨는데요 원하는 이벤트와 애니메이션을 찾아 골라주면 끝이긴 한데 디테일한 인터렉션을 걸어주려면 프레임작업을 조금 해주는게 좋아요 오늘은 간단하게 네비를 보였다 숨겼다 정도만 해볼게요 오픈오버레이는 현재 프레임위에 새프레임을 위로 올리는 건데. 위치값을 지정할 수 있어요 Overlay settings에서요 저는 메인프레임과 네비프레임이 같으므로 센터로 정렬을 했고, 오른쪽에서 왼쪽으로 보이기 위해 ..

안녕하세요 찐망고 입니다. 오늘은 디자인 관련 피그마 플러그인을 추천해볼건데요.. Iconify나 Unsplash처럼 엄청 자주쓰는건 아니지만 그래도 있으면 나름 쓸만한 플러그인들입니다. 이전 발행글도 참고해주세요~ 2023.07.14 - [UIUX디자인/피그마] - 피그마 추천 플러그인 피그마 추천 플러그인 안녕하세요 찐망고입니다. 벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요. 그래도 있으니까 편하다 하는 것들 위주로 포스팅 해 uiweb.tistory.com ARC - Bend your type! 텍스트를 먼저 쓰고 난 뒤 해당 플러그인을 실행시키면 밴드형태로 모양을 바꿀 수 있는데요. 글씨가 각각 하나씩 분리가 되고, 원형태도 가능해서 편..

안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해볼게요.  일단 이전글.. 0. styles등록 (text, color) - 이전글 참조2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid2023.07.05 - [피그마] - 피그마 Layout grid 피그마 L..

안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid 피그마 Layout grid안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을uiweb.tisto..