애플의 피그마 디자인 킷: 디자이너에게 주는 선물

애플이 피그마 커뮤니티에 iOS 17, iPadOS 17의 리소스를 공개했습니다. 스케치를 위한 패키지 파일을 제공했던 것처럼 피그마에 애플의 플랫폼 디자인을 공유했습니다. 피그마가 디지털 프로덕트 설계의 기본 프로그램이라는 것을 공인 받은 느낌입니다.

Apple Design Resources ui template
Apple Design Resources ©Apple

👁️ 디자이너의 눈

프로덕트 설계를 하다보면 꼭 필요한 애플 리소스가 많습니다. 스크린샷을 찍거나 커뮤니티를 돌아다니면서 찾아야 했는데 이제 최신 파일이 한 곳에 모입니다.

텍스트와 색과 같은 기본적인 요소부터 시스템 인터페이스와 복잡한 컴포넌트가 포함됐습니다.얼럿, 시트, Face ID처럼 내가 설계한 앱이 시스템 요소를 사용할 때를 표현해야할 때 쓸 수 있는 여러 템플릿이 있습니다.특히 알림 템플릿, 키보드가 찾기가 항상 힘들었는데 손쉽게 사용할 수 있습니다. 홈 스크린 배경이나 기기 베젤같은 요소도 깨알같이 쓸모 있습니다.

Apple Design Resources Keyboard ©Apple
Apple Design Resources ©Apple
Apple Design Resources Navigation ©Apple
Apple Design Resources ©Apple
Apple Design Resources Notification ©Apple
Apple Design Resources ©Apple

SF Symbols와 SF Pro가 있어야 정상적으로 표시됩니다. 앞으로 iOS와 iPadOS에서 쓰이는 애플 페이, 앱 클립, 숏컷과 같은 구성 요소를 추가할 예정이라고 합니다. 더 나아가서는 Sonoma, watchOS 10, tvOS 뿐만 아니라 visionOS도 추가할 예정이라고 합니다.

Apple Design Kit Button Library
Apple Design Resources ©Apple
Apple Design Kit Typography
Apple Design Resources ©Apple
Screen Template
Apple Design Resources ©Apple

📕 에디터 노트

‘OS 시스템을 사용한다’ 라고 쓰는 것이 항상 불편했는데 이제 사용자가 실제로 겪는 경험을 피그마에 기록하기 쉬워졌습니다. 시스템을 설계할 때 최대한 사용자가 하는 경험 그대로 기록하고 설계하는 것이 중요한데 반가운 소식입니다.

세계의 디지털 프로덕트 디자인 문법을 주도하는 회사의 실제 작업 파일이라는 것도 의미가 큽니다. 가상의 디자인이 표시되는 기기까지 제어하는 회사의 파일인만큼 배울 점이 많습니다. 애플이 정한 템플릿을 사용하는 것 뿐만 아니라 색과 서체를 구분하는 방식과 기준 등을 엿볼 수 있어 좋습니다. 가이드라인에 맞는 생태계를 위해 상세한 법전을 제공하는 것 외에 바로 가져다 쓸 수 있는 틀을 제공하는 것도 좋은 전략 같네요.

더 보기 및 출처

비슷한 글

최근 글

schema by Figma: 피그마가 여는 디자인 시스템 컨퍼런스

다가오는 11월 16일 피그마 디자인 시스템 컨퍼런스 Schema가 열립니다. Schema는 디자인 시스템 밋업으로 지난 10월~11월에 뉴욕, 도쿄, 런던에서 라이브 세션이 열렸습니다. 곧 다가오는 11월 16일에는 온라인으로 누구나 참여할 수 있는 컨퍼런스가 열립니다. 피그마, 드롭박스, 우버, 아틀라시안 등 다양한 회사의 디자이너들의 세션을 들을 수 있습니다.

피그마와 디자인 시스템에 대해 서로 묻고 답할 수 있습니다. 라이브 세션은 자막과 ASL을 제공하기 때문에 채팅과 접근성 기능을 이용해 발표를 들을 수 있습니다. 세션은 유튜브 채널에 녹화 및 생중계된다고 합니다.

  • 날짜:  2022년 11월 16일
  • 시간:  11:00 – 2:30 오후 EST

더 보기 및 출처

비슷한 글

