Bible, Lee, Data
Faith, software, data, and everyday life.
CategoriesAll posts
[Figma] Prototype 기능 정리: 프레임 간 이동 설정하기
💡PrototypeFigma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명Interaction details Option터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다.사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다.None: 어떤 액션도 선택하지 않은..
[Figma] Figma의 생산성을 높여주는 7가지 플러그인과 위젯
🔎Figma 커뮤니티플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. FigmaExplore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers.www.figma.com 💡Annotation Sticky Notehttps://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma CommunityThis widget is one of the sticky note widget..
[Figma] Pages, Layer, Asset Panel
Figma의 디자인 파일은 툴바, 사이드바, 스크롤이 가능한 캔버스로 구성되어 있다. 이 중에서 좌측 사이드바는 레이어와 페이지에 접근할 수 있게 해 준다. Pages, Layers, Assets 세 가지 헤딩은 좌측 사이드바에서 확인할 수 있다. 각 패널 간에 전환하면서 사용하면 된다.Ctrl + Shift + \ 단축키를 누르면 좌측 사이드 바 토글을 할 수 있으며, Alt + 1 단축키와 Alt + 2 단축키를 누르면 Layer와 Asset 패널을 이동하는 게 가능하다. Figma의 모든 UI를 끄려면 Ctrl + \ 단축키를 입력하면 된다. 💡페이지 (Pages)각 페이지는 자체 캔버스를 가지며 디자인을 탐색하고 수정할 수 있으며, 각 페이지에서 개별 프로토타입을 만들 수도 있다.페이지는 좌측 ..
[Figma] Design Mode에서의 상단 파일 설정 메뉴 활용
💡Design Mode 메인 메뉴Figma 작업 화면에서 좌측 상단 Figma 로고 아래로 화살표를 클릭하면 메인 메뉴가 Drop Down 된다.Quick actions 메뉴는 작업하고 있는 파일 안에 들어 있는 기능을 찾아주는 검색 기능이다. Dev Mode 메인 메뉴Dev Mode로 전환한 뒤의 메인 메뉴는 Design Mode와 상이하므로 참고한다. 파일 불러오기메인 메뉴에서 Ctrl + Shift + K 단축키를 이용하여 Place image/video를 빠르게 할 수 있다.파일을 선택하면 마우스 커서 옆에 썸네일이 보이면서 화면 어디에 이미지를 위치할 것인지 보여준다.이미지를 삽입할 위치를 정하고 나면 Figma 파일 안에 이미지가 들어가게 되며, 좌측의 레이어 패널에서도 이미지 레이어가 추가..
[Figma] Design Mode와 Dev Mode의 활용
💡Design Mode디자인 모드는 화면을 디자인하기에 최적화된 모드로, 다양한 UI 요소를 설계하고 비주얼 속성을 정의하는 데 특화되어 있다.컬러 값, 크기, 위치 등의 속성을 조정하여 레이아웃 디자인을 변경할 수 있으며, 추가적인 작업을 통해 고도화된 디자인을 만들 수 있다. 💡Dev Mode개발 모드는 디자인된 화면의 코드를 확인하는 데 특화되어 있다.Dev Mode를 통해 개발자들이 디자인을 확인하고 버튼의 위치, 글꼴 크기 등을 쉽게 확인할 수 있도록 지원하고 있다.Shift + D 단축키로 간편하게 Design Mode와 Dev Mode를 전환할 수 있다. Dev Mode 시작하기오른쪽 상단의 'Dev Mode' 버튼을 클릭한다. 그러면 Welcome to Deve Mode라는 글과 함께 ..
[Figma] Figma 시작하기: 페이지 알아보기, 프로젝트 생성하기, Figma 커뮤니티
[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치💡Figma 환경 구축 https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.isaac-christian.tistory.comFigma를 설치하기 전이라면 위 글을 참고하여 계정을 생성하고, Figma를 설치하도록 한다. 💡페이지 알아보기프로젝트 팀 권한 Owner (Admi..
[Figma] 개발자 환경 구축: Figma 계정 생성 및 프로그램 설치
💡Figma 환경 구축https://www.figma.com/ Figma: The Collaborative Interface Design ToolFigma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.www.figma.comFigma 홈페이지에서 최신 업데이트 내용과 인사이트를 확인할 수 있다. Figma 계정 생성계정 생성을 위해 Get started for free 버튼을 클릭하여 가입 화면으로 넘어간다.팝업창에서 구글 이메일로도 등록이 가능하며, 업무용으로 사용할 경..
[Figma] Figma 디자인 툴을 사용해야 하는 이유
💡Figma란?Figma는 UX/UI 디자인 및 프로토타입 제작을 위한 기능을 온라인에서 사용할 수 있는 디자인 툴이다.웹, 앱, 인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원한다.2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 Figma가 선정되었다. 프로토타이핑 툴의 차이점 피그마 (Figma)스케치 (Sketch)프레이머 (Framer)포토샵 (Photoshop)실행 환경웹, 프로그램프로그램(MAC OS만 가능)웹, 프로그램프로그램실시간 공동 작업OXXX히스토리 관리OXOX애니메이션프로토타이핑OOOX디바이스별 대응OOOX위 표를 통해 각 프로토타이핑 툴의 차이점을 살펴보도록 하..
