Category: Interactive Design

  • 피그마 Config 2023 주요 업데이트 소식

    피그마 Config 2023 주요 업데이트 소식

    개발자 모드(Dev Mode)

    Figma는 개발자를 위해 특별히 설계된 Dev Mode라는 새로운 작업 공간을 도입했습니다. 여기에는 설계와 개발 간의 격차를 해소하는 데 도움이 되는 몇 가지 기능이 포함되어 있습니다.
    이것은 개발자의 요구를 충족하고 플랫폼 내에서 집처럼 느끼도록 하는 것을 목표로 설계된 Figma 내의 작업 공간입니다. Figma는 전통적으로 설계 도구로 여겨져 왔으며 Dev Mode의 도입으로 Figma는 설계와 개발 간의 격차를 해소하고자 합니다.
    Dev Mode는 현재 베타 버전이며 2023년까지 모든 사용자가 무료로 사용할 수 있습니다.

    도구 및 코드베이스에 연결

    Dev Mode를 사용하여 개발자는 Jira, GitHub 및 Storybook과 같은 인기 있는 도구를 포함하여 기존 도구 및 코드베이스와 원활하게 통합할 수 있습니다. 이를 통해 제품 팀과 개발자를 위한 보다 간소화된 워크플로가 가능합니다.

    작업된 내용에서 필요한 항목 추적

    이는 개발자가 최종 제품에서 구현해야 하는 디자인 요소 및 변경 사항을 추적하는 데 도움이 되는 편리한 기능입니다.
    이렇게 하면 생산 단계로 이동할 준비가 된 요소에 대한 명확하고 체계적인 개요를 제공하여 라이브 제품에 대한 변경 및 업데이트 구현 프로세스를 간소화하는 데 도움이 됩니다.

    VS Code에서 Figma를 사용하여 코드와 함께 파일 검사

    이 기능을 통해 개발자는 Visual Studio Code를 사용하여 코딩한 위치에서 바로 디자인 파일을 검토할 수 있습니다. 이것은 디자인과 개발을 더욱 긴밀하게 하여 서로 다른 도구 사이를 전환할 필요성을 줄입니다.
    VS Code용 Figma 확장 프로그램을 사용하면 개발 환경을 벗어나지 않고도 디자인 파일을 탐색 및 검사하고, 디자이너와 협업하고, 변경 사항을 추적하고, 디자인 구현 속도를 높일 수 있습니다. VS Code 확장용 Figma를 사용하여 다음을 수행합니다.

    • 댓글 및 활동을 실시간으로 확인하고 응답합니다.
    • 디자인을 기반으로 코드 제안 받기
    • 코드 파일을 설계 구성 요소에 연결

    변수(Variables)

    이것은 Config의 대규모 업데이트였습니다. 변수를 도입하면 보다 간소화되고 효율적인 설계 프로세스가 가능해집니다. 변수는 디자인 전체에서 재사용할 수 있는 Color, Number, Text 및 부울 값을 저장할 수 있습니다.

    변수의 별칭(alias) 지원

    이 기능을 사용하면 보다 상황에 맞는 변수를 사용할 수 있으므로 전체 팀이 변수를 더 쉽게 이해하고 사용할 수 있습니다.
    별칭을 사용하면 변수에 대해 다른 이름(alias)을 만들 수 있습니다. 이는 프로젝트 내에서 동일한 값을 다른 방식으로 참조할 수 있는 경우에 유용할 수 있습니다.
    예를 들어 어떤 곳에서는 배경색으로, 다른 곳에서는 테두리 색으로 사용되는 기본 브랜드 색상이 있을 수 있습니다. 이들 각각에 대해 별도의 변수를 만드는 대신 색상 값에 대해 하나의 변수를 만든 다음 원래 변수를 참조하는 “Background Color” 또는 “Border Color”과 같은 별칭을 만들 수 있습니다. 이렇게 하면 브랜드 색상이 변경되면 원래 변수만 업데이트하면 모든 별칭에 변경 사항이 반영됩니다.

    변수의 범위(scoping) 지정 지원

    범위 지정은 변수를 사용할 수 있는 컨텍스트를 나타냅니다. 디자인 시스템의 맥락에서 범위는 특정 프로젝트, 프로젝트 내의 특정 페이지 또는 단일 구성 요소일 수 있습니다. 범위 지정은 변수가 적용되는 위치를 명확하게 하여 디자인 시스템의 복잡성을 관리하는 데 도움이 됩니다.
    예를 들어 전체 디자인에서 일반적으로 사용되는 패딩 크기를 정의하는 변수가 있을 수 있습니다. 전역 범위 변수일 수 있습니다. 그러나 특정 구성 요소 내에서 다른 패딩 크기를 원할 수 있습니다. 이름은 같지만 해당 구성 요소로만 범위가 지정된 새 변수를 정의할 수 있습니다. 해당 구성 요소 내에서 패딩 변수를 참조하면 구성 요소 범위 값을 사용합니다. 패딩 변수를 다른 곳에서 참조하는 경우 전역 값을 사용합니다.

    값이 다른 변수 모드

    Figma에서 변수 모드를 사용할 때 각 테마에 대한 변수 집합을 정의할 수 있습니다.
    예를 들어 light-background 및 light-text와 같은 밝은 테마에 대한 색상 변수와 dark-background 및 dark-text와 같은 어두운 테마에 해당하는 변수가 있을 수 있습니다.
    이러한 변수는 색상에만 국한되지 않고 타이포그래피, 간격 또는 특정 요소의 표시를 제어하는 ​​부울 값과 같은 다른 디자인 요소도 포함할 수 있습니다.
    이러한 테마 관련 변수가 정의되면 변수 모드를 전환하기만 하면 디자인에서 테마 간에 쉽게 전환할 수 있습니다. 예를 들어 다크 모드에서 디자인이 어떻게 보이는지 확인하려면 변수 모드를 ‘어두움’으로 전환하기만 하면 테마 변수를 참조하는 모든 디자인 요소가 다크 테마 값을 반영하도록 업데이트됩니다.

    플러그인 및 REST API 지원

    이렇게 하면 변수의 기능이 확장되어 생성 및 관리를 확장할 수 있습니다.
    플러그인 지원을 통해 개발자는 변수와 상호 작용하는 Figma 플러그인을 만들 수 있습니다. 예를 들어 특정 변수를 개체 선택에 적용하는 프로세스를 자동화하거나 디자인 파일에서 변수가 사용되는 방식에 대한 보고서를 생성하도록 플러그인을 설계할 수 있습니다. 이를 통해 반복 작업의 속도를 크게 높이고 일관성을 강화하며 디자인 시스템에 대한 귀중한 통찰력을 제공할 수 있습니다.
    REST API 지원을 사용하면 Application Programming Interface(API)를 통해 Figma의 설계 데이터를 다른 시스템과 통합할 수 있습니다. 즉, Figma의 변수는 Figma 외부에서 프로그래밍 방식으로 액세스하고 조작할 수 있으며 마찬가지로 외부 데이터를 사용하여 Figma의 변수를 업데이트할 수 있습니다.

    고급 프로토타이핑

    훨씬 더 사실적이고 반응이 빠른 방식으로 사용자 입력에 반응하는 프로토타입을 생성할 수 있는 변수, 조건 및 표현식을 사용하여 보다 역동성과 상호 작용으로 디자인에 생명을 불어넣으십시오.

    • 프로토타이핑의 변수(Variables)는 numbers, text, colors, 또는 booleans (true/false)과 같은 값을 보유할 수 있습니다. 이러한 값은 프로토타입 전체에서 사용 및 조작하여 보다 동적인 상호 작용을 생성할 수 있습니다. 예를 들어 변수는 버튼을 클릭한 횟수를 포함하거나 토글 스위치의 현재 상태를 저장할 수 있습니다.
    • 조건(Conditions)을 사용 하면 프로토타입에서 논리를 만들 수 있습니다. 변수의 현재 값을 기반으로 다른 조치 또는 결과를 지정할 수 있습니다. 예를 들어 “버튼을 5번 이상 클릭하면 다른 화면으로 이동합니다”라는 규칙이 있을 수 있습니다.
    • 식(Expressions, Formula)을 사용 하면 변수에 대한 계산 또는 변환을 수행할 수 있습니다. 예를 들어 버튼을 클릭할 때마다 카운터 변수를 증가시키거나 사용자 입력에 따라 새 색상을 계산할 수 있습니다.

    상황에 맞는 편집 및 인라인 미리보기

    이러한 사용성 업데이트를 통해 동일한 보기에서 프로토타입을 편집하고 미리 볼 수 있으므로 디자인 프로세스 속도가 빨라집니다.
    전통적으로 디자이너는 디자인을 변경한 다음 이러한 변경 사항이 프로토타입에서 어떻게 보이는지 미리 보기 위해 다른 보기 또는 모드 간에 전환해야 했습니다. 이것은 특히 피드백이나 테스트를 기반으로 디자인을 반복할 때 시간이 많이 걸리는 프로세스가 될 수 있습니다.
    이 업데이트를 통해 디자이너는 이제 디자인을 변경하고 보기를 전환하지 않고도 이러한 변경 사항이 프로토타입에 어떤 영향을 미치는지 즉시 확인할 수 있습니다. 이 상황에 맞는 편집 및 인라인 미리보기 기능을 사용하면 디자인 변경에 대한 신속한 반복 및 즉각적인 피드백을 허용하여 디자인 프로세스 속도를 크게 높일 수 있습니다.

    자동 레이아웃 개선

    이제 자동 레이아웃 기능을 통해 이전과는 달리 요소가 컨테이너 크기에 반응할 수 있습니다.

    • 래핑(Wrap)은 기본적으로 디자인 요소가 텍스트처럼 흐를 수 있도록 합니다. 수평으로 배열된 요소 그룹이 있고 그룹이 상위 프레임에 비해 너무 넓어지면 요소가 자동으로 다음 행으로 “줄 바꿈”됩니다. 이는 태그 목록의 태그 또는 그리드의 항목과 같이 다양한 양의 콘텐츠 또는 화면 크기에 적응해야 하는 구성 요소를 디자인할 때 특히 유용합니다.
    • 최소 또는 최대 높이/너비(Min or max height/width)는 설계 일관성과 무결성을 유지하는 데 도움이 됩니다. 이러한 제약 조건을 정의하면 요소가 포함하는 콘텐츠나 크기에 관계없이 요소가 너무 작아지거나(읽을 수 없거나 클릭할 수 없게 됨) 너무 커지지 않도록(레이아웃을 버리거나 다른 요소와 겹칠 수 있음) 방지할 수 있습니다. 보고 있는 화면.

    업그레이드된 글꼴 선택기

    새롭고 향상된 글꼴 선택기를 통해 디자이너는 완벽한 글꼴을 그 어느 때보다 빠르고 쉽게 찾을 수 있습니다.

    • 업데이트된 글꼴 선택기에서 검색(Search)하면 디자이너가 이름을 입력하여 찾고 있는 정확한 글꼴을 빠르게 찾을 수 있습니다. 이는 원하는 글꼴을 찾기 위해 목록을 수동으로 스크롤할 필요가 없기 때문에 큰 글꼴 라이브러리로 작업할 때 특히 유용합니다. 이를 통해 디자인 프로세스의 속도를 크게 높이고 다양한 글꼴을 보다 쉽게 ​​실험할 수 있습니다.
    • 필터링(Filtering)은 serif, sans-serif, monospace 등과 같은 특정 기준에 따라 글꼴 목록을 좁힐 수 있는 방법을 제공합니다. 이것은 어떤 글꼴을 사용할지 잘 모르겠고 특정 범주 내에서 몇 가지 옵션을 비교하려는 경우에 매우 유용할 수 있습니다. 올바른 글꼴을 선택하는 과정이 덜 부담스럽고 ​​집중됩니다.
    • 자체 글꼴의 미리보기(Preview font names) 글꼴 이름은 작지만 중요한 업데이트입니다. 이전에는 모양을 확인하기 위해 디자인의 일부 텍스트에 글꼴을 적용해야 했습니다. 이제 글꼴 선택기에서 바로 각 글꼴의 미리보기를 볼 수 있으므로 많은 시간과 클릭 수를 절약할 수 있습니다. 또한 각 글꼴의 특성과 성격이 디자인에 어떻게 부합하는지 한눈에 확인할 수 있습니다.

    파일 브라우저 업데이트

    눈에 띄는 개선 사항 중 하나는 향상된 검색 기능입니다. 새로운 업데이트를 통해 사용자는 특정 키워드나 구문을 사용하여 외부 팀이 공유한 파일 또는 프로젝트를 빠르게 찾을 수 있습니다. 이는 Figma에서 많은 수의 프로젝트를 처리할 때 특히 유용합니다.
    이제 파일 브라우저의 정렬 및 필터링 옵션이 개선되었습니다. 사용자는 마지막 수정 날짜, 파일 소유자 또는 파일을 공유한 팀과 같은 다양한 매개 변수를 기준으로 파일을 정렬할 수 있습니다. 이렇게 하면 더 쉽게 탐색할 수 있고 작업 공간을 체계적으로 유지하는 데 도움이 됩니다.
    또한 새로운 ‘공유 파일’ 섹션이 있습니다. 외부 팀에서 사용자와 공유한 모든 파일과 프로젝트가 함께 그룹화되는 전용 공간입니다. 이렇게 하면 서로 다른 외부 팀과 자주 공동 작업하는 사용자가 더 이상 자신과 공유된 파일을 찾기 위해 자신의 파일을 뒤질 필요가 없기 때문에 상당한 시간을 절약할 수 있습니다.

    Figma, Diagram을 인수!

    Figma는 AI에 대한 투자를 가속화하기 위해 Diagram을 인수했습니다 !
    Figma는 전체 Figma 플랫폼에서 AI 기능을 제공하기 위해 Diagram과 협력할 계획입니다. 이번 인수는 도구의 AI 기능을 향상시키는 중요한 단계임이 분명하며, 현재 기술 산업이 나아가고 있는 방향으로 볼 때 Figma가 일련의 AI 기반 기능을 갖추기 전에는 시간이 없다는 것이 분명합니다.

    개발자 모드의 변경 사항 비교

    개발 모드를 사용하면 프레임이 마지막으로 편집된 시기를 확인하고 버전 기록의 여러 지점에서 변경된 사항을 비교할 수 있습니다. 설계에서 개발로 전달하는 데 여러 번의 반복이 필요한 경우가 있으므로 버전 기록을 통해 설계 변경 사항을 쉽게 추적하고 프로덕션 코드에 업데이트를 정확하게 반영할 수 있습니다.

    • Version history
      저장된 버전과 자동 저장된 버전을 포함하여 파일 기록의 타임라인을 봅니다. 현재 버전과 비교하려면 이전 버전을 클릭하십시오.
    • Side by side 나란히
      프레임의 선택한 버전과 현재 버전을 나란히 보기. 를 사용하여 모달의 확대/축소 설정을 조정합니다.확대하고오른쪽의 축소 버튼.
    • Overlay
      선택한 버전 위에 있는 현재 프레임 버전의 오버레이 보기는 작은 편집 내용을 눈에 띄게 만드는 데 유용합니다. 오른쪽에 있는 슬라이더를 사용하여 현재 프레임의 투명도를 조정하거나가시성을 전환합니다. 를 사용하여 모달의 확대/축소 설정을 조정합니다.확대하고오른쪽의 축소 버튼.
    • View edited layers
      프레임 기록 모달을 사용하면 시간이 지남에 따라 프레임의 레이어가 어떻게 변경되었는지 확인할 수 있습니다. 레이어 변경 사항은 다음 중 하나로 표시됩니다.
      – 편집됨: 레이어가 현재 버전과 선택한 버전 사이에서 편집되었습니다.
      – 추가됨: 레이어가 현재 버전과 선택한 버전 사이에 추가되었습니다.
      – 제거됨: 레이어가 현재 버전과 선택한 버전 사이에서 제거되었습니다.
      목록에서 레이어를 클릭하면 병렬 또는 오버레이 보기에서 업데이트된 구성 요소가 확대됩니다.
    • Compare properties
      편집된 레이어를 선택하면 이전 버전 및 현재 버전에서 할당된 값과 함께 업데이트된 속성이 표시됩니다.
  • 버튼 디자인 기본 원칙

    버튼 디자인 기본 원칙

    아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.

    Button : “submit”, “merge”, “create new”, “upload” 등과 같은 작업을 수행할 때 사용된다.
    Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
    Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)

    버튼의 상태(states)

    버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나이다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스(Affordance)가 있어야 하지만 구성 요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안 된다.

    버튼에 알아볼 수 있는 디자인 사용

    사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.

    디자인은 우선순위와 관련되어야 한다.

    버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.

    버튼 구조 이해

    기본 구조 요소 : Text label, Border, Background, Icon
    보조 요소 : Border radius, Padding, Gutter, Effects

    색상 심리 적용

    색상은 버튼의 용도와 상대적 중요성을 나타내는 효과적인 도구이다.
    우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.

    사용자가 찾을 것으로 예상되는 위치에 배치

    버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다.
    사용자가 버튼을 찾도록 유도 하지 말아야 한다.

    Tip : 항상 접힌 부분 위에 버튼을 놓는다.

    각 버튼의 기능을 명확하게 표시

    일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.

    스마트폰용 손가락 친화적인 버튼 만들기

    MIT Touch Lab* 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다.
    이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.

    버튼을 적절하게 간격두기

    이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.

  • HTML 페이지 Scroll Animation 구현

    HTML 페이지 Scroll Animation 구현

    기본적으로 HTML, CSS, Javascript 세 가지 구성으로 웹 페이지 내에서 스크롤시에 애니메이션을 구현할 수 있다. 아래의 예제는 대표적인 것으로 이해하면 된다. 기타 다양한 상황과 원하는 레이아웃에서의 구성으로 인해 구현 방법은 다를 것으로 예상되지만 대표적으로 많이 사용되는 사례들을 아래에 나열하였다. 부족할 경우 구체적인 구글링으로 원하는 것을 찾아 응용하면 될 것으로 생각된다.

    아래 코드에 이해를 돕기 위해 각주 처리를 참고하여 이해하면 좋을 듯싶다.

    /* 첫 번째 섹션 시작 */