존슨 앤 존슨 리브랜딩: 사라진 135년의 유산

존슨 앤 존슨 리브랜딩: 사라진 135년의 유산

세계 최대 헬스케어 회사 중 하나인 존슨 앤 존슨이 리브랜딩 했습니다. 1887년부터…

iOS 17 이모지: 디자인 시스템이 되어가는 이모지

iOS 17 이모지: 디자인 시스템이 되어가는 이모지

2023년 세계 이모티콘의 날을 앞두고 이모지피디아는 9월 유니코드 승인을 위한 후보를 준비했습니다.…

iOS 17 정식 업데이트: 쓰지 않을 때도 쓰는 아이폰

iOS 17 정식 업데이트: 쓰지 않을 때도 쓰는 아이폰

지난 18일 iOS 17가 정식으로 업데이트됐습니다. 아이패드 OS 17, 워치OS 10도 함께…

이모지 키친: 이거랑 저거 합치면 귀여움도 2배

이모지 키친: 이거랑 저거 합치면 귀여움도 2배

구글 검색에서 이모지를 합쳐 새로운 이모지를 만들 수 있습니다. 이모지 키친은 Gbaord를…

BBC EARTH: 보이는 그대로의 자연이 주인공이다

BBC EARTH: 보이는 그대로의 자연이 주인공이다

BBC Earth가 리브랜딩합니다. BBC Earth는 Planet Earth, The Green Planet 등 전…

구글 폰트 리뉴얼: 웹 폰트의 모든 것을 담았다.

구글 폰트 리뉴얼: 웹 폰트의 모든 것을 담았다.

구글 폰트가 업데이트 됐습니다. 구글 폰트는 라이센스에서 자유로운 952개 글꼴을 제공하는 라이브러리입니다.…

방콕, 반짝이는 보석을 두른 신들의 땅

방콕, 반짝이는 보석을 두른 신들의 땅

이번 여름은 부담 없이 즐길 수 있는 여행지를 경험해보고 싶었습니다. 여러 후보지를…

서울 지하철 노선도 리뉴얼: 크게 개선된 UX

서울 지하철 노선도 리뉴얼: 크게 개선된 UX

서울 지하철 노선도가 40년만에 바뀌었습니다. 처음 노선도가 만들어진 1980년대엔 4개 노선 106개…

Wonderlust: 티타늄으로 만든 USB-C 아이폰 등장!

Wonderlust: 티타늄으로 만든 USB-C 아이폰 등장!

캘리포니아 쿠퍼티노의 애플 파크에서 애플 9월 이벤트가 열렸습니다. 유럽 연합 법률을 준수하기…

더 보기

위대한 것은 혼자 만들 수 없다 : 피그마 브랜드 캠페인

피그마가 200억 달러에 어도비에 인수된 후 콜린스와 함께 ‘Nothing Great is made alone’ 브랜드 캠페인을 만들었습니다. 협업으로 성장한 회사에 걸맞는 메시지로 도전적인 디자인 정신과 연결됩니다. 최초의 웹 기반 디자인 툴로 시작해 사람들이 협업하는 방식을 제안했습니다.

고독한 천재의 상징인 모나리자를 해체하는 방식으로 팀워크의 장점을 강조합니다. 위대한 것은 혼자 만들 수 없다는 점과 비디자이너가 어떻게 훌륭한 디자인 아이디어에 기여할 수 있는지 밝히며 최고의 아이디어는 팀워크의 창의적 힘에서 나온다 했습니다.

Figma는 다양한 팀이 초기 아이디어에서 완제품에 이르기까지 협업해야 할 때 디자이너만 사용하기 때문에 회사가 많은 창의성을 테이블에 남겨두고 있다는 것을 깨달았습니다. 분명히 디자인 커뮤니티는 Figma를 사랑했기 때문에 개발자, 작가, 프로듀서 및 관리자가 Figma가 모두 함께 작업하고 더 나은 작업을 할 수 있도록 격려한다는 사실을 알리면서 그들을 계속 사랑할 수 있는 아이디어를 원했습니다. 그러나 이야기는 협업을 ‘기능’으로 보는 것보다 더 큽니다. ‘Nothing Great is Made Alone’은 창의성과 협업에 대한 POV입니다. 다양한 그룹의 사람들이 자유롭게 함께 창작할 때 훌륭한 아이디어가 항상 발생했으며 항상 일어날 것이라고 말합니다.

