반응형 UX 디자인 썸네일형 리스트형 피그마(Figma) - 영역 초과하는 텍스트에 말줄임표(...) 넣기(Truncate Text) 영역을 초과하는 텍스트가 발생하면 말줄임표(...)로 더 많은 텍스트가 있음을 사용자에게 알려 주는 것은 일반적인 UX 디자인 패턴 중 하나입니다. CSS에서는 'text-elipsis'와 같은 값을 통해 지정이 가능한데, 피그마에서도 이를 구현할 수 있습니다. 텍스트가 특정 영역을 초과했을 경우에는 해당 텍스트 레이어의 모드를 'Fixed size'로 변경해 주어야 합니다. 텍스트가 컨테이너 안에 배치되는 형식을 취해야 하기 때문입니다. 너비 설정은 고정값으로 해도 되지만, 컴포넌트 안에서 이용되는 경우 'Fill Container'로 설정하여 유동적으로 너비가 설정되게 하는 것이 더 좋을 수 있습니다. 이렇게 값을 설정하면 텍스트가 자동으로 줄바꿈이 되는 상태가 된 것을 확인할 수 있습니다. 이후에.. 피그마 무료 리소스 - 대한민국 은행 로고 모음 (* 심이서 님이 작업해 주신 피그마 커뮤니티 파일을 널리 공유하고자 하는 블로그 포스트입니다.) 디자인 작업을 하다 보면 다양한 리소스가 필요합니다. 특히, 은행과 관련된 프로젝트를 진행할 때는 각 은행의 로고가 중요합니다. 오늘 소개할 무료 리소스는 대한민국의 주요 은행 로고를 모아놓은 피그마 커뮤니티 파일입니다.리소스 링크:대한민국 은행 로고 모음 피그마 파일이 리소스의 장점:무료로 사용 가능: 피그마 커뮤니티 파일로 누구나 무료로 접근하여 사용할 수 있습니다. 디자인 비용을 절약할 수 있는 좋은 기회입니다.고품질 벡터 이미지: 모든 로고는 고품질 벡터 형식으로 제공되며, 크기를 조정해도 해상도 저하가 없습니다.편리한 사용: 피그마 내에서 바로 수정하고 사용할 수 있어, 작업 효율성을 크게 높일 수.. 피그마 (Figma) 무료 템플릿 - 샤드시엔 (shadcn/ui) Shadcn/UI 디자인 시스템 Figma 템플릿 소개Shadcn/UI란?Shadcn/UI는 아름답고 접근 가능한 고도로 커스터마이징 가능한 웹 애플리케이션을 쉽게 만들 수 있도록 돕는 강력한 UI 컴포넌트 라이브러리입니다. Tailwind CSS와 Radix UI를 기반으로 구축되어, 유틸리티 우선 스타일링과 견고하고 접근 가능한 컴포넌트 디자인의 장점을 결합합니다.Shadcn/UI 디자인 시스템 Figma 템플릿Shadcn/UI 디자인 시스템 Figma 템플릿은 디자이너와 개발자가 일관되고 시각적으로 매력적이며 사용자 친화적인 인터페이스를 만들 수 있도록 돕는 귀중한 리소스입니다. Figma에서 제공되는 이 템플릿은 Shadcn/UI 프레임워크와 일치하는 사전 디자인된 컴포넌트와 스타일을 포괄적으로 .. 피그마 (Figma) 무료 템플릿 - Radix UI (래딕스 UI) Radix UI 및 Figma 템플릿 소개Radix UI란?Radix UI는 고품질의 접근 가능한 웹 애플리케이션을 쉽게 개발할 수 있도록 돕는 오픈 소스 컴포넌트 라이브러리입니다. 접근성, 커스터마이징, 개발자 경험에 중점을 두어 설계된 Radix UI는 모든 디자인 시스템에 맞게 조정할 수 있는 스타일이 없는 저수준 UI 컴포넌트를 제공합니다. Radix UI는 또한 TailwindCSS와 원활하게 통합되어, 유연하고 빠르게 스타일을 적용할 수 있습니다. 주요 특징:접근성: WAI-ARIA 디자인 패턴을 준수하여 포괄적인 사용자 경험을 제공합니다.커스터마이징: 스타일이 적용되지 않아 디자인에 완전한 제어를 할 수 있습니다.개발자 친화적: 일관되고 완전히 타입된 API를 제공하여 사용이 용이합니다.Ta.. 피그마 (Figma) 무료 템플릿 - 테일윈드 CSS 스타일 (Tailwind CSS Styles) Tailwind CSS 스타일를 기본 템플릿으로 써야 하는 이유웹 프로젝트를 진행한다고 할 때 이제 테일윈드는 거의 기본 구성처럼 자리를 잡기 시작했습니다. 'shadcn', 'radix' 등 테일윈드를 기반으로 한 UI 라이브러리들이 점점 더 많은 사람들에 의해 개발되고 이용되고 있으며, 테일윈드는 이제 조금 심하게 말해서 CSS의 기본 스펙처럼 여겨지고 있는 것 같기도 합니다. 이는 테일윈드가 부트스트랩 등의 기본 UI 라이브러리와는 다르게 프레임워크 형식으로 가장 미니멀한 구조만 제공하고, 그 위에 실제 컴포넌트를 구성하거나 이용환경에 맞게 변경하는 것은 전적으로 이용자에게 달려있는 특성 때문인 것으로 보입니다.테일윈드 공식 피그마 템플릿이 존재하는데, 이 또한 기본적인 레이아웃과 색상, 스타일에 .. 피그마(Figma) 로 윅스 홈페이지 만드는 무료 플러그인 ‘Figma to Wix Studio’ 'Figma to Wix Studio' 소개: 디자인과 개발의 연결웹 디자인의 역동적인 세계에서, 효율성과 디자인과 개발 간의 매끄러운 통합은 매우 중요합니다. 이 점에서 'Figma to Wix Studio' 플러그인은 디자이너와 개발자가 협력하는 방식을 혁신적으로 변화시킵니다. 이 플러그인은 Figma 디자인을 Wix Studio로 직접 변환하는 과정을 간소화하여 디자인 비전과 기능적인 웹 사이트 간의 간극을 놀라운 속도로 줄여줍니다.'Figma to Wix Studio' 플러그인의 주요 기능직접 통합:이 플러그인은 Figma에서 Wix Studio로의 직접적인 파이프라인을 제공하여 수작업 코딩의 필요성을 없애고, 디자인을 기능적인 웹 요소로 번역하는 데 걸리는 시간을 크게 줄입니다.사용자 친화적인 .. 피그마(Figma) 배경 제거(누끼 따기) 무료 플러그인(Plugin) ‘아이콘8 백그라운드 리무버(Icons8 Background Remover)’ 포토샵을 통해서 보통 진행하지만, 비트맵 이미지의 특정 영역을 제거하여 일명 누끼 따기라고 불리우는 특정 인물이나 사물만 남기고 나머지를 투명처리하는 작업은 꽤나 손이 많이 가는 일입니다. 포토샵을 켜면 더 정교하게 될 수도 있지만, 어느정도 간단한 수준에서의 배경 제거는 피그마의 플러그인을 통해서도 가능합니다. 특히 관련하여 무료이면서도 좋은 품질을 지니고 있는 플러그인도 많기 때문에 활용을 고려해 보는 것도 업무 효율성 차원에서 나쁘지 않을 것으로 보입니다. 소개하고자 하는 플러그인은 배경 제거 플러그인 중 신뢰도가 높은 편에 속하는 서비스로서 '아이콘8 백그라운드 리무버'라는 이름의 플러그인입니다. 아이콘8은 각종 디자인 리소스를 제공하는 서비스로도 유명한데, 피그마용 배경 제거 플러그인도 무료로 .. 피그마(Figma) 자연스러운 그림자 생성 무료 플러그인(Plugin) ‘뷰티풀쉐도우(Beautiful Shadows)’ 피그마로 그림자를 만들다 보면 기본 그림자 효과로는 충분히 심미적으로 만족스러운 결과를 만들기가 어려울 때가 있습니다. 이럴 때에 활용할 수 있는 플러그인인 '뷰티풀 쉐도우(Beautiful Shadows)'를 소개드립니다. 해당 플러그인은 그림자의 크기와 색깔 거리 각도 등을 마우스를 드래그하여 쉽게 구성할 수 있게 도와 줍니다. 또한 최근 가장 보편적으로 아름다운 형태로 받아들여지는 그림자 형태를 기본값으로 제공하여 큰 노력 없이도 근사한 그림자 효과를 추가할 수 있도록 도와줍니다. 뷰티풀쉐도우 플러그인 다운받기피그마의 플러그인 메뉴를 활성화한 후 'Beautiful Shadows'를 키워드로 검색하여 동일한 이름의 플러그인을 발견하면 실행하도록 합니다. 해당 플러그인은 무료로 제한 없이 사용이 가능.. 이전 1 2 3 4 ··· 7 다음
단순함연구소 UX개발실