<section>
  <h1>아래로 스크롤하여 개체 요소 표시하기 ↓</h1>
</section>
/* 첫 번째 섹션 끝 */
/* 두 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>두 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 두 번째 섹션 끝 */
/* 세 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>세 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 세 번째 섹션 끝 */
/* 네 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>네 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 네 번째 섹션 끝 */
    @import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Asap", sans-serif;
}
body{
  background: #42455a;
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
section .container{
  margin: 100px;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
}
section .text-container .text-box{
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}
    function reveal() {
  var reveals = document.querySelectorAll(".reveal");
  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;
    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}
window.addEventListener("scroll", reveal);
    DEMO

    고정 Header / Footer 스크롤시 애니메이션 처리

    스크롤시 TEXT 애니메이션 처리

    스크롤시 이미지 Parallax 스크롤에 SVG Mask 처리

    3D EBook Flip Animation

    Cross Color Text Reveal

    스크롤시 좌측 이미지 전환

    스크롤시 타이틀 애니메이션

    Efficient Scroll Zoom

    Physic Milestones Timeline

    Side in on Scroll

  • 피그마 이미지 파일 최적화 방법

    피그마 이미지 파일 최적화 방법

    디자인 파일에 이미지를 추가하여 사진, 스크린샷 또는 기타 시각적 Assets을 디자인에 통합한다. Figma 는 PNG , JPEG , HEIC , GIF 및 WEBP 이미지 형식을 지원한다.

    Figma에는 이미지에 대한 특정 레이어 타입이 없으며 대신 이미지는 Fill 타입이다. 이를 통해 모든 모양 또는 벡터 네트워크에 이미지를 추가할 수 있다.

    오른쪽 사이드바의 Fill 섹션에서 이미지 채우기를 보고 업데이트 한다. Figma는 견본과 Image레이블에 있는 이미지의 썸네일을 표시한다.

    왼쪽 사이드바의 Layer 패널에서 이미지 채우기로 레이어를 식별할 수도 있다.

    • 캔버스에 이미지를 바로 추가하면 Figma는 캔버스에 원본 파일의 크기로 직사각형을 생성한다. 이미지 아이콘 및 Image레이블이다.
    • 기존 개체에 이미지를 추가하면 Figma는 레이어 아이콘과 원본 레이어의 설명을 사용한다.

    Note:
    Figma는 너비 또는 높이가 4096픽셀보다 큰 이미지는 자동으로 축소 처리한다. 이렇게 하면 이미지의 원래 크기가 비례하여 조정되므로 가장 긴 가장자리가 4096픽셀 미만이 된다.

    때때로 Figma는 이미지를 파일에 추가하기 전에 디코딩하고 변환해야 한다. 이러한 이유로 우리는 Figma가 모든 파일 메타데이터를 보존하지 못하는 것을 기억해야 한다.

    파일에 이미지 추가

    이미지는 채우기이므로 모든 벡터 또는 모양에 추가할 수 있다. 이를 통해 유연성과 제어력이 향상된다. 디자인 파일에 이미지를 추가하는 방법에는 여러 가지가 있다.

    • 컴퓨터에서 캔버스로 이미지 파일을 끌어다 놓는다. Figma는 이미지 크기의 새 직사각형을 만들고 이미지를 채우기로 적용한다.
    • 이미지 파일을 파일 브라우저로 가져온다. Figma는 이미지가 직사각형으로 추가된 프로젝트에서 새 디자인 파일을 생성한다.
    • 장소(Place)를 사용하여 디자인에 여러 이미지를 일괄 추가한다. 이미지를 추가할 레이어를 선택한다. 일괄 이미지 배치 →
    • 색상 선택기에서 이미지 가져오기를 사용한다. 이미지 채우기 업로드 →
    • 현재 파일의 다른 레이어나 다른 파일에서 이미지를 복사한다. 레이어 간 이미지 복사 및 붙여넣기 →
    • 클립보드의 이미지를 캔버스에 붙여넣는다. 다운로드 및 업로드 없이 웹에서 이미지를 복사한다. 캔버스에 이미지 붙여넣기 →

    Tip!
    애니메이션 GIF를 프로토타입에 추가할 수도 있다. GIF는 프레젠테이션 보기에서 디자인과 프로토타입을 볼 때만 재생된다. 프로토타입에 애니메이션 GIF 추가 →

    이미지 편집

    이미지를 편집하거나 조정하는 방법에는 여러 가지가 있다.

    • 이미지가 있는 모든 레이어의 크기 조정(scale), 회전(rotate) 및 수정(adjust)
    • 레이어에 적용된 이미지 자르기(crop) 및 재배치(re-position)
    • 채우기 모드(fill mode), 회전(rotation) 및 혼합 모드(blend mode)를 포함한 이미지 옵션 조정
    • 스타일(Styles) 및 구성 요소(Components)에 이미지 포함
    • 마스크(Masks)를 적용 하여 이미지의 일부만 표시
    • 색조(Hue), 채도(Saturation) 또는 대비(Contrast) 변경과 같은 이미지 조정

    Tip!
    이미지를 로드하는 데 문제가 있습니까? 일반적인 이미지 로드 문제 해결 →

  • 피그마 컴포넌트 네이밍 및 구성

    피그마 컴포넌트 네이밍 및 구성

    팀이나 회사 내에서 components 구조를 정의하고 문서화하는 것이 좋다.

    이렇게 하면 Assets 패널에서 components를 더 쉽게 찾을 수 있다. 그뿐만 아니라 관련 components instances를 교체한다.

    Components를 구성하는 방법에는 여러 가지가 있다. Assets 패널 및 관련 components의 components를 구성하는 방법을 보도록 하자.

    Tip! Components 라이브러리 구축을 어디서부터 시작해야 할지 모르십니까? 모범 사례 : Components, Styles 및 shared libraries  문서에는 몇 가지 유용한 팁이 있다.

    Assets 패널

    파일의 components에 액세스하는 가장 빠른 방법은 Asset 패널을 사용하는 것이다.

    Asset 패널을 열려면 다음을 수행한다.

    • 왼쪽 사이드바에서 Asset 탭을 클릭한다.레이어 패널의 자산 탭
    • 또는 키보드 단축키를 사용합니다.
      • 맥 : ⌥ Option + 2
      • 윈도우 :  Alt + 2
    구조

    Asset 패널에서 다음 components에 액세스할 수 있다.

    • 로컬 구성 요소(Local Components) : 이 파일에서 생성한 components이다.
      • 이 파일에 비공개(Private) : 이 파일에서 생성했지만 팀 라이브러리에 게시하지 않은 components이다.
    • 이 파일에서 사용됨 : 이 파일에서 이미 사용한 다른 라이브러리의 components이다.
    • 활성화된 라이브러리 : 팀(Team)  또는  조직(Organization)에서 누구나 활성화한 기본 라이브러리이다.

    Assets 패널에는 이러한 각 섹션에 대한 제목이 있다. 파일 이름을 제목으로 하여 활성화된 모든 라이브러리를 나열한다. 제목을 축소하여 차지하는 공간을 줄일 수 있다. 또는 확장하여 해당 파일 내의 components를 탐색한다.

    로컬, 파일 및 라이브러리 구성 요소에 대한 자산 패널의 드롭다운
    라이브러리 파일 탐색

    파일 구조를 미러링 하는 경로에 components를 표시한다. 파일 경로는 다음과 같은 일반 구조를 따른다. file > page > frame

    경로의 각 단계는 Asset 패널의 제목을 나타낸다. 화살표를 사용하여 파일 경로를 확장하고 각 프레임 내의 components를 탐색할 수 있다.

    원본 파일의 순서가 아닌 알파벳 순서로 페이지를 표시한다.

    파일 내의 구성 요소를 표시하는 자산 패널의 확장 메뉴

    Tip!
    슬래시로 구분된 네이밍을 사용하는 경우 인스턴스 메뉴에서 해당 components를 함께 그룹화한다 .
    예) file / page / frame /**name**/

    관련 components

    Design tab의 Instance 섹션에서 선택한 components를 볼 수 있다.

    이를 사용하여 파일을 떠나지 않고 관련 components 간에 전환할 수 있다.

    우리는 다음을 통해 관련 components를 결정한다.

    • Components의 이름을 지정하는 방법이다. 예를 들어 우리는  UI/Button/Active,  UI/Button/Hover 그리고  UI/Button/Inactive 함께 표시할 것이다.
    • 원본 파일에서 components를 정렬한 방법이다. 예를 들어 우리는 관련 components와 동일한 프레임 내의 모든 components를 취급한다.
    Component_order_using_slash_naming_convention.png

    예제

    Components 이름

    조직의 다른 계층을 추가하려는 경우 특정 방식으로 components의 이름을 지정할 수 있다. Component/State와 같이 슬래시로 구분된 규칙을 사용하는 것이 좋다.

    다음과 같이 프레임에서 components의 이름을 지정했다고 가정해 보겠다.

    • Login/Active
    • Login/Hover
    • Login/Inactive
    • Create/Active
    • Create/Hover
    • Create/Inactive

    일괄 레이어 이름 변경 방법 알아보기 →

    Components 구성

    이 예에서는 위치를 기반으로 components를 구성했다. 페이지와 프레임을 사용하여 components를 그룹으로 구성했다.

    • Figma UI 파일에는  Figma UI를 구성하는 components가 있다.
    • Left Sidebar에 대한 페이지를 만들었다. 페이지에는 해당 사이드바와 관련된 모든 components가 있다.
    • left sidebar는  Layers 패널과  Assets 패널의 두 가지 기본 패널로 구성된다. 이러한 패널 각각에 대한 프레임을 만들었다.
    • 각 아이콘에 대해  16px  및  32px의 두 가지 크기를 지원한다. 각 프레임에 두 아이콘 세트를 모두 추가한다.
    • 아이콘 크기를 쉽게 구별할 수 있도록 components의 이름을 지정한다. Layers 패널에서 슬래시 규칙을 사용하여 각 components의 이름을 지정한다(예: 16 / Team Library  또는  32 / Team Library ).
    크기가 다른 동일한 구성 요소에 대해 별도의 드롭다운 메뉴를 표시하는 자산 패널

    닫기 아이콘이 필요한 대화 상자 창을 다른 파일에 만들었다. Assets 패널에 대해 이미 이 중 하나를 만들었으므로 다시 사용할 수 있다.

    해당 components의 32px 버전이 필요하다. Assets 패널에서 찾으려면 다음으로 이동한다. Figma UI / Left Sidebar / Assets Panel / 32

    그런 다음 Assets 패널에서 해당 components를 파일로 드래그할 수 있다.

    자산 패널에서 캔버스의 프레임으로 드래그 되는 구성 요소 인스턴스

    Note: 이 접근 방식의 경우 Assets 패널에서 라이브러리를 활성화해야 한다. 기본 라이브러리 활성화에 대해 자세히 알아보자.

  • 피그마 인터랙티브 컴포넌트

    피그마 인터랙티브 컴포넌트

    대화형 구성 요소 정보

    대화형 구성 요소를 사용하면 구성 요소 집합의 변형 간에 프로토타입 상호 작용을 만들 수 있다. 디자인에 인스턴스를 추가할 때마다 이러한 상호 작용이 설정되고 사용할 준비가 된다. 이것은 프로토타입을 만들 때 시간을 절약하고 불필요한 국수 스프를 방지한다.

    • 호버에서 눌린 상태로 변경되는 버튼과 같이 변형 간에 자동으로 전환되는 대화형 요소를 만든다.
    • 구성 요소 수준에서 기본 상호 작용을 설정하고 프로토타입을 구축할 때 추측을 제거한다.
    • 체크박스 또는 토글 세트와 같은 입력 필드를 프로토타이핑하는 데 필요한 프레임 및 연결의 양을 줄인다.

    Note: 대화형 구성 요소는 변형의 확장입니다. 작업할 구성 요소 집합이 없으면 먼저 구성 요소를 만들어야 합니다. 변형 생성 및 사용 방법 알아보기 →

    Before

    아래 예에서 우리는 5개의 체크박스가 있는 프레임을 프로토타입하기 위해 가능한 모든 연결을 추가했다. 대화형 구성 요소가 없으면 가능한 모든 조합의 프로토타입을 만들기 위해 동일한 프레임을 32번 복제하고 둘 사이에 160개의 연결을 만들어야 한다.

    여러 확인란이 있는 프레임에 대한 연결 만들기

    After

    대화형 구성 요소를 사용하면 확인란의 인스턴스를 디자인에 추가하기만 하면 변형 상호 작용이 준비된다. 우리가 프로토타입을 볼 때 Figma는 자동으로 체크된 변형과 체크되지 않은 변형 사이를 전환한다.

    확인란 대화형 구성 요소를 사용하여 여러 확인란이 포함된 프레임 프로토타입 만들기

    대화형 구성 요소(Interactive components) 만들기

    동일한 component set의 variant을 사용하여 대화형 구성 요소(interactive components)만 만들 수 있다. 작업할 component set이 없으면 먼저 component를 만들어야 한다. Variants 생성 방법 알아보기 →

    Variant interactions 생성

    대화형 구성 요소에 새로운 Prototype action이 Change to로 변경한다.

    1. Component set 내에서 상호 작용의 시작 variant을 선택한다.
    2. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
    3. 프레임의 경계 상자 오른쪽에 있는 ‘⊕‘을 클릭하고 대상 변형으로 드래그한다. Prototype 패널의 Interactions 섹션에서 ‘+’를 클릭하고 작업을 Change to로 설정 한 다음 드롭다운 메뉴를 사용하여 대상 변형을 선택한다.
    4. 연결이 완료되면 Interaction details 패널을 사용하여 trigger 및 action을 조정한다.
    변형 상호 작용을 생성할 때 프로토타입 탭에서 구성 요소 집합

    Note: Change to action은 component set의 variants에만 사용할 수 있다. 두 개의 개별 components 또는 최상위 프레임 간에 이 작업을 사용할 수 없다.

    실습 학습자? Interactive components 플레이그라운드 파일 탐색 →

    대화형 구성 요소 사용

    다른 구성 요소와 마찬가지로 디자인에 대화형 구성 요소의 인스턴스를 추가한다. 유일한 차이점은 인스턴스에 이미 프로토타입 제작에 적용된 상호 작용이 있다는 것이다.

    대화형 구성 요소를 사용하려면:

    1. 디자인의 프레임에 대화형 구성 요소의 인스턴스를 추가한다.
    2. 디자인의 프로토타입을 만들 준비가 되면 오른쪽 사이드바 의 Prototype 탭으로 이동 한다.
    3. 프로토타입을 구축한다.
    4. 프레젠테이션 보기에서 디자인 및 상호 작용을 미리 본다.

    Note: Figma는 기존 규칙을 사용하여 component set의 기본 variant에 적용한 재정의(overrides)를 유지한다 . 예: 버튼 레이블의 내용 변경 또는 아이콘 교체.

    component set의 인스턴스를 캔버스에 추가하면 해당 component set의 다른 variant도 함께 가져온다. 기술적으로 여전히 다른 variant에 재정의(overrides)를 적용할 수 있지만 Figma는 프레젠테이션 보기에서 이러한 재정의를 반영하지 않는다.

    더 많은 상호 작용(interactions) 추가

    대화형 구성 요소(interactive components)로 프로토타입을 구축할 때 variant interactions 위에 일반 상호 작용을 추가할 수 있다.

    아래 예에서는 지연이 있는 variant interactions 위에 클릭 trigger가 있는 상호작용을 추가했다.

    프로토타입 탭의 상호작용 및 변형 상호작용 섹션

    상호 작용 순서는 사용하는 트리거가 variant interactions과 동일한 트리거인지 여부에 따라 달라진다. Prototype triggers에 대해 자세히 알아보기 →

    동일한 트리거(triggers)

    두 상호 작용이 동일한 트리거를 사용하는 경우 Figma는 프로토타입 상호 작용을 사용하고 변형 상호 작용을 무시 한다.

    예를 들어:

    1. 토글 스위치에는 구성 요소 세트 의 On 및 Off 변형(variants) 간에 On click → Change to 변형 상호 작용이 있다.
    2. 토글 스위치에서 다른 프레임으로 On click → Navigate to 상호 작용을 추가한다 .

    사용자가 토글 스위치를 클릭하면 Figma가 다음 프레임으로 이동한다.

    다른 트리거(triggers)

    다른 트리거와의 상호 작용을 추가하면 Figma는 상호 작용과 변형 상호 작용을 모두 재생한다.

    예를 들어:

    1. 버튼에는 default 변형 과 hover 변형 간에 On hover → Change to 변형 상호 작용이 있다.
    2. 프로토타입을 만들 때 On click → Navigate to 상호작용을 추가한다.


    Figma는 hover시 Change to 호버 변형 후 다음 프레임 On click 에서 Navigate to 한다.

    상호작용 보기

    대화형 구성 요소를 사용할 때 오른쪽 사이드바의 Prototype 탭에서 Interactions 및 Variant interactions 에 대한 별도의 섹션을 볼 수 있다.

    Variant interactions 수정

    기본 component에서 variant interaction을 추가하고 편집한다. 인스턴스에서는 variant interaction을 편집할 수 없다.

    인스턴스에서 component set에 액세스하고 편집하려면:

    1. 인스턴스를 선택한다.
    2. 오른쪽 사이드바의 Instance 섹션에서 ‘?’ 아이콘을 클릭한다.
    3. 메인 component로 이동을 선택 한다.
    4. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
    5. Variant interactions을 수정한다.

    사용자 정의 글꼴이 있는 대화형 구성 요소

    대화형 구성 요소 내부의 텍스트에 사용자 정의 글꼴을 사용할 때 프로토타입 뷰어의 장치에 해당 사용자 정의 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하자. 이러한 경우 Figma는 프로토타입을 제시할 때 사용자 정의 글꼴을 올바르게 표시하기 위해 대화형 구성 요소의 변형에 대한 캐시된 정보를 사용하지만 텍스트 재정의를 유지하고 상호 작용에 대한 글꼴 설정을 변경할 수 없는 경우 글꼴을 Inter로 대체할 수 있다.

    예를 들어 프로토타입을 보고 있는 사람이 자신의 장치에 사용 중인 사용자 정의 글꼴이 설치되어 있지 않다고 가정해 보겠다. 대화형 구성 요소의 인스턴스에 텍스트 재정의가 있는 경우:

    • 변형 변경에 가중치 또는 밑줄과 같은 글꼴 설정 변경이 포함되는 경우 Figma는 사용자 정의 글꼴을 Inter로 대체할 수 있다.
    • 변형의 변경이 버튼의 배경색과 같은 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시한다.

    디자인에서 사용자 정의 글꼴에 액세스할 수 없는 뷰어와 공유되는 프로토타입에는 Google 글꼴 을 사용하는 것이 좋다. 팀이 Figma Organization 플랜을 사용 중인 경우 공유 글꼴로 업로드하여 모든 프로토타입 뷰어가 프로토타입의 사용자 정의 글꼴에 액세스할 수 있도록 할 수 있다.

    파일에 대해 대화형 구성 요소 끄기 또는 켜기

    특정 파일에 대해 대화형 구성 요소를 끄거나 켤 수 있다. 이렇게 하려면:

    1. 키보드 단축키를 사용하여 빠른 작업 검색 창을 연다.
      • 맥: ⌘ Command + / 또는 ⌘ Command + P
      • Windows: Control + / 또는 Control + P
    2. Enable interactive components 검색.
    3. Return / Enter을 누르고 확인란을 클릭하여 대화형 구성 요소를 전환한다.
    Figma 커뮤니티에서 Interactive Components Playground →
    출처: Interactive components in Figma
  • 피그마 Variants

    피그마 Variants

    구성 요소(Component)를 만들고 설계 시스템을 구축할 때 약간의 차이점만 제외하고 서로 유사한 구성 요소가 필요하다는 것을 알게 될 것이다.

    예를 들어 버튼에 대해 여러 구성 요소가 있을 수 있으며 다양한 상태 및 크기와 밝은 모드 및 어두운 모드에 대한 별도의 구성 요소가 있을 수 있다.

    변형(Variants)을 사용하면 유사한 구성 요소를 단일 컨테이너로 그룹화하고 구성할 수 있다. 이렇게 하면 구성 요소 라이브러리가 단순화되고 모든 사람이 필요한 것을 더 쉽게 찾을 수 있다.

    변형의 속성과 값을 사용자 지정하여 디자인 시스템에서 추측을 없애고 구성 요소를 프런트 엔드 코드(front-end code)에 더 가깝게 만든다.

    Note: 변형을 사용하여 다른 아이콘을 그룹화하지 않는 것이 좋다. 동일한 아이콘의 크기가 다른 경우 대신 변형으로 결합할 수 있다.

    속성(properties) 및 값(values)

    속성 및 해당 값을 사용하여 변형의 속성을 정의할 수 있다. 

    속성과 값을 필요한 만큼 추가하고 디자인 시스템에 맞게 사용자 지정할 수 있다. 속성과 값을 디자인 시스템의 코드 구성 요소에 매핑할 수도 있다.

    • 속성(Properties)은 구성 요소의 가변적인 측면이다. 예를 들어 버튼 구성 요소의 속성은 type, size, state, 또는 icon.
    • 값(Values)은 각 속성에 사용할 수 있는 다양한 옵션이다. 예를 들어 state 속성은 default, hover, pressed 및 disabled 값을 가질 수 있다.

    구성 요소 세트 내의 모든 변형은 동일한 속성과 값을 사용하지만 각 변형은 고유한 조합이어야 한다. 속성과 값의 가능한 모든 조합에 대해 구성 요소가 필요하지 않다.

    액션(action)에서 속성과 값

    예제를 살펴보자! 24개의 고유한 변형(Variants)이 있는 버튼 구성 요소가 있다. 아래 이미지는 단일 구성 요소 세트 내의 이 구성 요소에 대한 모든 변형을 보여준다.

    Button_variants_dark.png

    버튼 구성 요소 집합에는 각각 고유한 값 집합이 있는 네 가지 속성이 있다.

    • 기본(Primary) 및 보조(Secondary) 값이 있는 유형(Type) 속성이다 .
    • Large 및 Small 값 이 있는 Size 속성이다.
    • Default , Pressed 및 Inactive 값이 있는 상태(State) 속성이다.
    • 아이콘(Icon) 속성에는 True 및 False 값이 있다.

    Figma는 이러한 속성과 값을 사용하여 구성 요소 집합에서 필요한 변형을 결정한다. 아래 이미지에서 구성 요소 집합의 인스턴스를 만들고 다음 값을 구성했다.

    • Type: Primary(기본)
    • Size: Large
    • State: Default(기본값)
    • Icon: False (or off)
    https://help.figma.com/hc/article_attachments/360092476153/Button_variant.png

    레이어 이름(Layer names) 및 구문(syntax)

    레이어 이름 지정은 변형(variants) 생성 및 관리의 중요한 측면이다. 대부분 임의적일 수 있는 Figma의 다른 레이어 이름과 달리 구성 요소 집합의 변형(variants) 이름에는 매우 구체적인 구문이 있다.

    여기에는 해당 변형(variants)의 속성 및 값에 대한 정보가 포함된다. 레이어 패널에서 변형의 이름을 바꾸려고 할 때만 이 구문을 볼 수 있다.

    변형(variants) 이름은 다음 구조를 따른다. Property1=value, Property2=value, Property3=value

    Double-clicking_on_the_variant_name_in_the_layers_panel_allows_you_to_edit_the_name_and_see_the_layer_syntax.png

    구성 요소(components)를 변형(variants)으로 결합

    Caution: 변형(variants)이 있는 인스턴스를 파일에 추가하면 Figma는 해당 구성 요소 세트의 모든 변형을 가져온다. 큰 구성 요소 세트를 가져오면 Figma의 속도와 성능에 영향을 준다.

    Figma에 이미 구성 요소 라이브러리가 있는 경우 구성 요소를 변형으로 결합할 수 있다. 일반적인 프로세스는 다음과 같다.

    • 슬래시(/) 명명 규칙을 사용하도록 구성 요소의 이름을 바꾼다.
    • 캔버스에서 component 구성
    • component를 variants으로 결합
    • 속성에 설명적인 이름을 지정한다.

    Note: Figma는 페이지 및 프레임 이름이 아닌 변형으로 component를 결합할 때 레이어 이름만 본다. 페이지나 프레임을 사용하여 component를 구성하는 경우 변환 시 이러한 요소가 중복된다.

    여전히 페이지와 최상위 프레임을 사용하여 추가 계층 수준을 만들 수 있다. 이렇게 하면 Asset 패널과 인스턴스 메뉴에서 component를 더 잘 구성할 수 있다.

    Components 이름 바꾸기

    Figma는 슬래시 명명 시스템을 사용하여 자산(Asset) 패널 및 인스턴스 메뉴에서 component를 구성한다. component 이름의 각각 /은 또 다른 수준의 계층 구조를 만든다.

    이렇게 하면 라이브러리를 더 쉽게 탐색하거나 관련 component를 찾고 교체할 수 있다. Component의 이름 지정 및 구성 방법 알아보기 →

    Tip! 레이어 이름 바꾸기 모달을 사용하여 레이어 이름을 일괄적으로 변경할 수 있다. 일괄 레이어 이름 변경에 대해 자세히 알아보기 →

    이 이름 지정 시스템을 사용하여 기존 component를 variants으로 변환할 수도 있다. 정확하게 변환하려면 component 이름이 다음 구조를 따라야 한다.

    componentName/property1value/property2value/property3value

    • 첫 번째 앞의 텍스트 /는 component 집합의 이름이 된다.
    • Figma는 / component 이름에서 다른 모든 속성에 대해 새 속성을 생성한 다음 속성을 값으로 추가한다.
    • 네이밍 시스템에서 접미사를 사용한 경우 구성 요소의 이름에 접미사를 추가하고 /로 구분해야 한다.

    Caution: 값이 동일한 속성과 일치하도록 하려면 결합하는 모든 component에 동일한 수의 슬래시가 있어야 한다.

    이름이 있는 버튼 구성 요소 Button/Primary/Large/Default/False에는 다음과 같은 속성과 값이 있다.

    Component set name: Button
    Variant: Primary
    Property 2: Large
    Property 3: Default
    Property 4: False

    아래 이미지에서 나머지 component 이름(왼쪽)이 어떻게 variants 값(오른쪽)으로 변환되는지 확인할 수 있다.

    Slash_naming_convention.png

    Note: Component sets에는 components만 포함될 수 있으므로 텍스트 또는 주석을 추가하거나 프레임을 중첩하거나 component sets 내에서 variants의 하위 집합을 그룹화하는 것은 불가능하다.

    Component를 variants으로 결합할 때 Figma는 기존 레이아웃과 간격을 component sets 내부의 variants에 적용한다. Component를 변환하기 전에 구성하는 것이 좋다. 그래야 나중에 다시 정렬할 필요가 없다.

    특정 components에 대한 variants가 많은 경우 components를 행, 열 또는 그리드로 구성할 수 있다.

    이렇게 하면 디자인 시스템을 사용하는 모든 사람에게 다차원적 특성을 전달하는 데 도움이 된다. Component sets 옆에 텍스트 레이어를 추가하여 관련 속성 및 값에 주석을 추가할 수도 있다.

    아래 예에서는 버튼 variants을 그리드에 정렬했다. 또한 속성 값에 해당하는 텍스트 레이어를 캔버스에 추가했다.

    Organize_components.png

    Tip! 기본적으로 component sets에는 점선 보라색 획이 있고 채우기는 없다. 브랜드 또는 디자인 시스템에 더 잘 맞도록 components 집합의 채우기 및 획 속성을 조정할 수 있다.

    변형(variants)으로 결합

    1. 결합할 component를 선택한다. 레이어 및 개체 선택 방법 알아보기 →
    2. 오른쪽 사이드바에서 Combine as Variants 버튼을 클릭한다.
    3. Figma는 모든 component를 단일 component sets에 추가한다.
    A_bunch_of_components_are_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_combine_as_variants_button_in_the_right_sidebae.png

    속성을 설명하는 이름 지정

    변환 프로세스의 일부로 Figma는 일반 속성을 만들고 component 이름에 값으로 추가한 속성을 추가한다.

    Figma는 속성의 이름을 모르기 때문에 첫 번째 속성의 이름을 지정한 다음 , , 등 Variant으로 순차적으로 번호를 지정한다 . Property 2 Property 3

    이러한 속성의 이름을 더 설명적인 것으로 변경해야 한다.

    1. component sets을 선택한다.
    2. 오른쪽 사이드바의 Variants 섹션에서 현재 속성을 본다.
    3. 속성 위로 마우스를 가져가면 주변에 회색 상자가 나타난다.
    4. 속성을 편집하고 더 설명적인 이름을 지정하려면 클릭한다.
    5. 적용하려면 속성 외부를 클릭하라.
    6. 나머지 속성에 대해 반복한다.
    The_component_set_is_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_editable_text_field_for_first_property_in_the_variants_section.png

    Note: Figma는 일반 component와 동일한 방식으로 component sets을 처리한다. 설명과 문서 링크를 추가할 수 있다. Assets 패널에서 캔버스로 드래그하고 인스턴스 간에 교체할 ​​수도 있다.

    새 변형(variants) 만들기

    Note: Figma는 component sets라는 단일 컨테이너에 변형을 배치한다. component sets에는 component만 포함될 수 있다. 도구 모음에서 component 만들기를 클릭 하거나 키보드 단축키를 사용하여 선택 항목을 component로 바꾼다.

    • 맥: ⌥ Option + ⌘ Command + K
    • 윈도우: Ctrl + Alt + K

    Components 생성 방법 알아보기 →

    1. component 선택
    2. 슬래시 네이밍 규칙을 사용하도록 component의 이름을 바꾼다(권장).
    3. 오른쪽 사이드바에서 Variants 섹션에서 ‘+’ 클릭하여 첫 번째 변형을 추가한다.
    4. Figma는 다음과 같은 몇 가지 작업을 수행한다.
      • 동일한 속성을 가진 동일한 component 만들기
      • 두 component를 component sets에 variants으로 추가
      • 슬래시 네이밍 규칙을 사용한 경우 / 앞의 텍스트는 component sets의 이름이 되고 뒤의 속성은 값으로 사용된다.
    5. 필요에 따라 variants을 시각적으로 변경한다.

    Tip! 기본적으로 component sets에는 점선 보라색 획이 있고 채우기는 없다. 브랜드 또는 스타일 가이드에 더 적합하도록 component sets의 채우기 및 획 속성을 조정할 수 있다.

    속성 및 값 추가

    변형(variants)을 처음 생성할 때 또는 디자인 시스템이 발전함에 따라 속성과 값을 variants에 추가한다.

    component set에 속성을 추가한다.

    1. component set을 선택한다.
    2. 오른쪽 사이드바 변형 섹션에서 ‘⋯’ 클릭
    3. 새 속성 추가를 선택 한다.

    변형을 선택한 경우에만 값을 추가할 수 있다. 이를 수행하는 몇 가지 방법이 있다.

    • 현재 값 옆에 있는 ‘˅’ 클릭하여 옵션에서 새로 추가를 선택한다.
    • 값 필드를 클릭하고 새 값을 입력한다.
    • 레이어 패널에서 변형을 두 번 클릭하고 원하는 속성 값을 업데이트한다.

    Tip! 두 가지 가능한 옵션만 있는 속성이 있는 경우 Figma는 이를 이진 선택 또는 부울 값으로 간주하고 해당 속성을 토글 스위치로 나타낼 수 있다. Figma는 및 둘 다 부울 값으로  true/false on/off 인식한다.

    충돌하는 값 오류 수정 component set 내의 모든 variants은 동일한 속성과 값을 사용하지만 각 variants은 고유한 조합이어야 한다.

    변형이 정확히 동일한 값 조합을 갖는 경우 Figma는 충돌이 있음을 알려준다. 변형 자체가 시각적으로 다른 경우에도 이 오류가 표시된다.

    이 문제를 해결하려면 영향을 받는 변형의 값을 추가하거나 업데이트하여 고유한 값 조합을 갖도록 해야 한다.

    Component set에 더 많은 variants 추가

    다음 방법 중 하나를 사용하여 component set에 변형을 계속 추가한다.

    • component set 내부의 캔버스를 클릭한다. 두 개 이상의 변형이 있는 경우에만 이 옵션이 표시된다.
    • 오른쪽 사이드바의 variants 섹션을 클릭하고 새 변형 추가를 선택한다.
    • 키보드 단축키를 사용하여 기존 변형 복제:
      • 맥 : [keybt]⌘ Command[/keybt] + [keybt]D[/keybt]
      • 윈도우 : [keybt]Ctrl[/keybt] + [keybt]D[/keybt]
    • 다른 component를 component set로 끌어서 변형으로 추가한다.

    Tip! 다른 component를 드래그하면 기존 변형이 리플로우되지 않는다. 스마트 선택을 사용하여 변형의 레이아웃을 조정할 수 있다. 스마트 선택에 대해 자세히 알아보기 →

    Caution: 변형이 있는 인스턴스를 파일에 추가하면 Figma는 해당 component set의 모든 변형을 가져온다. 큰 component set를 가져오면 Figma의 속도와 성능에 영향을 미친다.

    Variants 관리

    Variants 구성

    Component에 새 변형을 추가할 때 Figma의 기본 동작은 동일한 간격으로 단일 열에 변형을 추가하는 것이다.

    Component를 변환하기 전에 다른 레이아웃에 있는 경우 Figma는 component set에 대해 동일한 레이아웃을 유지한다.

    Figma의 기본 동작을 무시하고 원하는 방식으로 변형을 정렬할 수 있다.

    • 변형을 선택하고 component set 내의 새 좌표로 이동한다. Figma를 사용하면 다른 변형의 상단을 포함하여 component set 내의 아무 곳에나 변형을 배치할 수 있다.
    • 오른쪽 사이드바에서 component set의 크기를 조정하거나 일반 프레임처럼 캔버스에서 크기를 조정한다.
    • 모든 변형을 선택한 경우: 오른쪽 사이드바의 필드를 사용하여 변형 사이의 수평 및 수직의 공간을 조정한다.

    Note: Figma는 왼쪽 상단 모서리에 있는 variant을 기본 variant으로 사용한다. 이 variant은 Assets 패널의 전체 component set을 나타낸다.

    속성 및 값 이름 바꾸기

    속성 또는 값의 이름을 바꾸려면 component set을 선택하고 오른쪽 사이드바의 Variant 섹션에서 속성 또는 값을 업데이트해야 한다.

    속성 이름을 바꾸려면 다음을 수행한다.

    1. 속성을 클릭하고 더 설명적인 이름을 입력한다.
    2. Enter / Return 키를 눌러 적용하거나 속성 외부를 클릭하여 적용한다.
    3. 나머지 속성에 대해 반복한다.

    값의 이름을 바꾸려면 다음을 수행한다.

    1. 값을 두 번 클릭하고 새 이름을 입력한다.
    2. Enter/ Return 키를 눌러 적용한다.
    With_the_component_set_selected_click_the_property_or_double-click_on_the_value_in_the_right_sidebar_to_edit_it.png

    Note: 기존 component를 variant로 변환한 경우 속성 이름을 변경하여 속성을 더 자세히 설명해야 한다.

    손상된 변형 오류 수정 이 구문을 따르지 않는 변형이 있으면 손상된 변형 오류가 발생한다. 이는 속성 또는 값을 잘못 입력하거나 기존 component를 변환할 때 잘못된 네이밍 구조를 사용하는 경우 발생할 수 있다.

    이 문제를 해결하려면 변형의 속성과 값의 이름을 바꿔야 한다. 레이어 이름에 이 구문을 사용하여 이름을 바꿀 수 있지만 대신 오른쪽 사이드바에서 속성과 값의 이름을 바꾸는 것이 좋다.

    속성 및 값 재정렬

    속성과 값이 오른쪽 사이드바에 나타나는 순서를 변경할 수 있다. 속성을 재정렬하면 Figma는 일치하도록 변형의 이름과 구문을 조정한다.

    속성을 재정렬하려면 다음을 수행한다.

    1. 구성 요소 집합을 선택한다.
    2. 변형 섹션 에서 속성 필드의 왼쪽 가장자리 위로 마우스를 가져갈 때까지 ‘=’ 나타난다.
    3. 속성을 클릭하고 위나 아래로 끌어 순서를 변경한다.

    값을 재정렬하려면 다음을 수행한다.

    1. 값을 길게 클릭한다.
    2. 값으로 끌어서 새 순서로 만든다.
    3. 적용하려면 릴리스 한다.

    속성 제거

    속성을 제거하려면:

    1. 구성 요소 집합을 선택한다.
    2. 사이드바 의 변형 섹션 에서 속성 위로 마우스를 가져간다 .
    3. ‘-‘를 클릭하여 제거한다.

    Note: Figma는 현재 변형에 적용된 값만 유지한다. 값을 사용하는 변형이 없는지 확인하여 값을 제거할 수 있다.

    라이브러리에 Component sets 게시

    전문 또는 교육 팀 또는 Figma 조직의 구성원인 경우 변형을 공동 작업자와 공유할 수 있다.

    팀이나 조직의 구성원이 사용할 수 있도록 스타일 및 일반 구성 요소와 함께 구성 요소 집합을 게시한다.

    구성 요소 세트는 다른 구성 요소와 함께 자산 패널에 나타난다. Figma는 구성 요소 세트의 왼쪽 상단 모서리에 있는 변형을 기본 변형으로 사용한다.

    그런 다음 공동 작업자는 구성 요소 세트를 파일로 끌어서 인스턴스를 생성할 수 있다. 그런 다음 오른쪽 사이드바에서 속성 값을 구성하여 구성 요소 집합의 다른 모든 변형에 액세스할 수 있다.

    라이브러리 게시 방법 알아보기 →

    Note: 당신은 Figma 조직의 회원이라면, 설계 시스템 분석을 통해 조직 구성원이 구성 요소 및 변형을 사용하는 방법을 확인할 수 있다. 구성 요소 및 변형 사용을 추적하는 방법 알아보기 →

    변형(variants) 사용

    Component sets는 일반 구성 요소와 함께 자산 패널에 나타난다. 따라서 자산 패널에서 특정 변형을 찾는 대신 구성 요소 집합만 선택하면 된다.

    캔버스에 해당 구성 요소의 인스턴스가 설정되면 인스턴스의 속성 값을 구성하여 변형(variant)을 선택할 수 있다.

    구성 요소 세트(component sets) 선택

    1. 왼쪽 사이드바에서 자산 탭을 클릭 하거나 키보드 단축키를 사용한다.
      • 맥 :

    오른쪽 사이드바에서 속성과 값을 구성하여 구성 요소 집합에서 다른 변형을 선택합니다.

    1. 인스턴스를 선택합니다.
    2. 오른쪽 사이드바에서 구성 요소의 이름을 봅니다. 구성 요소에 변형이 있는 경우 구성 요소 이름 아래에 해당 구성 요소 집합의 속성과 값을 구성하는 필드가 표시됩니다.
      • 사용 ‘⌄’ 속성 옆에 있는 원하는 값 조합을 선택합니다.
      • 다음을 사용하여 특정 속성을 껐다가 켭니다. On 그리고 Off 토글 스위치

    인스턴스(instances) 간 스왑(swap)

    일반 구성 요소와 마찬가지로 변형을 사용할 때 인스턴스 간에 교체할 ​​수 있다.

    가장 효율적인 방법은 인스턴스 메뉴 를 사용하는 것이다. 인스턴스 메뉴를 사용하면 현재 파일 또는 활성화된 팀 라이브러리에서 구성 요소 교체를 찾을 수 있다.

    구성 요소를 선택한 경우 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스한다.

    1. 변경할 인스턴스를 선택한다.
    2. 오른쪽 사이드바에서 구성 요소 이름을 클릭한다.
    3. 인스턴스 메뉴를 사용하여 다른 구성 요소를 검색하고 선택한다.

    인스턴스 메뉴를 사용하여 교체하는 방법 알아보기 →

    속성 재정의(override)

    구성 요소 라이브러리는 설계 시스템의 이상적인 구현을 정의하고 개략적으로 설명한다.

    이러한 구성 요소에는 버튼 레이블과 같이 변경해야 하는 일반 정보가 포함되어 있는 경우가 많다. 일부 상황에서는 해당 특정 인스턴스의 다른 측면을 변경해야 할 수도 있다.

    재정의(Overrides)를 사용하면 인스턴스를 표면적으로 변경할 수 있다. Figma는 텍스트, 채우기, 획 및 효과 속성에 대한 재정의를 지원한다. 지원되는 재정의에 대해 자세히 알아보기 →

    보존 재정의(override)

    Figma는 다른 변형을 선택하거나 인스턴스 메뉴에서 인스턴스 간에 교체할 ​​때 재정의를 유지하려고 시도한다.

    Figma는 다음 기준을 사용하여 재정의를 유지할지 여부를 결정한다.

    • 레이어 이름은 현재 인스턴스와 선택하는 변형 또는 인스턴스 간에 일치해야 한다. 이는 인스턴스를 교체하고 변형을 선택할 때 모두 적용된다.
    • 변형을 선택할 때 Figma는 재정의한 레이어 속성이 원래 변형 간에 일치하는지 확인한다. 그렇다면 Figma는 재정의를 유지한다.

    아래 예제에서 Figma는 3단계에서 채우기 재정의를 유지하지만 4단계에서는 유지하지 않는다. 이는 default primary 버튼과 hover primary 버튼이 모두 의 동일한 채우기로 시작했기 때문이다 #1BC47D. 우리의 재정의는 16진수 코드에서  #1BC47D로 변경하는 것이었다 #F531B3.

    hover secondary 변형의 채우기가 있으므로 Figma는 4단계에서 재정의를 유지하지 않는다 #ffffff. 이는 원래 재정의를 적용한 채우기와 다르다( #1BC47D).

    Preserve_overrides.png

    Tip! 팁! Component set에서 사용할 수 있는 변형이나 원래 스타일이 확실하지 않은 경우 원본 파일에서 component set을 볼 수 있다. 인스턴스를 선택한 상태에서 ‘❖’은 오른쪽 사이드바의 구성요소 이름 옆에 있다.

    Figma 커뮤니티에서 Variants Playground 파일 탐색 →
    출처: Variants in Figma
  • 피그마 Prototyping

    피그마 Prototyping

    Figma의 프로토타이핑 기능을 사용하면 사용자가 디자인과 상호 작용할 수 있는 방법을 탐색하는 대화형 흐름을 만들 수 있다.

    프로토타입은 다음을 수행하는 환상적인 방법이다.

    • 상호 작용 및 사용자 흐름 미리 보기
    • 아이디어 공유 및 반복
    • 공동 작업자로부터 피드백받기
    • 사용자와의 상호 작용 테스트
    • 이해 관계자에게 디자인 발표

    아래에서 프로토타이핑에 대한 비디오를 시청하십시오. 또는  YouTube에서 프로토타입 및 협업 재생 목록을 확인하십시오.

    Tip! 훨씬 더 효율적인 워크플로우를 위해 키보드 단축키([keybt]Shift[/keybt] + [keybt]E[/keybt])를 사용하여 Design 탭과 Prototype 탭 사이를 빠르게 전환할 수 있다.

    흐름(flows) 및 시작점(starting point)

    Figma에서 프로토타이핑을 사용하면 한 페이지에 프로토타입에 대한 여러 흐름을 만들어 사용자의 전체 여정과 디자인을 통한 경험을 미리 볼 수 있다.

    흐름은 단일 페이지의 프레임 및 연결 네트워크이다. 프로토타입은 앱이나 웹사이트를 통한 사용자의 전체 여정을 매핑하거나 자체 흐름을 통해 특정 부분에 집중할 수 있다. 예: 프로토타입은 전자상거래 사이트에서 가능한 모든 상호작용을 다룬다. 프로토타입 내에는 계정 생성, 장바구니에 항목 추가 및 체크아웃을 위한 흐름이 있다.

    Figma는 두 프레임 사이에 첫 번째 연결을 추가할 때 흐름 시작점을 만든다. 프로토타입에 흐름 시작점을 추가하는 몇 가지 다른 방법이 있다.

    • 시작 프레임을 선택한 상태에서 오른쪽 사이드바의 Flow starting point 섹션에서 ‘+’ 클릭
    • 프레임을 마우스 오른쪽 버튼으로 클릭한 다음 시작점 추가(Add starting point)를 클릭한다.
    • 기존 시작점으로 프레임을 복제한다.

    디자인을 테스트할 때 전체 프로토타입을 공유하거나 흐름 시작점에 대한 링크를 복사할 수 있다.

    시작 지점 및 흐름에 대해 자세히 알아보기 →

    Note: 최상위 프레임은 여러 흐름의 일부일 수 있지만 시작점은 하나만 있을 수 있다. 최상위 시작 프레임 내에 중첩된 프레임에는 여러 흐름에서 사용자를 탐색하는 연결이 있을 수 있다. 예를 들어 로그인 및 가입 버튼은 동일한 시작 지점 프레임에 중첩된 다음 각 경험에 대해 별도의 흐름에서 프레임에 연결할 수 있다.

    연결(connections) 만들기

    1. 연결을 위한 핫스팟(hotspot)을 선택한다.
    2. 개체 오른쪽 사이드 중앙에 아이콘 ‘⊕‘을 클릭하여 연결을 생성한다.
    3. 원하는 대상으로 드래그한다.
    4. 기존 연결이 없는 경우 Figma는 첫 번째 프레임을 시작점으로 만든다.
    두 프레임 간의 연결 분석

    상호 작용 및 애니메이션 만들기

    1.  오른쪽 사이드바에서 프로토타입(prototype) 탭을 연다. 
    2. 상호작용(interactions) 추가
    3. 상호작용 세부 정보 설정
    4. 애니메이션 적용
    5. 애니메이션 미리보기
    상호 작용 및 애니메이션 만들기

    프로토타입 설정 조정

    1. 장치(Device) 및 모델(Model) 선택
    2. 프로토타입 미리보기(Preview)
    3. 배경색(Background) 선택
    4. 프로토타입의 시작 프레임(Starting Frame) 설정
    장치 미리보기 배경 및 흐름 설정이 있는 오른쪽 사이드바의 프로토타입 탭

    프로토타입 제작에 대해 자세히 알아보기

    시작하다
    고급 상호 작용
    공유 및 협업

    용어 사전

    • 핫스팟(hotspot)은  상호 작용이 일어나는 곳이다. 핫스팟은 링크, 버튼, 이미지 또는 아이콘 등과 같이 원본 프레임 내의 모든 개체일 수 있다.
    • 연결(Connections)은 핫스팟을 대상에 연결하는 파란색 화살표 또는 “noodles”이다. 연결을 통해 상호 작용 및 애니메이션 설정을 적용한다.
    • 흐름(flow)은 프로토타입을 통해 경로를 형성하는 연결된 프레임의 네트워크이다. 각 흐름에는 고유한 시작점(starting point)이 있다. 프로토타입 내에서 여러 흐름을 가질 수 있다.
    • 시작점(starting point)은 흐름의 첫 번째 프레임이다. 프레젠테이션 보기에서 프로토타입의 다른 흐름을 표시하도록 여러 시작점을 설정 가능하다.
    • 트리거(trigger)는 핫스팟과의 어떤 유형의 상호 작용으로 인해 프로토타입이 진행되는지 결정한다. 이것은 탭(tab), 드래그(drag), 클릭(click), 호버(hover) 등과 같은 마우스 또는 터치 상호 작용일 수 있다.
    • 목적지(destination)는 전환이 끝나는 곳이다. 이것은 프레임 내의 개체가 아니라 최상위 프레임(캔버스에 직접 추가되는 프레임)이어야 한다. A에서 B로 이동하는 것을 생각하면  A는 핫스팟이고  B는 목적지이다.
    • 액션(action)은 프로토타입에서 발생하는 진행 유형을 정의한다. 예를 들어 작업은 다른 프레임으로 이동하거나 외부 URL을 여는 것일 수 있다.
    • 애니메이션(animation) 설정은 프로토타입이 한 프레임에서 다른 프레임으로 이동하는 방식을 결정한다. 애니메이션의 종류와 속도, 방향을 제어할 수 있다.
    • 전환(transition)은 애니메이션 기본 유형이다. 이는 작업이 대상으로 이동하는 장면을 정의한다.
    • 방향(direction)은 전환이 발생하는 방향을 제어한다. left, right, top 또는 bottom 중에서 선택한다.
    • 지속(duration) 시간은 애니메이션을 완료하는 데 걸리는 시간을 제어한다. 지속 시간이 짧을수록 전환이 빨라진다. 1ms에서 10000ms(10초) 사이의 기간을 선택한다.
    • 이징(Easing)은 애니메이션의 가속에 영향을 준다. 즉, 느리게 시작하거나 빠르게 시작한다. 이를 통해 보다 자연스러운 느낌의 애니메이션을 만들 수 있다.
    • 오버레이(overlays)는 현재 화면이나 프레임 위에 나타나는 프레임이다. 오버레이를 사용하여 도구 설명(tool-tips), 대화형 메뉴(interactive menus), 경고(alerts) 또는 확인(confirmations)을 만들 수 있다.
    • 오버플로 동작(overflow behavior)을 사용하면 프로토타입이 스크롤에 응답하는 방식을 정의할 수 있다. 이를 통해 캐러셀(carousels), 갤러리(galleries) 또는 대화형 지도(interactive maps)와 같은 고급 사용자 상호 작용을 만들 수 있다.
    • 프로토타입을 발표할 때 표시할 장치(device)를 선택하자. 장치와 모델을 모두 정의한다.
    • 배경색(background color)을 사용하면 프로토타입의 배경색을 정의할 수 있다. 
    • 세로 및 가로 프레임이 있는 프로토타입이 있는 경우 방향(orientation)을 선택할 수 있다. 방향은 전체 프로토타입에 대해 설정된다. 프로토타입 내에서 세로 보기와 ​​가로 보기를 전환할 수 없다.
    • 미리보기(preview)는 프로토타입에서 어떻게 보이거나 작동하는지 보여준다. 애니메이션(animations)과 프로토타입 장치(device) 설정 모두에 대한 미리보기를 보여준다.
    출처 : Figma Prototyping
  • 피그마 Constraints

    피그마 Constraints

    제약 조건(constraints)을 적용하여 레이어 크기 조정 방법 정의

    제약 조건은 프레임 크기를 조정할 때 개체가 어떻게 반응해야 하는지 Figma에 알려준다. 이를 통해 다양한 화면 크기와 장치에서 디자인이 어떻게 보이는지 제어할 수 있다.

    아래 비디오를 확인하거나 계속해서 더 자세히 알아볼 수 있다.

    수평(horizontal) 및 수직(vertical) 제약

    x(수평) 및 y(수직) 축 모두를 따라 제약 조건을 적용할 수 있다.

    Note: 기본적으로 객체의 Constraints를 Top 및 Left로 설정합니다.

    수평(horizontal) 제약

    수평 제약 조건은 x축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

    • 왼쪽(Left)은 프레임의 왼쪽을 기준으로 개체의 위치를 ​​유지한다.
    • 오른쪽(Right)은 프레임의 오른쪽을 기준으로 개체의 위치를 ​​유지한다.
    • 왼쪽과 오른쪽(Left and right)은 프레임의 양쪽을 기준으로 개체의 크기와 위치를 유지하며, 이로 인해 크기가 조정될 때 개체가 x축을 따라 커지거나 줄어들 수 있다.
    • 센터(Center)는  프레임의 수평 가운데를 기준으로 한 객체의 위치를 유지한다.
    • 배율(Scale)은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다. 

    예: 프레임의 너비는 100px이고 개체의 너비는 70px이다. 즉 개체가 상위 프레임의 70%를 차지한다. 프레임의 크기를 200픽셀로 조정하면 Figma는 개체의 너비를 200픽셀의 70%인 140픽셀로 조정한다.

    수직(vertical) 제약

    수직 제약 조건은 y축을 따라 프레임 크기를 조정할 때 개체가 동작하는 방식을 정의한다.

    • 상단(Top)은 프레임 상단을 기준으로 개체의 위치를 ​​유지한다.
    • 하단(Bottom)  은 프레임 하단을 기준으로 개체의 위치를 ​​유지한다.
    • 위쪽 및 아래쪽(Top and bottom)  은 프레임의 위쪽 및 아래쪽을 기준으로 개체의 크기와 위치를 유지한다. 이로 인해 크기가 조정될 때 객체가 y축을 따라 커지거나 줄어들 수 있다.
    • 센터(Center)는  프레임의 수직 중심을 기준으로 한 객체의 위치를 유지한다.
    • 배율(Scale)  은 개체의 크기와 위치를 프레임 치수의 백분율로 정의한다. 그런 다음 크기를 조정할 때 해당 비율을 유지한다.

    Note: 개체의 위치에 따라 둘 이상의 제약 조건이 동일한 결과를 얻을 수 있다.

    개체에 제약 조건 적용

    Frame 내의 모든 객체에 제약 조건(Constraints)을 적용할 수 있다. 

    • 다른 프레임 내에 중첩된 프레임에 제약 조건을 적용할 수도 있다.
    • 객체에 수평 및 수직 구속조건을 모두 적용할 수 있다.
    • 제약 조건을 사용하여 스크롤링 프로토타입에서 객체가 응답하는 방식을 정의할 수 있다. Figma의 프로토타이핑에 대해 자세히 알아보자.
    • 그룹(Group)에는 제약 조건을 적용할 수 없다. 그룹은 그 안에 포함된 객체로부터 경계를 상속한다. 경계가 있는 단일 개체로 간주되지 않는다. 

    Note: 그룹에 제약 조건을 적용하면 대신 개별 개체에 제약 조건을 적용한다.

    항목에 대한 제약을 설정하려면 다음을 수행한다.

    1. 프레임 내에서 개체 또는 부모를 선택한다. 캔버스의 파란색 점선은 현재 적용된 제약 조건을 보여준다.
    2. 속성 패널의 제약 조건 설정에서 수직 및 수평 제약 조건을 조정한다.
      • 드롭다운 메뉴를 사용하여 개체의 제약 조건을 설정한다.
      • 또는 대화형 다이어그램의 선을 클릭하여 제약 조건을 선택한다.
    3. 스크롤할 때에도 개체가 동일한 위치에 유지되도록 하려면 스크롤할 때 위치 고정(Fix position when scrolling) 옆에 있는 확인란을 선택한다.

    Tip! 누른 상태에서 Shift하나 이상의 제약 조건을 선택한다. 예: 왼쪽 및 오른쪽 제약 조건.

    제약 조건 무시

    적용되는 제약 조건을 사용하지 않고 프레임이나 레이어의 크기를 조정하려는 경우가 있다. 수정자 키를 누르고 있으면 레이어에 적용된 제약 조건을 일시적으로 무시할 수 있다.

    • MacOS: ⌘ Command  크기 조정 시 길게 누르기
    • Windows: Ctrl  크기를 조정할 때 길게 누르기

    제약 조건 및 레이아웃 그리드

    제약 조건은 프레임 내에서 레이어를 배치하기 위한 기본 프레임워크를 제공한다. 보다 복잡한 디자인의 경우보다 정밀한 제어와 유연성이 필요하다. 이렇게 하면 크기가 조정될 때 디자인이 작동한다.

    여기에서 그리드가 작동한다. 프레임 내에서 그리드를 사용하면 Figma는 프레임 내의 모든 레이어를 해당 그리드에 정렬한다. 제약 조건 및 레이아웃 그리드 작업 →

    출처 : Figma Constraints
  • 피그마 Layout Grids

    피그마 Layout Grids

    그리드(grids), 열(columns) 및 행(rows)으로 레이아웃 그리드 생성

    화면용으로 디자인할 때 경쟁해야 할 레이아웃이 얼마든지 있다. 우리의 디자인이 적응할 수 있도록 하려면 정밀도(precision)와 유연성(flexibility)이 모두 필요하다.

    픽셀 그리드는 배치에 대한 정밀도와 제어를 제공한다. 레이아웃 그리드는 설계를 구현하는 데 더 큰 유연성을 제공한다.

    레이아웃 그리드(layout grids)에 대해 자세히 알아보기
    • 이 페이지 하단에서 자주 묻는 질문에 대한 답변을 확인하자.
    • 블로그 게시물인 Grid Pro Quo에서 레이아웃 그리드를 사용하는 방법에 대해 자세히 알아보자.

    레이아웃 그리드(layout grids)란?

    레이아웃 그리드는 프레임 내에서 개체를 정렬하는 데 도움이 된다. 그들은 우리의 디자인에 시각적 구조를 제공한다. 그들은 우리의 디자인이 다양한 플랫폼과 장치에서 논리적이고 일관성을 유지하는 데 도움이 된다.

    레이아웃 그리드는 픽셀 그리드에 의존하지 않는다. 즉, 특정 해상도나 치수에 의존하지 않는다.

    레이아웃 그리드는 프레임에만 적용할 수 있다. 이것은 최상위 프레임이거나 다른 프레임 내에 중첩된 프레임일 수 있다.

    레이아웃 그리드를 사용하면 다음을 수행할 수 있다.

    • 여러 플랫폼에서 일관성을 설정한다.
    • 레이아웃을 정의할 때 더 적은 수의 결정을 내려야 한다.
    • 목업(mock-ups) 또는 와이어프레임(wireframes)에 대한 레이아웃을 정의하는 데 걸리는 시간을 줄인다.
    • 갤러리(galleries), 아이콘(icons) 또는 전체 페이지 레이아웃(entire page layouts)과 같은 다양한 레이아웃 기술을 지원한다.

    Note: 블로그 게시물: 화면 디자인을 위한 그리드 시스템(Grid Systems for Screen Design)에서 Figma와 함께 그리드 시스템을 사용하는 방법에 대해 자세히 알아보자.

    레이아웃 그리드 적용

    레이아웃 그리드를 모든 프레임에 적용할 수 있다. Components도 프레임이므로 components에도 적용할 수 있다.

    오른쪽 사이드바에서 레이아웃 그리드 설정을 찾을 수 있다.

    레이아웃 그리드를 적용하려면:

    1. 캔버스 또는 왼쪽 사이드바의 레이어 패널에서 프레임을 선택한다.
    2. 오른쪽 사이드바에서 레이아웃 그리드 옆 ‘+’을 클릭한다.
    3. 기본적으로 균일한 그리드가 프레임에 적용된다.
    4. 그런 다음 ‘⁝⁝⁝’을 클릭하여 레이아웃 그리드 설정을 열고 속성을 업데이트할 수 있다.

    레이아웃 그리드 속성

    균일한 정사각형 그리드(uniform square Grid), 열(Columns) 및 행(Rows) 세 가지 유형의 레이아웃 그리드를 사용할 수 있다.

    균일 그리드를 사용하면 그리드의 크기와 색상을 모두 정의할 수 있으며, 정사각형 그리드는 기호 또는 아이콘 디자인과 같이 정밀도가 필요한 상황에 적합하다.

    열(Columns) 및 행(Rows) 그리드를 사용하여 그리드의 너비 또는 높이와 간격(gutter) 및 바깥 여백(margins)을 정의할 수 있다. 웹 및 모바일용 반응형 인터페이스를 설계하는 데 이상적이다.

    그리드를 단독으로 사용하거나 결합하여 보다 복잡한 레이아웃을 지원할 수 있다.

    레이아웃 그리드 결합에 대해 자세히 알아보기 ↓

    레이아웃 그리드 변경

    그리드 유형을 선택하려면:

    1. 오른쪽 사이드바에서 ‘⁝⁝⁝’을 클릭한다.
    2. 레이아웃 그리드 속성 창을 클릭한다.
    3. 다음을 선택할 수 있다.
      • 균일 그리드(Uniform Grid)
      • 열이 있는 그리드(Grid with Columns)
      • 행이 있는 그리드(Grid with Rows)

    균일한 그리드 속성

    균일한 그리드를 선택하면 그리드의 크기를 선택할 수 있다. 이것은 각 사각형이 포함할 픽셀 수를 결정한다.

    예: 기본 10pt 그리드에서 그리드의 각 사각형에는 100픽셀(10px x 10px)이 포함된다.

    1. 레이아웃 그리드 설정을 열려면 ‘⁝⁝⁝’을 클릭한다.
    2. Size 필드에 원하는 크기로 업데이트한다.
    3. ‘X’을 클릭하여 창을 닫고 캔버스로 돌아간다.

    열(column) 및 행(row) 속성

    레이아웃 그리드를 열(columns), 행(rows) 또는 둘 다로 적용할 수 있다. 열 및 행 그리드를 사용하면 레이아웃을 보다 강력하게 제어하고 유연하게 조정할 수 있다.

    그리드의 다음 속성을 정의할 수 있다.

    그리드 속성
    • 개수(Count)는 그리드에 있는 열이나 행의 수를 결정한다.
    • 간격Gutter)은 각 열 또는 행 사이의 거리를 정의한다.
    • 여백(Margin)은 열이나 행이 시작되는 가장자리로부터의 거리이며, 이는 Stretch 그리드에만 적용된다.
    • 오프셋(Offset)은 열 또는 행이 시작되는 상단 또는 왼쪽으로부터의 거리이며, 이것은 행이 위쪽으로 설정되고 열이 왼쪽으로 설정될 때 적용된다.
    그리드 유형

    레이아웃 그리드에는 고정(Fixed) 및 신축(Stretchy)의 두 가지 유형이 있다.

    고정(Fixed) 레이아웃 그리드의 경우 Width(columns) 또는 Height(rows)와 열 또는 행의 Count(number)를 모두 결정할 수 있다.

    레이아웃 그리드는 다음과 같이 고정할 수 있다.

    • 행(Rows) 프레임의 Top 또는 Center
    • 열(Columns) 프레임의 Left 또는 Center

    신축성(Stretchy) 그리드는 프레임의 크기에 맞게 조정된다. 이렇게 하면 프레임 크기가 조정될 때 디자인이 그에 따라 반응할 수 있다.

    그리드의  너비(Width)  또는  높이(Height)는 프레임 크기에 따라 자동으로 결정된다.

    색상(color)

    레이아웃 그리드의 기본 색상은 빨간색(#FF0000)이며 불투명도는 10%이다.

    모든 레이아웃 그리드의 색상(Color)  및  불투명도(Opacity)를 변경할 수 있다.

    1. 오른쪽 사이드바에서 ‘⁝⁝⁝’을 클릭
    2. 색상(Color) 견본(swatch)을 클릭한다. 
    3. color picker를 사용하여 새 색상을 선택한다.
    4. 필요한 경우 불투명도(opacity)를 조정한다.

    레이아웃 그리드 결합

    위에서 언급했듯이 단일 프레임에 많은 레이아웃 그리드를 적용할 수 있다. 이것은 더 복잡한 레이아웃을 개발할 때 편리하다.

    예: 세로 및 가로 정렬을 더 잘 제어하기 위해 열  및  행 레이아웃 그리드를 모두 적용할 수 있다.

    1. 다른 레이아웃 그리드를 추가할 프레임을 선택한다.
    2. 오른쪽 사이드바의 레이아웃 그리드 옆에 ‘+’을 클릭한다.
    3. 제공된 드롭다운에서 레이아웃 그리드를 선택한다.
    4. 기타 관련 속성을 정의한다.
    5. 프레임에 레이아웃 그리드를 더 추가하려면 반복한다.

    레이아웃 그리드 전환(toggle)

    레이아웃 그리드의 가시성을 토글 할 수 있다. 이것은 레이아웃 그리드를 완전히 제거하지 않고 숨겨야 하는 상황에 유용하다.

    레이아웃 그리드는 보이지 않는 경우에도 계속 작동한다.

    모든 레이아웃 그리드 전환(toggle)

    파일의 모든 레이아웃 그리드에서 한 번에 가시성을 토글 할 수 있다.

    1. 화면 오른쪽 상단의 확대/축소 비율을 클릭한다. 그러면 보기 설정 메뉴가 열린다.
    2. 레이아웃 그리드 옵션 옆에 체크 표시가 없는 경우 이를 클릭하면 그리드가 표시된다.
    3. 이미 체크 표시가 있는 경우 레이아웃 그리드를 클릭하면 그리드가 숨겨진다.
    4. 또는 키보드 단축키를 사용하여 레이아웃 그리드를 켜고 끌 수 있다.
      • 맥: ⌃ Control + G
      • 윈도우: Control + Shift + 4

    개별 레이아웃 그리드 전환(toggle)

    단일 레이아웃 그리드를 활성화하거나 비활성화하려면 속성 패널에서 이 작업을 수행할 수 있다.

    1. 해당 프레임을 선택한다.
    2. 오른쪽 사이드바에서 레이아웃 그리드 섹션을 찾는다.
    3. 끄려면 레이아웃 그리드 옆에 가시성 아이콘을 토글 한다.
    4. 레이아웃 그리드를 다시 보려면 가시성 아이콘을 토글 한다.

    레이아웃 그리드 스타일

    이상적인 레이아웃 그리드가 완성되면 스타일을 만들어 디자인 전반에 걸쳐 재사용할 수 있다.

    스타일 생성에 대해 자세히 알아보기 →

    레이아웃 스타일 만들기

    1. 레이아웃 그리드가 적용된 캔버스에서 프레임을 선택한다.
    2. 오른쪽 사이드바의 레이아웃 그리드 섹션에서 ‘::’을 클릭
    3. 그리드 스타일 창에서 ‘+’을 클릭한다.
    4. 레이아웃 그리드 스타일에 기억하기 쉬운 이름을 지정한다.
    5. 스타일 만들기를 클릭하여 프로세스를 완료한다.

    레이아웃 스타일 적용

    1. 캔버스에서 프레임을 만들거나 선택한다.
    2. 오른쪽 사이드바에서 ‘::’을 클릭
    3. 창에서 레이아웃 그리드 스타일을 선택한다.
    4. 레이아웃 그리드가 선택한 프레임에 적용된다.

    Note: 관련 구성 요소는 다음에 의해 결정된다.

    1. 복사할 프레임을 선택한다.
    2. 오른쪽 사이드바에서 레이아웃 그리드를 클릭한다.
    3. 강조 표시되면 키보드 단축키를 사용하여 레이아웃 그리드를 복사한다.
      • 맥 : ⌘ Command + C
      • 윈도우 : Ctrl + C
    4. 레이아웃 그리드를 적용할 프레임을 선택한다.
    5. 키보드 단축키를 사용하여 레이아웃 그리드를 붙여넣는다.
      • 맥 : ⌘ Command + V
      • 윈도우 : Ctrl + V

    그리드 및 제약 조건(constraints) 작업

    더 복잡한 디자인의 경우 크기를 조정할 때 디자인이 작동하도록 하려면 정밀도와 유연성이 필요하다.

    제약 조건은 프레임 내에서 개체가 배치되는 위치에 대한 기본 프레임워크를 제공하는 데 유용하다. 레이아웃 그리드와 결합하면 강력한 레이아웃 시스템을 위한 프레임워크를 제공한다.

    그리드와 제약 조건 결합에 대해 자세히 알아보기 →

    8-point 그리드

    8포인트 그리드 시스템은 UI 레이아웃을 디자인하는 데 널리 사용되는 도구이다. 여기에는 8의 배수를 사용하여 디자인 내에서 개체의 배치를 정의하는 것이 포함된다.

    모바일 앱과 같이 고정된 제약 조건을 설계할 때 이 시스템을 사용할 수 있다. 그러나 반응형 레이아웃을 디자인할 때 유용한 도구가 될 수도 있다.

    8포인트 시스템을 구현하는 두 가지 일반적인 방법이 있다.

    • Hard grid: 8포인트 증분으로 고정 그리드에 개체를 배치하는 것과 관련된다. Figma에서 이것은 크기가 8 인 프레임에 균일한 그리드를 적용하는 것을 포함한다.
    • Soft grid: 여기에는 8로 나눌 수 있는 거리에 개체를 배치하는 것이 포함된다. 여기에는 8로 나눌 수 있는 속성이 있는 행 또는 열 레이아웃 그리드를 적용하는 것이 포함된다.

    Spec.fm 게시물에서 8포인트 그리드에 대해 자세히 알아보기 →

    자주 묻는 질문

    모든 레이아웃 그리드를 한 번에 전환할 수 있나요?

    네. 이것은 Figma의 오른쪽 상단 모서리에 있는 보기 설정 메뉴에서 수행할 수 있습니다.

    ↑ 토글 레이아웃 그리드 섹션에서 자세히 알아보기

    내 레이아웃 그리드가 표시되지 않는 이유는 무엇입니까?

    레이아웃 그리드가 표시되지 않는 데에는 몇 가지 이유가 있습니다.

    • 레이아웃 그리드는 오른쪽 사이드바에서 비활성화되었습니다.
    • 레이아웃 그리드는 전역적으로 해제되었습니다.
    • 선택한 레이어는 프레임이 아니며, 레이아웃 그리드는 프레임에만 적용할 수 있습니다.
    • 프레임이 회전되었습니다. 레이아웃 그리드를 적용하기 전에 개체의 회전 이 0º로 설정되어 있는지 확인하십시오.

    레이아웃 그리드를 복사하려면 어떻게 합니까?

    단일 레이아웃 그리드를 복사하여 다른 프레임에 적용할 수 있습니다. 또는 디자인 전체에서 재사용할 수 있는 레이아웃 그리드 스타일을 생성할 수 있습니다.

    레이아웃 그리드 스타일 섹션에서 자세히 알아보기 ↑

    출처: Layout grids in Figma
  • 피그마 Auto Layout

    피그마 Auto Layout

    Auto layout은 프레임 및 구성 요소에 추가할 수 있는 속성이다. 이를 통해 채워지거나 축소되는 디자인을 만들고 내용이 변경되면 리플로우 할 수 있다. 이것은 새 레이어를 추가하거나 더 긴 텍스트 문자열을 수용하거나 디자인이 발전함에 따라 정렬을 유지해야 할 때 유용하다.

    Auto layout을 사용하는 방법에는 여러 가지가 있다.

    • 텍스트 레이블을 편집할 때 커지거나 작아지는 버튼을 만든다.
    • 항목이 추가, 제거 또는 숨겨짐에 따라 조정되는 목록을 작성하자.
    • 자동 레이아웃 프레임을 결합하여 완전한 인터페이스를 구축한다.

    Auto layout은 움직이는 부분과 용도가 많은 강력한 기능이다. 이 글에서는 프레임에 자동 레이아웃을 추가하는 방법과 각 속성이 작동하는 방법을 보여준다.

    Auto layout 추가

    프레임이나 선택한 개체에 자동 레이아웃을 추가할 수 있다. 여기에는 다음이 포함된다.

    • 새 프레임 또는 빈 프레임
    • 기존 콘텐츠가 있는 프레임
    • 구성 요소 및 구성 요소 세트
    • 레이어 및 개체의 그룹 또는 기타 선택

    Note: 자동 레이아웃은 프레임에서만 지원된다. 프레임에 없는 개체를 선택하면 Figma가 개체 주위에 자동 레이아웃 프레임을 생성한다.

    다음 몇 곳에서 선택한 프레임, 구성 요소 또는 구성 요소 집합에 자동 레이아웃을 추가할 수 있다.

    • 바로 가기 키를 사용한다. [keybt]Shift[/keybt] + [keybt]A[/keybt]
    • 오른쪽 사이드바에서 [keybt]+[/keybt] 프레임이 선택된 자동 레이아웃 옆에 있다.
    • 프레임 또는 개체를 마우스 오른쪽 버튼으로 클릭하고 자동 레이아웃 추가를 선택한다.

    Tip! 구성 요소에 자동 레이아웃을 추가할 수 있습니다. 각 구성 요소에 개별적으로 자동 레이아웃을 추가해야 합니다.

    Auto layout 속성

    자동 레이아웃이 있는 프레임은 일반 프레임과 속성이 다르다. 자동 레이아웃을 적용하면 오른쪽 사이드바에 몇 가지 변경 사항이 표시된다.

    프레임을 자동 레이아웃하려면 다음을 수행할 수 없다.

    • 🚫 해당 프레임에 레이아웃 그리드(Layout grids) 추가
    • 🚫 자동 레이아웃 프레임 내의 모든 개체에 제약 조건 적용(Constraints)
    • 🚫 프레임 내의 모든 개체에 스마트 선택 사용(Smart selection)
    Auto_layout_section_of_the_Design_tab_in_the_right_sidebar.png
    방향(direction)

    방향은 자동 레이아웃 프레임이 흐르는 방식을 설명한다.

    • 수직(vertical)을 선택하여 y축을 따라 개체를 추가, 제거 및 재 정렬한다. 예: 목록 내의 개체 또는 뉴스피드 또는 타임라인 내의 게시물.
    • 가로(horizontal)를 선택하여 x축을 따라 개체를 추가, 제거 및 재 정렬한다. 예: 버튼 행 또는 모바일 탐색 메뉴의 아이콘.

    Figma는 현재 수평 또는 수직으로 한 번에 한 방향만 지원한다. 양방향을 사용하는 디자인을 작성하려면 자동 레이아웃 프레임을 결합하거나 중첩해야 한다.

    아래 예에서는 제목, 설명 및 상영 시간이 있는 카드를 만들기 위해 수직 자동 레이아웃 프레임 내에 수평 자동 레이아웃 프레임을 중첩했다.

    아이템 사이의 간격

    자동 레이아웃 프레임에서 항목 사이의 간격(spacing between items)을 제어할 수 있다.

    스마트 선택과 달리 캔버스의 간격을 조정할 수 있는 방법이 없다. 대신 오른쪽 사이드바의 자동 레이아웃 섹션에 있는 간격 필드를 사용해야 한다.

    • 수평 아이콘 사이의 수평(Horizontal) 공간
    • 수직 아이콘 사이의 수직(Vertical) 공간

    필드에 숫자를 입력하거나 화살표 키를 사용하여 값을 조금씩 이동하거나 커서를 사용하여 필드를 문지른다.

    안 여백(padding)

    패딩은 자식 개체와 자동 레이아웃 프레임의 경계 사이의 빈 공간이나 공백을 제어합니다. 패딩을 균일하게 설정하거나 상단, 오른쪽, 하단 및 왼쪽 패딩에 대해 다른 값을 가질 수 있습니다.

    • 에 단일 값을 입력한다. 패딩 아이콘 필드를 사용하여 모든 면에 동일한 패딩을 설정하거나 CSS 약식을 사용하여 개별 값을 설정한다. 예를 들어, 입력 1,2,3,4 하면 값이 각각 위쪽: 1, 오른쪽: 2, 아래쪽: 3, 왼쪽: 4로 설정된다. 또는 입력 1,2 하면 값이 위/아래: 1 및 왼쪽/오른쪽: 2로 설정된다.
    • 각 면에 대해 고유한 패딩을 수동으로 설정하려면 정렬 및 분포 설정을 열고 각 값을 개별적으로 조정한다.

    Note: 음수 패딩 값은 지원되지 않는다.

    Tip! 
    tab 키를 눌러 위쪽, 오른쪽, 아래쪽 및 왼쪽 입력 필드 사이를 탐색한다.

    정렬(alignment)

    자동 레이아웃 프레임 내에서 자식 개체를 정렬하는 방법을 선택한다. 자동 레이아웃 프레임의 방향과 분포는 사용 가능한 정렬 옵션을 결정한다.

    일반 프레임의 개체와 달리 개체의 정렬을 개별적으로 제어할 수 없다. 이러한 이유로 부모 자동 레이아웃 프레임에서 자식 개체의 정렬을 설정한다.

    인터랙티브 그리드를 사용하여 프레임의 어린이를 위한 9가지 레이아웃 옵션 중에서 선택한다.

    AL_Alignment_tool.gif

    분포가 Space between으로 설정된 경우 각 방향에 대해 세 가지 옵션이 있다.

    • ↓ 세로 자동 레이아웃: Left, Center, Right
    • → 수평 자동 레이아웃: Top, Center, Bottom

    배포가 Packed로 설정된 경우 각 방향에 대해 동일한 9가지 옵션이 있다.

    • Top left
    • Top center
    • Top right
    • Left
    • Center
    • Right
    • Bottom left
    • Bottom center
    • Bottom right

    Note: 하나 이상의 크기 조정 속성이 내용을 포옹하도록 설정된 경우 일부 선택 항목으로 인해 캔버스에서 시각적으로 다른 레이아웃이 생성되지 않는다. 이는 포옹 내용이 자식 개체 주변의 추가 공간을 제거하기 때문이다.

    분포(distribution)

    프레임의 자식 개체에 대한 정렬 규칙을 설정했으면 해당 개체가 해당 프레임 내에서 배포되는 방식을 선택한다.

    정렬 패널에서, 화살표를 선택하면 다음 항목을 확인한다.

    • Packed: 프레임의 개체가 함께 그룹화된다. 이 옵션을 사용하면 프레임에 있는 개체를 최대한 가깝게 유지하고 함께 정렬할 수 있다.
    • Space between: 프레임의 개체 사이에는 프레임에 대해 설정된 방향 및 정렬을 따라 균등하게 분포된 간격이 있다. 이 옵션을 사용하여 프레임에서 개체를 늘린다.
    AL_Distribution.gif
    크기 조정(resizing)

    자동 레이아웃의 가장 강력한 기능 중 하나는 자동 레이아웃 프레임에서 개체의 크기를 제어하는 ​​기능이다.

    상위 자동 레이아웃 프레임의 크기 조정 동작을 설정하여 하위 개체에 대한 변경 사항을 적용한다. 크기 조정 설정은 드롭다운 메뉴와 크기 조정 패널을 사용하여 X 및 Y축 모두에 있는 개체에 개별적으로 적용할 수 있다.

    Resizing_panel_of_the_right_sidebar.png

    Note: 텍스트 레이어에는 자체 크기 조정 속성도 있다. 자동 레이아웃 프레임 내에서 이것은 몇 가지 유용한 결과를 생성할 수 있다.

    자동 레이아웃 프레임을 완전히 유동적으로 만들려면 고정 크기 텍스트 상자를 사용하지 않는 것이 좋다. 고정 크기 텍스트 레이어는 텍스트에 맞게 크기가 조정되지 않아 자동 레이아웃 프레임에서 레이어 간에 겹칠 수 있다.

    텍스트 크기 조정에 대해 자세히 알아보기 →
    고정 너비(fixed width) 또는 높이(height)

    자동 레이아웃 프레임이 고정(Fixed) 너비 또는 높이로 설정된 경우 프레임 크기 값은 프레임 안의 내용에 관계없이 동일하게 유지된다. 프레임의 크기는 길이가 변하는 텍스트 문자열과 같이 프레임 안에 있는 개체의 변경 사항에 응답하지 않는다.

    허그 콘텐츠(hug content)

    자동 레이아웃 프레임을 허그 콘텐츠(Hug content)로 설정하여 하위 개체에 따라 자체 크기를 조정한다. 프레임은 패딩 값을 존중하면서 그 안의 개체를 둘러싸기 위해 가능한 가장 작은 치수를 유지한다.

    Note: 자동 레이아웃 프레임 내의 자식 개체가 컨테이너 채우기(Fill container)로 설정된 경우 부모 프레임은 더 이상 내용을 포함하지 않고 축에 대해 고정(Fixed)이 된다.

    컨테이너 채우기(fill container)

    컨테이너 채우기(Fill container)로 설정된 자동 레이아웃 프레임의 개체는 상위 프레임의 너비 및 높이로 늘어난다.

    제약 조건(constraints) 및 크기 조정(resizing)

    자동 레이아웃 프레임 내의 자식 개체에는 제약 조건을 적용할 수 없다. 대신 크기 조정 속성을 사용하여 개체가 프레임에 응답하는 방식 또는 프레임의 개체 크기가 조정되는 방식을 정의할 수 있다.

    일반 프레임 내에 중첩되어 있는 경우 자동 레이아웃 프레임에 여전히 제약 조건을 적용할 수 있다. 자동 레이아웃 프레임에 대한 제약 조건과 그 안의 모든 개체에 대한 크기 조정 동작을 모두 설정할 수 있는 제약 조건 및 크기 조정(Constraints and resizing) 섹션이 표시된다.

    예를 들어, 자동 레이아웃을 사용하여 탐색 모음을 만든 경우 다른 화면 크기에 맞게 조정할 수 있다. 제약 조건을 사용하여 상위 프레임의 크기가 조정될 때 탐색 모음이 올바르게 응답하는지 확인하고 크기 조정을 통해 탐색 모음 내의 개체가 이러한 변경 사항에 응답하는 방식을 제어할 수 있다.

    AL_Constraints.gif
    제약 조건에 대해 자세히 알아보기 →

    개체 추가, 편집 및 제거

    자동 레이아웃 프레임에 개체 추가

    자동 레이아웃 프레임에 레이어나 개체를 추가할 수 있다.

    1. 자동 레이아웃 프레임 위로 개체를 클릭하고 끓다.
    2. 파란색 표시기를 사용하여 개체를 배치할 위치를 선택한다.
    AL_drag_nested_frame.gif

    Note: 개체의 크기는 자동 레이아웃 프레임에 추가할 수 있는지 여부를 결정한다. 개체의 치수가 상위 프레임보다 큰 경우 자동 레이아웃에 추가하는 옵션이 표시되지 않는다.

    수정자 키를 사용하여 Figma의 기본 동작을 무시하고 자동 레이아웃에 더 큰 개체를 추가하거나, 또는 중첩된 자동 레이아웃에 개체를 추가한다.

    맥: [keybt]⌘ Command[/keybt], 윈도우: [keybt]Ctrl[/keybt]

    부모, 자녀 및 형제 관계에 대해 자세히 알아보기 →
    자동 레이아웃 프레임 중첩

    다른 자동 레이아웃 프레임 내에 자동 레이아웃 프레임을 중첩할 수 있다. 이를 통해 수평 및 수직 레이아웃을 결합하여 복잡한 인터페이스를 생성할 수 있다.

    자동 레이아웃 프레임을 중첩하면 중첩 프레임에 부모 속성과 자식 속성이 모두 포함된다.

    아래 예에는 4가지 수준의 자동 레이아웃이 있다.

    1. Button: 각 버튼은 수평 자동 레이아웃이다. 이렇게 하면 레이블 텍스트를 변경할 때 버튼이 커지거나 줄어들 수 있다.
    2. Button Row: 그런 다음 두 버튼을 다른 수평 자동 레이아웃에 추가한다. 이렇게 하면 형제의 내용이 변경될 때 객체가 응답할 수 있다.
    3. Post: 그런 다음 포스트의 다른 객체와 함께 수직 자동 레이아웃에 버튼을 추가한다. 여기에는 설명, 이미지 및 사용자 프로필이 포함된다.
    4. Timeline: 타임라인을 만들기 위해 세로 자동 레이아웃에 3개를 추가했다. 자동 레이아웃 프레임은 캔버스에 있는 최상위 프레임(top-level frame)이다.
    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5de860a304286364bc928229/file-jlSCx6rH8w.png

    다음과 같은 몇 가지 방법으로 자동 레이아웃 프레임을 중첩할 수 있다.

    • 자동 레이아웃 프레임을 기존 자동 레이아웃 프레임으로 드래그
    • 선택한 자동 레이아웃 프레임(및 기타 개체) 주위에 새 자동 레이아웃 프레임을 만든다.
    1. 자동 레이아웃 프레임과 포함할 다른 레이어를 선택한다.
    2. 키보드 단축키 [keybt]Shift[/keybt] + [keybt]A[/keybt]를 사용하여 자동 레이아웃을 추가한다.
    3. Figma는 선택 항목 주위에 프레임을 만들고 자동 레이아웃을 추가한다.

    Tip! Figma의 기본 육아 행동(parenting behavior)을 우회할 수 있다. 개체를 현재 프레임 내에 유지하거나 Figma가 개체를 중첩하지 못하도록 수정자 키를 누르고 있는다.

    맥: [keybt]⌘ Command[/keybt], 윈도우: [keybt]Ctrl[/keybt]

    부모, 자녀 및 형제 관계에 대해 자세히 알아보기 →
    복제 개체(duplicate objects)

    기존 개체를 복제하여 자동 레이아웃에 추가할 수 있다. Figma는 원본 개체의 오른쪽(가로) 또는 아래(세로)에 복제본을 추가한다.

    1. 자동 레이아웃 프레임에서 자식 개체를 선택한다.
    2. 바로 가기 키를 사용하여 복제한다.
      • 맥: [keybt]⌘ Command[/keybt] + [keybt]D[/keybt]
      • 윈도우: [keybt]Ctrl[/keybt] + [keybt]D[/keybt]
    개체 정렬(arrange) 또는 재정렬(reorder)

    Note: 인스턴스에서 개체를 재 정렬할 수 없다. 주 구성 요소에서 개체의 순서를 변경하거나 개체를 재 정렬하려면 인스턴스를 분리해야 한다.

    구성 요소와 함께 자동 레이아웃 사용에 대해 자세히 알아보기 →

    자동 레이아웃 프레임에서 개체가 나타나는 순서를 변경할 수 있다. 이는 주요 구성 요소 또는 구성 요소 외부의 자동 레이아웃 프레임에서만 지원된다.

    1. 자식 개체를 선택한다. 레이어가 중첩된 경우 수정자 키를 사용하여 심층 선택해야 한다.
      • 맥: [keybt]⌘ Command[/keybt]
      • 윈도우: [keybt]Ctrl[/keybt]
    2. 개체를 재 정렬하는 몇 가지 방법이 있다.
      • 키보드의 화살표 키를 사용하여 개체를 새 위치로 이동한다.
      • 개체를 클릭하여 새 위치로 끓다.
    개체 제거

    기본 구성 요소 또는 자동 레이아웃 프레임에서 개체를 제거하려면:

    • 자동 레이아웃 프레임 외부로 개체를 끓다.
    • 레이어 보기/가시성 아이콘을 토글 한다.
    • 개체를 선택하고 [keybt]Delete[/keybt] 또는 [keybt]Backspace[/keybt]키 를 누릅니다.

    인스턴스에서 레이어나 개체를 삭제할 수 없다. 시도하면 Figma는 레이어를 제거하는 대신 레이어의 가시성을 토글 한다.

    Tip! 레이어 또는 개체의 가시성을 토글 하면 자동 레이아웃 프레임에서 숨겨진다. 개체가 있어야 하는 위치에 간격을 만들려면 개체의 불투명도를 대신 조정할 수 있다. 오른쪽 사이드바에서 레이어 설정으로 업데이트한다.

    Auto layout 제거

    자동 레이아웃을 제거하면 프레임의 일반 속성에 액세스 할 수 있다.

    자동 레이아웃을 제거하는 몇 가지 방법이 있다.

    • 프레임을 마우스 오른쪽 버튼으로 클릭하고 자동 레이아웃 제거(Remove auto layout)를 선택한다.
    • 오른쪽 사이드바에서 자동 레이아웃 옆에 있는 ‘-‘을 클릭

    Note: 자동 레이아웃 추가(Add auto layout) 키보드 단축키를 사용하여 자동 레이아웃 속성을 제거할 수 없다. 이 단축키를 사용하면 현재 선택 항목 주위에 새로운 자동 레이아웃 프레임이 생성된다.

    Auto layout이 있는 프로토타입

    자동 레이아웃으로 프로토타입을 만들 때 몇 가지 염두에 두어야 할 사항이 있다.

    Smart Animate 전환은 프레임의 배경을 고려하지 않는다. 스마트 애니메이트와 함께 Slide in 또는 Move in 전환을 사용하려면 배경을 추가해야 한다. 일반 프레임 내에 직사각형을 만들고 그 안에 자동 레이아웃 프레임을 배치할 수 있다.

    슬라이드 인 및 무브인 전환에 대해 자세히 알아보기 →

    프레임에 스크롤 오버플로를 적용하려면 프레임 경계를 넘어 확장할 콘텐츠가 있어야 한다.

    자동 레이아웃 부모의 치수는 콘텐츠 기반이므로 개체에 맞게 크기가 조정된다. 스크롤 오버플로를 복제하려면 자동 레이아웃을 일반 프레임 안에 넣어야 한다.

    Note: 프레젠테이션 보기는 기본적으로 긴 프레임의 스크롤을 지원합니다. 콘텐츠를 자르려는 경우에만 이 해결 방법을 사용해야 합니다.

    Components와 함께 auto layout 사용

    구성 요소는 프레임이므로 자동 레이아웃을 추가할 수 있다. 자동 레이아웃을 각 구성 요소에 개별적으로 추가해야 한다. 현재 자동 레이아웃을 대량으로 추가할 수 있는 방법이 없다.

    주요 컨퍼넌트(Main components)

    ✅ 수직 및 수평 패딩(Padding) 조정
    ✅ 개체 사이의 간격(Spacing between) 조정
    ✅ 구성 요소 내에서 개체 재정렬
    ✅ 새 개체 추가

    컨퍼넌트 인스턴스(Component instances)

    ✅ 수직 및 수평 패딩(Padding) 조정
    ✅ 개체 사이의 간격(Spacing between) 조정
    🚫 구성 요소 내에서 개체 재정렬
    🚫 새 개체 추가

    인스턴스에 아이콘을 추가하고 싶을 경우 기본 구성 요소에 불투명도가 0%인 자리 표시자 아이콘을 추가하는 것이 좋다. 그런 다음 라이브러리에 있는 다른 구성 요소의 아이콘을 교체할 수 있다.

    Auto layout 업데이트

    Note: 다음 업데이트는 2020년 11월에 릴리스 되었다.

    이전 auto layout 프레임의 정렬 업데이트

    이전 버전의 자동 레이아웃에서는 정렬이 자식 개체 수준에서 제어되었다. 이것은 자동 레이아웃 프레임에서 다른 자식 개체에 대해 다른 정렬을 가질 수 있음을 의미했다.

    우리는 사용자들 사이에서 일반적이지 않은 동작을 발견하여 2020년 11월에 자동 레이아웃 작동 방식을 단순화하기 위해 정렬 컨트롤을 상위 프레임으로 옮겼으며, 최신 업데이트에서는 모든 자식 개체를 같은 방식으로 정렬해야 한다.

    2020년 11월 이전에 생성된 다른 정렬의 자식이 있는 자동 레이아웃 프레임이 이미 있는 경우 다음이 표시될 수 있다.

    Update_Auto_layout_notice.png

    자동 레이아웃 값을 조정하려면 먼저 개별 자식 정렬을 제거하기 위해 프레임을 업데이트해야 한다. 프레임을 업데이트한 후:

    Auto_layout_Alignment.png
    • Figma는 원래 디자인을 시각적으로 유지하기 위해 노력할 것이다. 많은 경우 Figma는 다양한 정렬을 허용하기 위해 중간 프레임을 추가한다. 이러한 프레임의 이름은 자동 추가(Auto-added) 프레임이다.
    • 이 변경 사항을 즉시 취소할 수 있지만 창을 클릭하거나 페이지를 새로 고치면 나중에 업데이트를 취소할 수 없다.
    • 기본 구성 요소를 업데이트한 경우 해당 인스턴스가 올바르게 업데이트되었는지 확인한다.

    정렬이 다른 하위 항목으로 디자인을 생성하려면:

    1. 다르게 정렬하려는 항목을 선택한다.
    2. 키보드 단축키를 사용하여 항목에 자동 레이아웃을 추가한다. [keybt]Shift[/keybt] + [keybt]A[/keybt].
    3. 새로 생성된 프레임을 정렬할 축의 채우기 컨테이너(Fill container)로 설정한다.
    4. 필요에 따라 정렬을 설정한다.
    출처: Auto Layout in Figma
  • 피그마 Frame

    피그마 Frame

    Figma에서는 Canvas에 직접 레이어를 추가할 수 있다. 특정 장치 또는 화면 크기에 맞게 디자인하는 경우 디자인에 대한 컨테이너를 만들 수 있다. 프레임이 들어오는 곳이다.

    이전에 디자인 도구를 사용해 본 적이 있다면 대지(artboard)에 익숙할 것이다. 아트보드와 마찬가지로 프레임을 사용하면 디자인을 만들 캔버스 영역을 선택할 수 있다.

    기존 아트보드와 달리 다른 프레임 내에 프레임을 중첩(nest) 할 수도 있다. 이를 통해 함께 작동하는 보다 복잡한 디자인을 만들 수 있다.

    프레임은 또한 레이아웃 그리드(Layout Grid) , 자동 레이아웃(Auto Layout) , 제약 조건(Constraints) 및 프로토타이핑(Prototyping)과 같은 추가 기능에 대한 액세스를 제공한다.

    Frame 만들기

    프레임 도구를 사용하여 캔버스에 프레임을 만든다. 프레임 도구를 선택하는 몇 가지 방법이 있다.

    • 키보드 단축키를 [keybt]F[/keybt] 또는 [keybt]A[/keybt] 사용
    • 도구 모음의 프레임(#) 도구 선택
    Figure 1-1. 프레임 도구 선택

    그런 다음 캔버스에서 다양한 프레임 크기를 만들 수 있다.

    • 캔버스를 클릭하여 100 x 100 치수의 기본 프레임을 만든다.
    • 캔버스를 클릭하고 드래그하여 사용자 정의 치수가 있는 프레임을 만든다.
    • 오른쪽 사이드바의 드롭 다운을 사용하여 프레임 사전 설정값을 선택한다.
      1. 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
        • Phone
        • Tablet
        • Desktop
        • Watch
        • Paper
        • Social Media
        • Figma Community
      2. 화살표를 클릭하여 섹션을 확장하고 목록에서 사전 설정값을 선택한다.

    레이어 패널에서 프레임(#)을 식별한다.

    Figure 1-2. 선택 도구

    Tip! 단일 레이어이든 선택한 레이어이든 상관없이 기존 개체 주위에 프레임을 만들 수도 있다. 프레임 선택 키보드 단축키 사용:

    맥 : [keybt]⌥ Option[/keybt] + [keybt]⌘ Command[/keybt] + [keybt]G[/keybt]
    윈도우 : [keybt]Ctrl[/keybt] + [keybt]Alt[/keybt] + [keybt]G[/keybt]

    Frame 속성

    프레임은 다음 속성을 지원한다.

    • Corner Radius : 부드러운 가장자리를 만들기 위해 프레임의 모서리를 둥글게 만든다.
    • Clip Content : 프레임 경계를 넘어 확장되는 프레임 내의 모든 개체를 숨긴다.
    • Layout Grids : 디자인의 시각적 구조에 도움이 되는 지침(guidelines)을 만든다.
    • Auto Layout :  내용에 반응하는 동적 프레임(Dynamic Frames) 만든다.
    • Fill : 단색 채우기, 그라디언트, 이미지 (PNG, JPEG, GIF, TIFF 및 WEBP)를 프레임에 적용한다.  
    • Stroke : 테두리 또는 윤곽선을 만들기 위해 프레임에 strokes(획)을 추가한다.
    • Effects : 프레임에 shadow 또는 blurs 효과 추가

    추가 기능

    프레임을 사용하면 Figma의 추가 기능에 액세스할 수 있다. 다음 기능을 사용하려면 프레임을 사용해야 한다.

    • Layout Grids : 시각적 구조를 제공하기 위해 프레임에 투명한 그리드(transparent grids), 열(columns) 또는 행(rows)을 적용한다.
    • Constraints(제약 조건) : 프레임 크기를 조정할 때 자식 개체가 어떻게 반응하는지 정의한다. 프레임 내의 개체에 제약 조건(Constraints)을 적용한다.  
    • Auto Layout : 프레임에 자동 레이아웃을 추가하여 내용에 반응하는 동적 레이아웃을 생성한다.
    • Prototyping : Canvas의 프레임 사이를 이동하는 대화형 프로토타입을 만든다.

    Frame은 부모(parent) 개체이다. 이것은 당신이 그 안에 배치하는 모든 자식(child) 개체를 제어하거나 영향을 줄 수 있음을 의미한다.

    Figma의 부모/자식 관계에 대해 자세히 알아보기 →

    프레임 속성 조정

    과거에는 프레임을 선택했을 때 자식 개체의 속성을 조정할 수 있었다. 이제 프레임 자체의 속성을 조정할 수 있다.

    • 키보드 단축키 [keybt]Enter[/keybt] 또는 [keybt]Return[/keybt]를 사용하여 하위 개체를 선택한다.
    • [keybt]Tab[/keybt] 키를 눌러 다음 형제를 선택할 수 있다.
    • [keybt]Shift[/keybt] + [keybt]Tab[/keybt] 키를 눌러 이전 형제를 선택한다.
    • [keybt]Shift[/keybt] + [keybt]Enter[/keybt] 키로 상위 부모를 선택한다.

    다른 Frame 내에 Frame 중첩

    Figma에서는 다른 프레임 내에 프레임을 생성할 수 있다. 우리는 이 과정을 중첩(process nesting)이라고 부른다. 이를 통해 다양한 속성을 가진 프레임을 결합하여 복잡한 인터페이스를 구축할 수 있다.

    그러면 새로운 계층(hierarchies) 또는 관계(relationships)가 생성된다.

    • 최상위 프레임(Top-level frames) : 캔버스에 직접 있는 모든 프레임은 최상위 프레임이 되도록 다른 Frame, Group 또는 Object 내에 중첩할 수 없다.
    • 중첩 프레임(Nested frame) : 다른 프레임 내에 배치되는 모든 프레임은 최상위 프레임 또는 다른 중첩 프레임 내에 프레임을 배치할 수 있다. 중첩 프레임은 부모와 자식 모두이다.
    • 자식(Children) : 프레임 내에 있는 모든 개체.

    부모(parent), 자녀(child) 및 형제자매(sibling) 관계에 대해 자세히 알 수 있다.

    최상위 프레임(Top-level frames)

    Figma는 레이어 패널에서 최상위 프레임을 굵게 표시하고 캔버스에 모든 최상위 프레임의 이름을 표시한다.  

    Figure 1-3. 최상위 프레임 표시

    중첩 프레임(Nested frames)

    중첩 프레임은 다른 프레임이나 개체 내에 배치하는 프레임이다. 이것은 그들을 부모와 자녀로 만든다. 다음 위치에 프레임을 배치할 수 있다.

    • 최상위 프레임 / Top-level frames
    • 기타 중첩 프레임 / Other nested frames
    • 그룹으로 / In groups

    아래 예에서 각 요소는 자체 프레임으로 만들었다. 상단에는 상태 표시줄(status bar)이 있고 하단에는 탐색 메뉴(navigation menu)가 있다. 또한 예정된 티켓(Upcoming Tickets)에 대한 세부 정보가 포함된 카드도 있다.

    장치(device) 사전 설정 중 하나를 사용하여 요소에 대한 최상위 프레임을 만들 수 있다. 모바일 앱에서 단일 화면을 만들기 위해 최상위 프레임에 요소를 추가할 수 있다.

    Figure 1-4. 최상위 프레임 내에 다른 요소를 포함

    Frame 크기 조정

    프레임의 크기 또는 배율 변경을 포함하여 캔버스의 다른 개체와 마찬가지로 프레임과 상호 작용할 수 있다. 프레임의 크기를 변경하는 몇 가지 방법이 있다.

    프레임 드래그

    드래그하여 수동으로 프레임 크기를 조정한다.

    1. 캔버스에서 프레임을 선택하거나 왼쪽 사이드바에서 레이어 패널을 선택한다.
    2. 모서리 중 하나의 핸들을 클릭하고 드래그하여 크기를 조정한다. 또는 가장자리 중 하나를 클릭하고 리사이징한다.

    Tip! 하위 개체에 대한 모든 제약 조건(Constraints)을 무시하려면 수정자 키를 누르고 있는다.

    맥: [keybt]⌘ Command[/keybt]
    윈도우: [keybt]Ctrl[/keybt]

    프레임 사전 설정 변경

    프레임 크기를 변경하려면 다른 프레임 사전 설정을 선택해 보자. 

    1. 프레임을 선택한다.
    2. 오른쪽 사이드바의 속성 패널에서 프레임 필드를 선택한다.
    3. 목록에서 사전 설정을 선택한다. 
    4. 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
      • Phone
      • Tablet
      • Desktop
      • Watch
      • Paper
      • Social Media
      • Figma Community
    5. Figma는 사전 설정과 일치하도록 프레임의 치수를 업데이트한다.

    Note: 하위 개체에 제약 조건(Constraints)을 적용한 경우 Figma는 새 프레임 사전 설정과 일치하도록 크기를 조정한다. 그렇지 않으면 프레임 내부의 개체가 원래 치수와 위치를 유지한다.

    속성 패널

    오른쪽 사이드바의 속성 패널을 사용하여 프레임의 너비 와 높이를 업데이트한다.

    W  및  H 필드 에 새 숫자를 입력  하거나 아이콘 위로 마우스를 가져가서 필드를 스크러빙한다. 감소하려면 왼쪽으로, 증가하려면 오른쪽으로 끓는다.

    Width 및 Height 옆에 있는 링크 버튼을 토글 하여 현재 비율로 크기 조정을 제한한다.  

    Figure 1-5. 프레임 사이즈 사용자화

    Tip! 가로/세로 사이즈 필드를 사용하여 계산을 수행할 수 있다. 이를 통해 개체의 크기를 빠르게 조정하거나 크기를 조정할 수 있다.

    • % 비율(예: 50%)
    • + 추가 예: +100
    • – 빼기(예: -20)
    • * 곱하기(예: *4)
    • / 나누기(예: /8)

    너비나 높이에 백분율을 곱하는 것은 불가능하다. *50%는 50%가 아닌 원래 값의 50배가 된다.

    딱 맞게 크기 조정

    프레임의 크기를 조정하여 자식 개체에 맞게 축소하거나 확대할 수 있다. 이렇게 하면 프레임 안에 있는 개체의 가장 바깥쪽 경계 주위에 프레임이 다시 그려진다.

    • 키보드 단축키 사용:
      • 맥: [keybt]⌥ Option[/keybt] + [keybt]Shift[/keybt] + [keybt]⌘ Command[/keybt] + [keybt]R[/keybt]
      • 윈도우:
    • 속성 패널의 오른쪽 상단 모서리에 있는 파란색 점선 안의 아이콘을 클릭한다.
    Figure 1-6. 프레임 크기를 개체에 딱 맞게 최적화
    출처 : Frames in Figma