Web design/AI & UX·UI Tools7 [Figma] 작업 효율을 높여줄 유용한 피그마 플러그인 2025년 1월 기준으로 가장 유용한 Figma 플러그인을 소개합니다!Figma의 플러그인들은 작업 효율을 크게 높여줍니다. 프로젝트의 특성과 개인의 작업 스타일에 맞는 플러그인을 사용해보세요.대부분의 플러그인이 무료로 제공되지만, 일부는 프리미엄 기능을 위해 유료 옵션을 제공합니다. 디자인 자산 관련 플러그인Unsplash고품질 무료 이미지를 쉽게 삽입할 수 있습니다. (무료)https://www.figma.com/community/plugin/738454987945972471/unsplash Iconify100,000개 이상의 아이콘을 제공하는 거대한 아이콘 라이브러리입니다. (무료)https://www.figma.com/community/plugin/735098390272716381/iconify .. 2025. 1. 8. [Framer] 프레이머 특장점과 활용 사례 Framer는 디자인부터 배포까지 웹사이트 제작 전 과정을 단일 플랫폼에서 해결하는 노코드 웹 빌더입니다. 피그마와 유사한 인터페이스로 디자이너와 개발자 모두에게 효율적인 협업 환경을 제공하면서도, 실제 동작하는 웹사이트를 코딩 없이 구현할 수 있는 것이 특징입니다. Framer 핵심 기능1. 디자인 & 프로토타이핑 - 피그마 파일 임포트 지원으로 기존 디자인 작업 연속성 유지- 드래그 앤 드롭으로 인터랙티브 애니메이션 구현 (스크롤 기반 효과, hover/click 상태 관리)- 반응형 디자인을 위한 그리드/스택 레이아웃 및 브레이크포인트 설정 + 출처 : https://www.framer.com/features/design/ Web Design Tools in FramerCreate stunning.. 2024. 12. 28. [Figma] Component & Variants 1. Component컴포넌트는 재사용이 가능한 디자인 요소입니다. 버튼, 카드, 아이콘 등 자주 사용되는 UI 요소를 한 번 만들어 여러 곳에서 사용할 수 있어 작업에 효율적입니다.생성 방법① 컴포넌트로 만들 요소를 선택합니다.② 단축키 또는 우측 패널에서 "Create Component" 버튼을 클릭하면 선택했던 요소가 컴포넌트로 변환됩니다.단축키 - Mac: ⌥ Option + ⌘ Command + K- Windows: Ctrl + Alt + K컴포넌트 사용 및 복제 방법 - Assets 패널: 좌측 패널에서 Assets 탭을 클릭하여 컴포넌트를 찾고, 드래그 앤 드롭으로 디자인에 배치합니다.- Resource 툴 (Shift + I): 툴바의 Resource를 사용하여 컴포넌트를 선택하면 캔버스에.. 2024. 7. 19. [Figma] Figma Slides Config 2024에서 발표된 새로운 기능 중 하나인 Figma Slides에 대해 알아보자. https://www.figma.com/ko-kr/slides/"Figma Slides는 Figma Design의 강력한 기능과 정확성을 사용하기 쉬운 프레젠테이션 도구와 결합하여 내러티브(서사)에 생기를 불어넣는 동시에 일관성을 향상시켜 줍니다." 1. 왜 만들었나? 디자이너와 팀원을 위한 프레젠테이션 도구로 활용하도록 만들었다.하지만 누구든 역할이나 디자인 경험 수준에 관계없이 Figma Slides를 사용하면 퀄리티 있는 슬라이드 구조를 쉽게 만들 수있다. 피그마를 사용하면서도 프리젠테이션 자료 제작이 필요할 때 바로 활용할 수 있어 유용하다. 2. Figma Slides 왜 사용할까? 템플릿을 선.. 2024. 7. 5. [Figma] UX/UI Prototyping : 피그마에서 스와이프 인터랙션 구현하기 1-1. 페이지 스와이프페이지 스와이프 인터랙션은 사용자가 화면을 좌우로 스와이프하여 페이지나 콘텐츠를 이동하는 것을 의미합니다. 피그마에서는 다음과 같은 방법으로 구현할 수 있습니다.① 프레임 생성: 각 페이지를 나타내는 프레임을 생성합니다.② 프로토타입 설정: 프로토타입 탭에서 각 프레임을 연결합니다.③ 트리거 설정: "On drag" 트리거를 사용하여 스와이프 방향에 따라 다음 프레임으로 이동하도록 설정합니다.④ 스마트 애니메이션 적용: 부드러운 전환을 위해 스마트 애니메이션을 활성화합니다. 1-2. 텍스트 패럴랙스 이펙트스와이프할 때 텍스트가 다른 속도로 이동하는 효과를 구현합니다.① 거리 이동 및 수치 설정: 각 텍스트 레이어의 이동 거리를 다르게 설정합니다. 예: 첫 번째 프레임의 텍스.. 2024. 6. 11. Prototyping Tools : Figma vs ProtoPie 프로토파이(ProtoPie)와 피그마(Figma)는 디자인 작업에 사용되는 툴이지만, 각각의 강점이 다릅니다. 이 둘의 차이를 알아봅시다.피그마 (Figma)피그마는 주로 UI 디자인을 만드는 데 사용됩니다. 마치 디지털 스케치북처럼 생각하면 됩니다.피그마의 장점:- 앱이나 웹사이트의 화면을 그리는 데 최적화되어 있습니다.- 여러 사람이 동시에 작업할 수 있어 팀 프로젝트에 좋습니다.- 간단한 클릭 동작을 보여주는 프로토타입을 만들 수 있습니다.피그마 사용 예시:- 웹사이트 레이아웃 디자인- 앱 화면 디자인- 버튼을 클릭하면 다른 페이지로 이동하는 간단한 프로토타입 제작 프로토파이 (ProtoPie)프로토파이는 더 복잡하고 실제 같은 프로토타입을 만드는 데 특화되어 있습니다. 실제로 작동하는 앱이나 웹.. 2024. 6. 2. [ProtoPie] Improt : 디자인 파일 프로토파이에 불러오기 UXUI 디자인 작업물을 프로토파이로 불러오기 위해서는 디자인 툴에 프로토파이 플러그인을 설치하는 과정이 필요하다. 플러그인을 설치하면, 디자인 파일을 프로토파이에서 열어보록 하자. 1. 프로토파이 좌측 상단에 있는 Import 및 디자인 툴을 클릭하면 해당 사이트가 열린다. 2. 피그마, XD 등 해당 사이트 및 프로그램에 접속하여 프로토파이 플러그인을 설치한다. 완료! 이제 손쉽게 디자인 파일을 불러들일 수 있다. ** 사전 준비 및 유의 사항 - UXUI 디자인 툴(작업 파일)과 ProtoPie 툴 모두 열려 있어야 한다. - 디자인 파일 간에 디바이스 화면 사이즈가 동일해야 한다. (불러와서 수정 가능) 1. Figma : Export 창(우측 화면)을 띄우고 프로토파이로 가져갈 영역을 선택하여 .. 2024. 1. 31. 이전 1 다음 반응형
