피그마 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
  편집된 레이어를 선택하면 이전 버전 및 현재 버전에서 할당된 값과 함께 업데이트된 속성이 표시됩니다.