Let Figma Design

오늘은 저번 포스팅에서 알아본 컴포넌트(Component) 기능에 더해 컴포넌트의 변형 버전인 베리언트(Variants)에 대해 알아볼게요~ 피그마에서는 컴포넌트 안에 여러 가지 속성의 베리언트를 설정하여 원하는 스타일을 변형하여 가져올 수 있습니다. 베리언트는 다른 스타일이나 속성을 갖는 여러 가지 버전의 컴포넌트를 의미합니다. ​ Variants는 4가지의 속성이 있습니다. ​ Variant Boolean Instance swap Text 가 있습니다. 컴포넌트를 만들고 Properties 패널의 플러스 버튼에서 확인할 수 있어요~ 속성 중 Variant는 스타일이 다른 속성을 지정할 때 쓰입니다. 버튼을 만든다고 가정해보면 컴포넌트의 베리언트는 Fill, line, diabled 등 버튼하나의 인스..

UXUI 디자이너의 Figma 2023. 7. 11. 09:45

오늘은 피그마의 핵심기능 컴포넌트(Component)에 대해 알아볼게요. 컴포넌트는 피그마를 쓰는 이유라고도 할 수 있겠습니다. 그만큼 중요한 기능이고 잘 익혀두면 매우 효율적인 작업을 할 수 있게 도와줍니다. ​ Component는? 재사용 가능한 UI 요소를 의미합니다. 예를 들어, 버튼, 입력 필드, 드롭다운 등의 UI 요소는 모두 Component로 만들 수 있습니다. 이러한 Component를 제작하면, 해당 Component를 다른 페이지 또는 프로젝트에서도 재사용할 수 있습니다. ​ Component를 사용하면 일관성 있는 UI를 구성할 수 있으며, 수정이 필요한 경우 필요한 만큼 수정하면 모든 페이지에서 해당 Component가 수정됩니다. 이는 작업 시간을 절약하고 일관된 UI를 유지할 ..

UXUI 디자이너의 Figma 2023. 7. 10. 12:53

오늘은 피그마에서 스켈레톤 디자인을 만들어 주는 플러그인을 소개해 드릴게요. 스켈레톤은 만들려면 조금 손이 많이 가는 작업이긴 한데요. 피그마 플러그인으로 빠르고 퀄리티 있게 만들 수 있습니다. 피그마에서 스켈레톤(Skeleton) 만들기 스켈레톤 디자인(Skeleton Design)이란? 웹 또는 모바일 애플리케이션의 로딩 과정에서 사용자에게 시각적 피드백을 제공하는 디자인 기법입니다. 로딩 시간이 길거나 내용이 동적으로 로드되는 경우, 사용자는 대기하는 동안 화면이 비어있거나 정적인 상태를 보게 됩니다. 이때 스켈레톤 디자인은 사용자에게 로딩 중임을 알리고, 콘텐츠가 로드되는 모습을 시각적으로 제공하여 사용자 경험을 개선합니다. ​ 스켈레톤 디자인은 주로 회색 톤의 선, 형상 또는 패턴으로 구성된 시..

UXUI 디자이너의 Figma 2023. 7. 10. 12:47

피그마에서 반응형 카드 만들기- 오토레이아웃 min, max 오늘은 피그마에서 오토레이아웃 wrap과 min width, max width를 활용한 반응형 카드를 만들어볼게요~ 피그마의 오토레이아웃을 이용하면 디바이스 크기에 대응하는 Responsive web을 비교적 쉽게 만들 수 있어요. ​ 카드 왼쪽에 들어갈 이미지는 우선 FiIl x Fixed를 줍니다. 그리고 Min width와 Max width도 값을 설정해 줍니다. Min, max를 설정해 주니 빨간색 가이드라인이 나타납니다. 이미지는 빨간색 가이드 라인 안에서만 움직이게 될 거예요~ 카드 왼쪽에 들어갈 텍스트는 모두 Fill로 늘어나거나 줄어들어도 영역 내에 가득 차게 해 줍니다. 텍스트 중간의 "chips"들은 오토레이아웃 Wrap, F..

UXUI 디자이너의 Figma 2023. 7. 10. 12:43