콜린스 VP & 크리에이티브 디렉터인 톰 엘리아는 이렇게 말했습니다.

피그마의 협업과 디자인이라는 키워드를 강렬하게 표현한 브랜드 캠페인입니다. 매일 아이디어가 공유되고 새로운 아이디어가 탄생하는 순간이 그래픽 결과물에도 잘 드러납니다. 모션을 이용해 그래픽 모티브에 설득력을 더한 것도 멋집니다.

더 보기 및 출처

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지 않을 때가 있습니다. 피그마로 처리할 수 있는 것이 많아질수록 파일이 크고 복잡해지는데, 이 때 어디에 내가 찾는 그래픽 요소가 있는지 찾기 어려워집니다. 파인드 인 페이지 Find in page는 이런 상황에 유용한 피그마 플러그인입니다.

기능

  • 프레임 이름 검색
  • 텍스트 검색
  • 찾은 프레임, 텍스트로 이동
  • 텍스트 바꾸기

파인드 인 페이지 Find in page를 이용해 피그마 파일에 포함된 프레임, 레이어를 검색할 수 있습니다.

플러그인을 실행하면 내가 검색하고 싶은 범위를 정합니다. 찾고싶은 키워드를 입력하고 레이어나 텍스트 중 어떤 것을 검색할 것인지 정합니다. 만약 레이어를 검색할 경우 어떤 타입만 검색할지도 선택할 수 있습니다.

검색 결과를 눌러 뷰를 이동할 수 있고 기존 키워드를 다른 키워드로 한번에 대체할 수도 있습니다.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다. TinyImage는 PNG, JPG, PDF, WebP 등 디지털 환경에서 자주 쓰이는 이미지 파일을 퀄리티 손상 없이 드라마틱하게 압축합니다.

포토샵이나 일러스트레이터로 이미지를 작업할 때는 TinyImage의 웹사이트에 직접 방문해 이미지를 압축합니다. 브라우저를 켜는 것 자체가 귀찮을 때는 피그마를 사용하면 더 빠르게 작업할 수 있습니다. 피그마 안에서 이미지를 제작하고 이미지를 내보낼 때 TinyImage 플러그인을 사용하면 압축된 이미지를 바로 내보낼 수 있습니다. 한달에 사용에 제한이 있지만 개인이 사용하기에는 충분한 양입니다. 여러 장을 압축할 경우 금액을 지불하고 시리얼 넘버를 받을 수 있습니다.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을 시작해보려 해도 쉽사리 도전하기 어려울 때가 많습니다. 생각보다 준비할 것이 많고 제작이 쉽지 않기 때문입니다. 어도비의 애프터 이펙트를 구독해야 하고 움직임을 피그마나 다른 개발 환경에서 사용하기 좋게 변환해주는 Lottie라는 플러그인도따로 배워야 합니다.

피그모션 Figmotion은 다음 단계의 어려운 모션을 배우기 전에 피그마로 간단한 모션을 만들어 볼 수 있는 플러그인입니다. 애프터 이펙트 After Effect에서 주로 많이 사용하는 기능들을 간단하게 사용할 수 있습니다. 가장 많이 쓰이는 위치, 투명도를 프레임별로 조절할 수 있고 베지어 곡선으로 움직임을 섬세하게 조절할 수도 있습니다. 무겁게 파일을 사용하지 않아도 되니 가볍게 사용하기 좋은 플러그인입니다. gif로 내보낼 수 있고 개발에서 사용하는 CSS나 JSON으로도 내보낼 수 있습니다.

더 보기 및 출처

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

Inflatable 3D Alphabet: 놀랍도록 정교하고 균형이 맞춰진 3D 알파벳

Inflatable 3D Alphabet은 3D 에셋을 주로 다루는 크리에이티브 스튜디오 Wannathis가 만든 3D 알파벳 이미지입니다. 알파벳 A부터 Z까지 하나하나가 높은 퀄리티로 매력적으로 표현됐습니다. 색이 있는 버전과 흑백 버전으로 나눠져 있으며 피그마, 블렌더로 만들었습니다.

