Figma FrameFigma frame 활용하기Figma frame 공부figma frame이란?Figma 실전

Figma에서 Frame 활용하기

KUKJIN LEE
KUKJIN LEE
2024년 4월 28일
221

Figma 프레임이란 무엇인가요?

Figma에서 프레임은 디자인 작업의 기본 틀을 제공합니다. 프레임을 통해 각종 디자인 요소들을 정렬하고, 화면 사이즈에 맞게 조정할 수 있습니다.

Frame 종류와 구현 순서

프레임은 다양한 디바이스와 화면 크기에 맞추어 제공됩니다. 주로 사용되는 프레임 유형에는 Phone, Tablet, Desktop, Presentation, Watch 등이 있습니다. 프로젝트의 필요에 따라 Desktop, Phone, Tablet 순으로 구현하는 것이 일반적입니다. 이는 화면 사이즈의 차이가 클 경우 디자인 요소의 변화가 필요하기 때문입니다.

  1. Frame 생성은 각 Category 즉, 旅行での基本知識, グルメ, 交通 생성하는게 좋지만, 유료이기 때문에 하나의 페이지에서 전부 진행하도록 하겠습니다. 실제 디자인 작업에는 문제가 없습니다.

 

Frame 생성하기 가이드

  1. 좌측 상단에 # 아이콘을 클릭합니다.

  2. 우측에 Phone, Desktop 등 사이즈를 선택하면 됩니다.

  3. 현재 저희는, Presentation 1980 * 1080을 진행하고 있습니다. 웹 디자인의 경우 Presentation 1980 * 1080으로 진행하는 경우가 많습니다. 이유는 가장 많은 사용자가 1980 * 1080을 사용하기 때문입니다.

  4. 우측에서 사이즈를 선택하면 Frame이 생성됩니다.

  5. 직접 생성하는 방법도 존재합니다.

 

 

  1. 제목 설정은 Frame 위 별도로 작성하는게 아니라, Frame 이름을 작성하는 곳이 존재합니다.

    1. ex) ①韓国旅行前に知っておくべきこと 적는게 아니라, Slide 16:9 -10 적힌 곳을 더블 클릭하면 제목 설정이 가능합니다.

  2. Frame은 복사가 가능합니다. Alt 버튼을 누르고 드레그를 하면 같은 크기의 같은 높이를 가진 박스를 복제할 수 있습니다. 간격 조정도 가능합니다.

관련 글

Depth(계층 구조) 적정 수준과 구조 설계

메뉴 및 정보 구조 설계 시, 사용자 경험(UX)를 고려한 적정 Depth(계층 구조)의 기준과 Depth가 깊어졌을 때 문제점과 해결 방안에 대해서 생각한 방법입니다. 특히 정보량이 많은 웹앱에 적합한 기준과 설계 방향에 대해서 생각했습니다. Depth란 무엇인가? ...

2025년 6월 25일167

게슈탈트 이론으로 UI/UX 디자인 최적화하기

웹 개발과 디자인의 세계에서는 사용자의 경험을 향상시키는 것이 가장 중요합니다. 이를 위해 게슈탈트 이론은 매우 유용한 도구가 될 수 있습니다. 게슈탈트 이론의 주요 원칙을 살펴보고, 이를 웹 디자인에 어떻게 적용할 수 있는지에 대해 알아보겠습니다. 이러한 원칙들을 이...

2024년 7월 29일292

Figma에서 버튼 클릭으로 페이지 및 섹션 이동 설정하는 방법

Figma에서 버튼을 클릭하여 페이지 간 이동하거나 페이지 내 특정 섹션으로 스크롤하는 방법을 알아보겠습니다. 1. 페이지 간 이동 설정 버튼 선택 : 페이지 또는 섹션으로 이동시키고 싶은 버튼을 선택합니다. 프로토타이핑 모드로 전환 : 오른쪽 상단의 Prototype...

2024년 6월 14일4322

Figma Dev Mode 활용

개발자 모드 사용법 개발자들은 Chrome의 F12 버튼을 통해 개발자 모드를 활성화하여 웹페이지의 개발 내용을 검사합니다. Figma의 개발자 모드 역시 유사한 기능을 제공하여, 디자인과 코드가 어떻게 연결되는지 직접 확인할 수 있습니다. 선택 및 디테일 그룹화된 객...

2024년 5월 16일510