오늘은 새롭게 업데이트된 피그마의 오토레이아웃 Wrap과 min/max width를 이용하여 반응형 디자인을 해볼게요~ 이번 업데이트로 반응형 디자인도 피그마에서 쉽게 작업할 수 있습니다. 또한 Variable을 이용하면 여러 벌의 디자인을 만들지 않아도 퍼블리싱의 break point 표현도 가능하게 되었습니다. ​ Break Point란? 브레이크 포인트란 반응형 웹에서 사이즈가 변하는 지점을 말합니다. 예를 들어 앱 가로 사이즈는 375인데, 태블릿 744 사이즈로 앱을 본다고 한다면 보이는 형태가 달라질 것입니다. 노트북이나 데스크톱에서는 말할 것도 없고요. 그래서 디바이스에 맞게 디자인도 최적의 형태로 변하게 되는데요. 퍼블리싱의 변하는 지점을 Break Point라고 합니다. 대부분 앱사이즈,..

UXUI 디자이너의 Figma 2023. 7. 10. 12:34

작업하다 보면 브랜드 로고가 필요할 때가 있어요. 그럴 때마다 일일이 브랜드 사이트에 들어가서 로고를 다운로드할 필요 없이 벡터 로고를 받을 수 있는 플러그인이 있습니다. 피그마 플러그인 탭에서 Brandfetch 플러그인을 다운받아 주세요. 플러그인 실행 후 브랜드를 검색해줍니다. 브랜드의 컬러, 로고, 심벌 스타일, 관련 이미지까지 모두 볼 수 있습니다. 로고와 심벌은 모두 벡터 파일인 SVG로 받을 수 있으며, 심볼은 PNG로도 받을 수 있습니다. 컬러 스타일은 브랜드의 컬러셋을 볼 수 있어 디자인 시 이용할 수 있어 유용해 보입니다. ​ 전 세계 다양한 브랜드 로고들을 검색할 수 있으며 로고 클릭 시 피그마 파일로 자동 복사 되어 사용할 수 있습니다. ​ Brandfetch 플러그인으로 빠르고 효..

UXUI 디자이너의 Figma 2023. 7. 10. 12:27

오늘은 피그마에서 Design Guide를 만들어주는 플러그인을 소개해드릴게요~ 작업을 하다 보면 WSG(Web Style Guide)를 만들어 공유해야 될 때가 있죠. 웹스타일가이드(Web Style Guide)란, 하나의 사이트에 다양한 페이지의 일관성을 주기위한 운영 가이드라인입니다. 피그마나 제플린으로도 공유하지만 문서로도 공유해야 될 일이 있습니다. ​ 그런 의미에서 피그마의 플러그인 중 컴포넌트와 모듈 등 빠르게 스펙을 정리해서 보여주는 플러그인을 알려드릴게요. 피그마 플러그인 탭에서 EightShapes Specs 플러그인을 받아줍니다. 위와 같은 컴포넌트에 가이드를 만드려고 하는 경우 컴포넌트 선택 후 플러그인을 실행해 줍니다. 그리고 플러그인이 실행되면 Create Specs 버튼을 눌러..

UXUI 디자이너의 Figma 2023. 7. 10. 12:23

작업 중에 그래프나 차트를 그려야 할 때가 종종 있습니다. 이럴 때, 피그마에서는 플러그인을 활용하여 그래프를 자동으로 생성해 주는 도구를 소개해드릴게요. 이러한 플러그인을 사용하면 직접 그래프 요소를 디자인하고 배치하는 번거로움 없이, 데이터를 입력하면 자동으로 그래프를 생성해 줍니다. ​ 이렇게 자동으로 그래프를 생성해 주는 플러그인은 디자인 작업을 더욱 효율적으로 만들어주고, 일관된 스타일과 레이아웃을 유지할 수 있게 도와줍니다. 그래프의 타입과 스타일을 조정하고 데이터를 업데이트하는 기능을 제공하며 작업시간도 단축시켜 줍니다.​ ​ 첫 번째로 Chartline Plugin입니다. 사용이 쉽고 단순한 예쁜 그래프를 생성해 줍니다. 기울기나 커브등을 커스텀할 수 있어요~ 그다음 플러그인은 NB Cha..

UXUI 디자이너의 Figma 2023. 7. 10. 12:15