Tag: 피그마

  • 피그마 그래픽 기법 시리즈 – #1

    피그마 그래픽 기법 시리즈 – #1

    그래픽 디자인은 시각적으로 매력적이고 효과적인 커뮤니케이션을 위한 중요한 방법입니다. 최근에는 디자이너들 사이에서 피그마가 매우 인기 있는 도구로 떠오르고 있습니다. 피그마는 협업 기능과 사용 편의성을 갖춘 웹 기반 디자인 툴로, 다양한 기능을 활용하여 그래픽 디자인을 할 수 있습니다. 이 글에서는 피그마를 사용한 효과적인 그래픽 디자인 방법에 대해 알아보겠습니다.

    그래픽 디자인은 특정 청중에게 메시지와 아이디어를 전달하기 위해 시각적 콘텐츠를 만드는 작업입니다.

    비즈니스와 조직이 대상 청중과 연결하고 메시지를 효과적으로 전달하는 데 도움이 되므로 브랜딩, 마케팅 및 커뮤니케이션에서 중요한 역할을 합니다.

    UI/UX 디자이너로서 제 전반적인 기술을 넓히고 향상시키는 데 도움이 될 것이기 때문에 한동안 손을 대고 싶었습니다.

    그리고 저는 Figma 우월주의자(다른 소프트웨어를 배우지 않음)이므로 포스터 몇 개를 만들고 물을 테스트하는 데 사용할 것입니다.

    피그마를 사용하는 이유

    Photoshop은 사용하기 어렵기 때문입니다.
    제가 지금 하는 일의 유형에 비해 과잉이고 그것을 사용하는 것이 이치에 맞지 않는다고 말했습니다.
    하지만 저는 그것을 배우고 현재 스택에 한 번에 하나의 튜토리얼로 추가하고 있습니다.
    그래서 나는 무엇을 다시 사용할 것인가? Figma는 내가 기술적으로 마스터한 유일한 디자인 소프트웨어이기 때문입니다.많은 앱이 있지만 Figma만큼 쉽게 디자인할 수 있는 앱은 없습니다.
    실제로 들여다보면 일러스트레이터의 톤다운 버전과 비슷합니다.

    Figma와 Illustrator는 모두 유사한 기능을 많이 제공하며, 이제 둘 다 같은 회사에 속해 있으므로 곧 그들 사이에서 파일을 가져올 수 있다는 것을 알고 있습니다.

    피그마에서 일러스트레이션을 어떻게 사용합니까?

    figma에서 일러스트레이션을 사용할 때 알아야 할 몇 가지 사항이 있습니다. 미디어 파일 유형에 따라 일러스트레이션을 실제로 변경할 수 있는지 여부입니다.

    JPG 또는 PNG 일러스트레이션을 업로드하면 일러스트레이션의 색상이나 모양을 변경할 수 없습니다. 다른 쪽에 있는 SVG는 확장 가능한 벡터이므로 원하는 대로 크기를 조정하고 색상을 변경하고 편집할 수 있습니다.

    피그마에서 일러스트레이션을 어떻게 사용합니까?

    Google에서 오픈 소스 또는 로열티 프리 SVG 일러스트레이션을 검색하거나 모든 작업을 수행하는 Figma에서 직접 커뮤니티에서 만든 플러그인을 사용할 수 있습니다.

    제가 개인적으로 사용한 첫 번째 플러그인은 freepik에서 제작했으며 선택할 수 있는 많은 일러스트레이션 팩과 스타일이 있습니다.

    이미지를 클릭하고 어떻게 작동하는지 확인해보세요. 일러스트레이션을 거의 검색하고 색상을 선택한 다음 가져오기 버튼을 클릭하기만 하면 됩니다.

    나중에 색상이 만족스럽지 않거나 변경하고 싶은 경우 그림을 클릭하면 오른쪽 패널에 색상 옵션이 표시됩니다. 벡터 포인트를 이동하고 레이어를 수정하려면 그림이 그룹 해제될 때까지 여러 번 클릭하면 됩니다. 또는 그림을 마우스 오른쪽 버튼으로 클릭하고 그룹을 해제할 수도 있습니다. 변경한 다음 그룹을 다시 그룹화합니다.

    플러그인이 마음에 들지 않으면 웹사이트 스토리셋에서 직접 검색할 수 있습니다. 동일한 색상 변경 옵션이 있는 동일한 라이브러리입니다. SVG로 다운로드하여 Figma에 드롭하기만 하면 됩니다.

    플러그인 Illustrations

    당신이 찾고 있는 것이 있다면 그들은 더 많은 스타일과 3번째 삽화를 가지고 있습니다.

    저작권이 있는 한 디자인을 판매하거나 프로토타입에 사용할 수 있는지 100% 확신하기 위해 각 일러스트레이션을 수동으로 확인해야 합니다. 이론적으로 적어도 그들은 모두 무료로 사용할 수 있다고 말하지만 당신은 결코 모릅니다.

    인간 삽화를 찾고 있다면 Humaaans를 확인

    개인적으로 사용한 적은 없지만 일러스트가 꽤 멋져 보입니다.

    보너스 일러스트레이션 라이브러리: 그리기 취소. 저는 몇 년 동안 그것들을 사용해 왔으며 선택할 수 있는 삽화가 많이 있습니다. 완전히 무료로 사용할 수 있습니다.

    요약하자면, Figma에서 사용할 일러스트레이션 팩을 찾고 있다면 undraw, humaaans 또는 undraw와 같은 사이트와 같은 플러그인을 사용할 수 있습니다 . 파일을 SVG로 내보냈는지 확인하십시오. 그렇지 않으면 색상이나 다른 유형의 변경을 할 수 없습니다.

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

    피그마의 12가지 효과적인 팁

    이 글에서는 Figma로 디자인 워크플로를 향상하는 데 도움이 되는 작지만 소중한 트릭과 팁을 공유합니다.

    Option 키로 마우스 오른쪽 버튼을 클릭하면 특정 레이어 선택 가능

    여러 레이어가 있는 프레임에서 작업하고 다른 레이어 뒤에 있는 레이어를 선택하는 것이 때때로 불편할 수 있다. 선택하려는 레이어가 잠겨 있으면 더욱 어려울 수 있다.
    이를 극복하기 위해 선택하려는 레이어에서 Option 키(Windows의 경우 Alt)로 마우스 오른쪽 버튼을 클릭하면 원하는 요소를 선택할 수 있는 메뉴가 열린다.

    의견을 위한 영역 표시

    키보드의 C 키를 누르면 주석을 추가할 수 있다. 그러나 CMD를 누른 상태에서 마우스 왼쪽 버튼을 클릭한 후 마우스를 움직이면 댓글 영역을 만들 수 있어 표시한 영역을 상대방이 볼 수 있다.
    예를 들어 이 팁을 사용하여 디자인 전달 프로세스 중에 둘 이상의 디자인 요소에 대해 개발자에게 의견을 남길 수 있다.

    파일 브라우저를 열려면 헤더의 원을 클릭

    헤더 중앙에 사용자 아이콘이 있는 원을 클릭하면 파일 브라우저와 함께 새 탭이 열리므로 새 Figma 디자인 파일을 열거나 Figma 파일 브라우저에서 다른 작업을 수행할 수 있다.

    계정 전환

    개인 Figma 계정과 직장 Figma 계정 간에 전환할 수 있도록 한 번에 둘 이상의 Figma 계정(예: Gmail)에 로그인할 수 있다.
    아바타 > 계정 전환 > 새 계정 추가를 클릭하여 계정을 추가한 후 계정 전환 메뉴에서 변경할 수 있다.

    자막(closed captions)

    이 뛰어난 기능은 베타 버전의 Figma 데스크톱 앱에서만 사용할 수 있다. 이 기능을 사용하면 Figma에서 사람들과 대화할 수 있으며 캡션이 추가되어 더 잘 이해할 수 있다.
    상대방이 시끄러운 곳에서 말을 하거나 억양이 심한 사람과 대화를 할 때 도움이 될 수 있다.
    베타 켜는 방법: Figma 데스크톱 앱 > 설정 > 새 기능 열기 > 베타를 켜서 사용해보자.

    특정 버전 기록 저장

    우리 작업은 Figma에 의해 자동 저장되지만 특정 버전을 저장하고 싶다면 저장하고 이름을 지정할 수 있다. 무언가를 테스트하고 이전에 저장된 버전으로 돌아가고 싶을 때 유용하다.
    방법: 메뉴 > 파일 > 버전 기록에 저장.

    Figma 파일 다운로드

    Figma는 클라우드에서 잘 작동하지만 추가 보안을 원할 경우 컴퓨터에 파일을 다운로드할 수 있다.
    방법: 메뉴 > 파일 > 로컬 사본 저장

    배율(Scale) 도구

    개체의 크기를 조정해야 한다면 상단 표시줄에서 크기 조정 도구(단축키 k)를 클릭하고 개체 크기를 조정한다. 오른쪽 메뉴의 입력을 사용하면 원하는 만큼 정확하게 입력할 수 있다.

    파일을 즐겨찾기로 추가

    새 파일을 작업하고 즐겨찾기로 추가하고 싶다면, 머리글에서 펼침 아이콘을 클릭하고 “이 파일을 즐겨찾기에 추가”를 선택한다.
    이렇게 하면 파일 브라우저의 파일 목록 상단에서 직접 파일을 선택할 수 있다. 예를 들어 디자인 시스템에서 작업하는 경우 UI 키트를 즐겨찾기로 표시하면 도움이 될 수 있다.

    색상 입력란에 색상 이름(color name)을 적는다.

    Figma에 빠른 메모를 추가하고 색상 팔레트 메뉴를 열지 않으려면 입력에 색상 이름을 직접 입력할 수 있다.

    픽셀(Pixel) 미리보기

    픽셀 보기를 켜고 끄고 두 배 크기로 작업할 수 있다. 오른쪽 상단 헤더의 백분율을 클릭한 다음 픽셀 미리보기를 클릭하면 된다.

    출시 노트(release notes) 읽기

    릴리스 노트를 읽는 것이 이상하게 보일 수 있지만 Figma의 새로운 기능을 배울 수 있는 좋은 방법이다. 이러한 방식으로 앱에 새 기능이 추가될 때마다 항상 최신 상태를 유지한다.

    메뉴> 도움말 및 계정> 릴리스 정보를 클릭한다.

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

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

    디자인 파일에 이미지를 추가하여 사진, 스크린샷 또는 기타 시각적 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!
    이미지를 로드하는 데 문제가 있습니까? 일반적인 이미지 로드 문제 해결 →

  • 피그마 플러그인 소개

    피그마 플러그인 소개

    새로 공개되는 수많은 Figma 플러그인을 사용해 보면서 자주 사용하거나 효과적인 몇 가지 필수 플러그인을 공유해 본다. 아래에 소개된 플러그인 이외에도 매우 훌륭한 플러그인이 계속해서 공개되고, 업데이트되고 있으며 디자인 작업에 필요한 플러그인을 찾아 더 욱 멋진 디자인으로 나아가기를 바란다.

    Content Reel

    가장 필수적인 Figma 플러그인 중 하나는 “Content Reel”이다. 사용자 이름, 날짜, 주소, 통화, 아바타, 아이콘, 이미지 등과 같은 임의의 콘텐츠를 생성할 수 있고 Lorem Ipsum보다 훨씬 더 유용하고 효과적이기 때문이다.
    실제 콘텐츠를 사용하면 디자인이 더욱 사실적이고 자연스럽게 느껴진다.

    Content Reel 설치하기 →

    Unsplash

    모든 디자이너는 자신의 디자인을 매력적이고 매력적으로 만들고 싶어 합니다. 이미지보다 더 잘 할 수 있는 것은 없습니다. 이미지는 사용자를 가장 많이 끌어들이는 디자인의 일부이다. 따라서 디자인 내부에 고품질 이미지를 사용하는 것이 필수적이다. 그리고 이 경우 디자이너를 돕기 위해 고품질 이미지를 위한 무료 플러그인 “Unsplash”가 있다.
    Unsplash는 다양한 카테고리의 100 만개 이상의 무료 스톡 사진을 제공한다. 이미지를 검색하거나 Figma 내부에 무작위로 이미지를 넣을 수 있다.

    Unsplash 설치하기 →

    Storieset by Freepik

    Storyset은 무료 그래픽 리소스 시장의 주요 참고 자료 중 하나인 Freepik의 최신 작품이다. 편집 가능한 색상과 배경이 포함된 수천 개의 일러스트레이션 개념을 다운로드할 수 있다. 모두 다른 스타일로 제공되며 온라인 편집기로 애니메이션을 적용할 수도 있다.

    Storyset by Freepik 설치하기 →

    Iconify

    Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji 및 기타 많은 아이콘(100,000개 이상의 아이콘을 포함하는 100개 이상의 아이콘 세트)을 벡터 모양으로 Figma 문서로 가져온다.

    Iconify 설치하기 →

    Mapsicle

    다시는 지도의 스크린샷을 찍지 마세요! Mapsicle을 사용하면 모형에 지도를 빠르고 원활하게 배치할 수 있다. 대화형 지도를 사용하면 완벽한 위치로 이동하거나 전 세계 어디에서나 장소를 검색할 수 있다. 디자인에 지도를 배치했으면 Mapsicle로 돌아가 위치, 스타일, 확대/축소 수준 등을 조정할 수 있으며, Mapsicle은 Mapbox 맵을 사용하여 다양한 사용자 정의 옵션을 제공한다.

    Mapsicle 설치하기 →

    Charts

    Charts를 사용하면 Figma 문서 내에서 추가 및 편집할 수 있는 차트를 생성할 수 있다. 선, 영역, 파이, 도넛, 분산형 및 막대형 차트에서 선택한다. 각 차트는 포인트 수, 최대값 및 최소값과 같은 고유한 구성 세트와 함께 제공된다.

    프레임을 선택하면 차트가 프레임 내에 배치되고 그렇지 않으면 0x0 좌표에 배치되고 뷰포트가 해당 위치로 이동한다.

    Charts 설치하기 →

    Vectary 3D

    Vectary 3D 플러그인은 누락된 3차원을 2D 디자인에 추가한다. Figma 디자인을 미리 정의된 3D 모형 또는 사용자 지정 3D 요소에 배치한다. 원하는 시점을 3D로 설정하고 클릭 한 번으로 결과를 장면에 배치한다.

    Vectary 3D 설치하기 →

    Wireframe

    모두를 위한 무료 인기 Wireframe 라이브러리인 Wireframe 플러그인은 아름다운 Wireframe, user flow, prototypes 및 기본 구조를 만들기 위한 최고의 Figma 플러그인이므로 다른 키트, 파일 또는 기술이 필요하지 않는다! 끌어서 놓기만 하면 Figma에 추가할 수 있다. 모든 Wireframe은 Creative Commons License에 따라 자유롭게 사용할 수 있다.

    Wireframe 설치하기 →

    Font Preview

    이 플러그인은 플러그인 창에서 바로 입력하는 모든 항목에 대한 실시간 미리보기를 생성한다!
    마음에 드는 다양한 글꼴을 시도할 수 있으며, 글꼴의 종류, 색상, 크기를 변경하고 응용 프로그램에서 잘 보이는지 확인한다.

    Font Preview 설치하기 →

    Spelll

    이 플러그인은 Figma & FigJam에 Google 문서도구와 유사한 맞춤법 검사 기능을 제공한다. Figma 또는 FigJam 문서에서 철자 오류가 있는지 지속적으로 확인하고 클릭 한 번으로 수정할 수 있다. 아쉬운 점은 회원가입으로 키값이 필요하다.

    Spelll 설치하기 →

    Remove BG

    remove.bg API를 사용하여 클릭 한 번으로 이미지의 배경을 자동으로 제거한다. 참고적으로 이 플러그인에는 remove.bg 계정이 필요하다.

    Remove BG 설치하기 →

    HTML Generator

    디자인을 웹으로 내보내려면 두 가지 선택 사항이 있다. 첫 번째는 웹 사이트에서 직접 코딩하는 것이며, 완료하는 데 며칠이 걸릴 수 있다. 다른 선택은 “HTML 생성기”를 사용하는 것이다.
    HTML Generator는 디자인을 HTML, CSS 등과 같은 코드로 내보낼 수 있게 해주는 훌륭한 플러그인이며 많은 시간과 노력을 절약할 수 있다.

    HTML Generator 설치하기 →

    Rename It

    많은 경우 디자이너가 디자인 작업에 너무 깊이 빠져서 레이어 이름을 바꾸는 것을 잊어버린다. 작업을 마치면 디자인 레이어가 너무 지저분해 보이게 되는데 지저분한 레이어의 이름을 바꾸려면 “Rename It”레이어 이름을 바꾸는데 도움이 되는 플러그인이다.
    Rename It 플러그인을 사용하면 일련의 알파벳, 일련의 숫자, 프레임 이름 사용, 숫자로 텍스트 추가 등과 같은 다양한 미리 만들어진 옵션으로 레이어 이름을 변경할 수 있다. 전반적으로 레이어 이름을 바꾸는 옵션은 매우 다양하다.

    Rename It 설치하기 →

    WebGradients

    웹사이트의 어느 부분에서나 콘텐츠 배경으로 사용할 수 있는 사용하기 쉽고 강력한 기능적 그라디언트 플러그인을 한 번에 만날 수 있다.

    Webgradients는 IBM, Disney, InVision, Microsoft, Apple 및 기타 많은 대기업의 신뢰를 얻었으며 정기적으로 작업에 사용된다. 180개의 멋진 색상 중에서 원하는 그라디언트를 선택할 수 있으며, 좋아하는 그라디언트를 저장하고 필터로 특정 색상을 찾을 수 있다.

    Webgradients는 부드럽고 편리하며 영감을 주는 방식으로 소중한 시간을 절약할 수 있다.

    WebGradients 설치하기 →

    Roto

    Roto는 3D로 모양을 돌출시키고 회전시킨다.

    Roto를 사용하여 모양을 선택하려면 Roto를 실행하고 미리보기를 끌어 개체를 회전하고 Roto의 속성을 사용하여 재생한다. 획이 있는 모양은 와이어프레임을 만들고, 단색 음영 개체의 경우 모양에 단색 채우기 색상을 지정한다. 추가 채우기 색상을 추가하면 개체의 전면 색상을 사용자 지정할 수 있다.

    Roto 설치하기 →

    Image Palette

    선택한 이미지에서 5가지 색상의 색상 팔레트를 추출할 수 있다.

    이것은 이미지에서 가장 두드러진 다양한 색상을 대략적으로 추정하는 중앙값 절단 알고리즘을 사용한다. 알고리즘은 빠르지만 때때로 저색상 이미지, 벡터 그래픽 이미지 등과 같은 비정상적인 결과를 초래할 수 있다. 추출된 색상은 이미지의 16진수 코드와 정확히 일치하지 않을 수 있다.

    Image Palette 설치하기 →

    Viewports

    여러분의 디자인이 시장에서 합리적인 점유율을 차지하고 있는지 확인 해보자. 하나 이상의 프레임을 선택하면 뷰포트에서 원하는 디스플레이로 크기를 변경할 수 있다.

    Viewports 설치하기 →