형형색색의 3D 알파벳이 정말 매력적입니다. 거의 실제에 가까운 질감 표현도 놀랍습니다. 특정 질감이 너무 도드라지거나 빛의 방향이 어색해보일 수 있는데 알파벳을 조합했을 때 어색함이 느껴지지 않습니다. 대단한 표현력입니다. 마우스를 올렸을 때의 표현도 귀엽습니다. 웹사이트의 레이아웃의 변화를 주지 않는 방향으로 발달되다보니 요소를 얼마나 더 높은 퀄리티로 표현하는지에 집중하는 것이 트렌드가 된 것 같네요. 앞으로는 알바벳 외에 다른 요소들도 제작할 예정이라고 합니다.

3D 알파벳은 36달러, 다양한 3D 일러스트레이션과 에셋을 사용하는 것은 분기당 69달러라고 합니다.’

더 보기 및 출처

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을 켜서 패스를 따기 귀찮을 때가 있습니다. 손으로 만들기 어려운 이미지도 있고요. Image tracer는 비트맵 이미지를 벡터로 바꿔주는 간단한 피그마 플러그인입니다.

어도비 일러스트레이터에 있는 트레이싱 기술과 비슷합니다. 비트맵 이미지 품질을 조절할 수 있고 부드러움과 곡선 정도를 조절할 수 있습니다. 일러스트레이터만큼 정교하게 패스와 포인트를 정의할 순 없지만 빠르게 벡터화하기 좋은 플러그인입니다.

더 보기

플러그인 홈

비슷한 글

figma-finder-thumbnail

Find in page: 피그마에서 레이어와 텍스트 검색하기

피그마를 사용하다보면 수없이 많은 레이어나 컴포넌트 중에서 원하는 것을 찾아 이동하기 쉽지…

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage Compressor: 최강의 이미지 압축 플러그인

TinyImage는 이미지 압축 프로그램입니다. Tinypng.com이라는 유명한 이미지 압축 웹사이트로 피그마 플러그인도 지원합니다.…

프레이머-로고-섬네일

Framer: 접속되는 웹사이트 5분만에 만들 수 있는 툴

요즘 여러 회사가 웹 기반 서비스를 이용해 흥미로운 설문 조사나 미니 게임을…

Figmotion: 가볍게 모션 만져보기

Figmotion: 가볍게 모션 만져보기

살아있는 인상을 전하는 모션은 이제 디지털 프로덕트에서 필수 요소가 되었습니다. 하지만 모션을…

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch: 전세계 브랜드 에셋 받기 플러그인

BrandFetch는 각종 전세계 브랜드의 로고, 심볼을 사용할 수 있는 플러그인입니다. 내가 원하는…

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

Image Tracer: 비트맵을 벡터로 바꿔주는 피그마 플러그인

가끔 로고나 단순한 이미지의 벡터가 필요할 때가 있는데요. 피그마로 작업하다 다른 툴을…

피그마 플러그인

피그마 플러그인

유용하게 사용하고 있는 피그마 플러그인입니다. 3707

피그마 대규모 업데이트: 올인원 툴의 꿈

피그마 하나로 모든 것을 처리할 수 있을까요? 요즘 피그마의 행보를 보면 정말 가능할 수도 있겠다는 생각이 듭니다. 피그마가 대규모 업데이트를 했습니다. 위젯이 추가되었는데요, 위젯은 플러그인과 다르게 피그마 파일에서 바로 찾아 사용할 수 있습니다. 깃헙, 아사나, 지라, 노트, 투표 등 협업에 필요한 다양한 기능을 사용할 수 있습니다. 피그마 파일내에서 바로 커뮤니티에 접근할 수 있습니다.오픈 플랫폼으로 앞으로 얼마나 더 다양한 도구가 추가될지 기대되네요.

웹사이트

https://www.figma.com/blog/whats-new-in-figma-june-2022/

프로덕트 디자인을 위한 툴

디자인 툴은 디자이너의 강력한 무기 중 하나입니다. 요리를 하기 위해서는 칼을 다룰 줄 알아야 하듯이, 디자이너에게 디자인 툴은 손발처럼 사용할 수 있어야 하는 필수적인 도구입니다. 프로덕트를 설계하기 위해 필요한 툴이 어떤 것이 있는지 정리해보았습니다.

계속 읽기 “프로덕트 디자인을 위한 툴”