figma·2017년 11월 1일·2분 읽기큐레이션 요약

피그마 페이지를 소개합니다

Figma Pages는 하나의 파일 안에서 브레인스토밍, 와이어프레임, 최종 디자인 등을 여러 페이지로 나누어 관리할 수 있게 해주는 기능이다. 디자인 단계나 플랫폼별 작업을 분리하면서도 파일을 벗어나지 않고 탐색·편집할 수 있어 정리와 협업이 쉬워진다. 다만 페이지를 버전 관리 용도로 사용해 대형 파일을 반복 복제하면 성능이 저하될 수 있으므로, 버전 관리는 별도의 Version History를 사용해야 한다. ### 디자인 단계를 분리하는 페이지 구성 - 브레인스토밍, 와이어프레이밍, 픽셀 단위의 최종 작업을 각각 다른 페이지에 배치할 수 있다. - 초기 단계의 자유로운 스케치와 최종 결과물을 분리해 파일 내 혼란을 줄인다. - 여러 작업 단계를 하나의 파일에서 관리하므로 문서를 오가며 작업할 필요가 없다. ### 플랫폼과 요소별 분류 - 모바일 앱을 제작할 때 iOS 화면과 Android 화면을 별도 페이지에 구성할 수 있다. - 복잡한 인터페이스에서는 공유 컴포넌트, 아이콘 등 특정 요소를 별도 페이지에 모아 관리할 수 있다. - 하나의 파일에서 여러 프로토타입을 제작해야 할 때 프로토타입별로 페이지를 나눌 수 있다. ### 페이지 관리 방식 - 디자인 파일의 왼쪽 패널에서 페이지를 추가·전환·삭제할 수 있다. - 페이지 메뉴는 조작이 끝나면 자동으로 접히며, 패널을 Control-click하면 열린 상태로 고정할 수 있다. - 컴포넌트를 다른 페이지로 옮기려면 마우스 오른쪽 버튼을 클릭한 뒤 **Move to Page**를 선택하면 된다. - Sketch 파일을 가져올 때는 Sketch에서 구성한 페이지와 심볼 구조가 Figma에도 동일한 방식으로 import된다. - 페이지 수에는 제한이 없다. ### 썸네일과 파일 탐색 - 브라우저에서 파일을 쉽게 훑어볼 수 있도록 대표 썸네일에 사용할 페이지를 설정할 수 있다. - 왼쪽 패널에서 원하는 페이지를 첫 번째에 배치하면 해당 페이지가 파일 썸네일에 활용된다. ### 공유 시 개인정보와 접근 범위 - 특정 페이지만 공유하더라도, 공유받은 사람은 그 페이지가 포함된 파일의 나머지 내용도 볼 수 있다. - 따라서 페이지를 보안 경계나 접근 권한 분리 수단으로 사용해서는 안 된다. - 민감한 디자인을 분리해야 한다면 별도의 Figma 파일을 만들어야 한다. ### 버전 관리와 성능 주의사항 - 페이지를 버전 관리 목적으로 추가로 만드는 것은 권장되지 않는다. - Figma에는 별도의 Version History 기능이 있으므로 이전 버전 확인과 복원에는 이를 사용해야 한다. - 큰 디자인 파일을 여러 페이지에 반복 복제하면 파일 용량과 렌더링 부담이 커져 성능이 저하될 수 있다. 실무에서는 페이지를 작업 단계, 플랫폼, 디자인 요소, 프로토타입 단위로 나누고, 접근 권한 분리와 버전 관리는 각각 별도 파일과 Version History로 처리하는 것이 적절하다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험프로토타이핑version-control+2

figma·2017년 10월 29일·4분 읽기큐레이션 요약

Inneract Project가 유

기술 인턴십의 가치는 높은 급여나 무료 식사보다 실제 제품을 만들고, 사용자 테스트를 수행하며, 숙련된 디자이너의 피드백을 받는 데서 나온다. 이 글은 Figma 사용자들이 추천한 UI/UX 인턴십 사례를 소개하며, 멘토링, 실무 프로젝트, 협업 환경, 성장 기회를 중요한 기준으로 제시한다. 특히 Shopify, Spotify처럼 인턴에게 전담 멘토를 배정하는 기업이 긍정적인 평가를 받는다. ## 좋은 UI/UX 인턴십의 조건 - 인턴을 단순 보조 인력이 아니라 정규 직원처럼 대한다. - 실제 배포 가능한 제품과 기능을 설계하게 한다. - 사용자 조사와 테스트를 직접 경험하게 한다. - 숙련된 디자이너나 관리자가 지속적으로 멘토링한다. - 디자인뿐 아니라 엔지니어링·제품·비즈니스 팀과 협업하게 한다. - 급여와 복지도 중요하지만, 응답자들은 실무 경험과 학습 기회를 더 높게 평가했다. ## Shopify: 부서 간 협업과 멘토링 - 인턴을 여러 부서가 함께 일하는 팀에 배치한다. - 아이디어 구상부터 실행까지 다양한 직군과 소통하는 방법을 배울 수 있다. - Timeline처럼 실제 배포 가능한 프로젝트에 참여한다. - 모든 디자인 인턴에게 담당 직원을 배정해 멘토링을 제공한다. - 인턴의 약 80%가 Shopify에 재입사하거나 정규직으로 전환된다고 소개된다. ## Hotels.ng: 원격·유급 인턴십 - 나이지리아 호텔 예약 서비스로, 현지 주민을 대상으로 원격 유급 UI/UX 인턴십을 운영한다. - 누구나 지원할 수 있지만, 과제를 통과하지 못하면 프로그램에서 탈락한다. - 3개월 과정을 끝까지 완료한 인턴은 Hotels.ng 또는 다른 현지 기업에 정규직으로 채용되는 경우가 많다. - 지역 인재에게 원격으로 실무 경험을 제공한다는 점이 특징이다. ## Facebook: 높은 보상과 정규직 수준의 책임 - 당시 월평균 약 5,600달러의 높은 인턴 급여가 언급된다. - 인턴도 정규직 직원과 비슷한 존중과 책임을 받는다. - 대규모 조직의 제품 개발 과정과 기업 문화를 가까이서 경험할 수 있다. - 캠퍼스 같은 복지와 업무 환경도 주요 장점으로 소개된다. ## Spotify: 스프린트 기반의 디자인 중심 문화 - 10주 인턴십 동안 소규모 스쿼드에 소속된다. - 2주 단위 스프린트로 업무를 진행하며 제품 개발 리듬을 경험한다. - 전담 멘토 또는 관리자가 프로그램 전체를 지원한다. - 시각적 완성도와 디자인 역량을 중요하게 평가하는 디자인 중심 조직이다. - 무료 식사 등 풍부한 복지도 제공된다. ## Salesforce: 의미 있는 프로젝트와 디자인 시스템 학습 - Futureforce라는 인턴십 프로그램을 운영한다. - 인턴이 실제로 의미 있는 프로젝트를 맡도록 구성되어 있다. - 업무 외 행사에서 임원과 교류하거나 스포츠 경기에 참여할 수 있다. - 최대 7일의 자원봉사 휴가(VTO)를 제공한다. - 디자인 시스템을 배우기 좋은 기업이라는 평가가 소개된다. ## Uber: 높은 접근성과 강도 높은 실무 경험 - 건강보험, 무제한 휴가, Uber 이용 크레딧 등 다양한 복지를 제공한다. - 업무 강도는 높지만 보람 있는 문화로 묘사된다. - 인턴도 고위 임원에게 직접 접근할 기회가 많다. - 20세 인턴의 의견도 경영진이 실제로 듣고 반영했다는 경험담이 제시된다. ## IBM: 여러 디자인 전문 분야와 감성 지능 - 오스틴에서 약 15명의 젊은 디자이너를 대상으로 Maelstrom 프로그램을 운영한다. - 디자인 리서치, 비주얼 디자인, UX 디자인, 프론트엔드 개발의 네 가지 트랙으로 나뉜다. - 전문 분야를 선택해 체계적으로 경험할 수 있다. - 프로그램의 성공 요인으로 감성 지능과 사람을 이해하는 능력을 강조한다. ## Airbnb: 조직 전반에 퍼진 디자인 문화 - 디자인을 중시하는 기업 문화가 사무실, 제품, 창업자 배경 전반에 나타난다. - 진보적이고 혁신적이며 긴밀한 조직 문화가 장점으로 언급된다. - 인턴에게 여행 크레딧을 제공한다. - 다양한 복지와 세심한 근무 환경 때문에 이후 다른 회사에 적응하기 어렵다는 평가도 있다. ## Square: 관심사에 따른 문제 탐색 - 인턴이 자신의 관심사에 따라 다양한 문제를 탐색할 수 있도록 비교적 큰 재량을 준다. - 단순한 UI 제작을 넘어 예술적·창의적 작업을 경험할 수 있다. - 기술 업계의 성별 격차를 완화하려는 노력으로도 알려져 있다. - UI 디자이너를 넘어 폭넓은 창작자로 성장할 수 있는 환경을 제공한다. ## Palantir: 장식보다 문제 해결에 집중 - 제품 디자인 인턴이 버튼이나 스타일시트를 반복적으로 개선하는 데 그치지 않는다. - 복잡한 실제 문제를 해결하는 데 디자인 역량을 집중하게 한다. - 오픈소스 스타일 가이드인 Blueprint를 활용해 기본 디자인 시스템을 재발명하는 시간을 줄인다. - 시각적 세부 작업보다 문제 정의와 제품 설계 역량을 키우는 인턴십으로 소개된다. 인턴십을 선택할 때는 급여와 복지뿐 아니라 실제 출시 프로젝트 참여 여부, 전담 멘토의 존재, 사용자 조사 기회, 협업 범위, 정규직 전환 가능성을 함께 확인하는 것이 좋다. 최고의 프로그램은 인턴에게 책임을 주되, 실수에서 배우고 성장할 수 있도록 충분한 피드백과 지원을 제공한다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템사용자 경험user-testing+3

figma·2017년 10월 25일·2분 읽기큐레이션 요약

그마, 이제 제

Figma는 UI 디자이너와 프런트엔드 개발자 간 협업을 개선하기 위해 Zeplin과의 연동을 지원한다고 발표했습니다. 디자이너는 Figma의 프레임을 Zeplin으로 내보내 개발자 중심의 방식으로 공유할 수 있으며, 기존 업무 흐름을 유지하면서 두 서비스를 seamless하게 사용할 수 있습니다. 다만 원본 디자인이 변경되면 Zeplin으로 다시 내보내야 합니다. ## Figma와 Zeplin 연동의 목적 - 팀마다 디자인·프로토타이핑·개발 방식이 다르다는 점을 고려해 다양한 협업 시스템을 지원합니다. - Zeplin은 UI 디자이너와 프런트엔드 개발자 간 핸드오프에 특화된 도구입니다. - 개발자에게 디자인 데이터를 직관적으로 제공해 구현 과정의 이해와 협업을 돕습니다. - Figma 사용자의 요청이 많았던 기능으로, Zeplin을 중심으로 작업하던 팀도 Figma를 도입하기 쉬워졌습니다. ## Figma와 Zeplin의 역할 차이 - Figma는 디자인 제작과 협업, 프로토타이핑을 위한 플랫폼입니다. - Zeplin은 개발자 경험에 초점을 맞춘 핸드오프 도구입니다. - Figma의 코드 모드와 달리, Zeplin으로 내보낸 디자인은 자동으로 최신 상태가 되지 않습니다. - Figma에서 디자인을 수정한 경우 변경 사항을 반영하려면 Zeplin으로 다시 내보내야 합니다. ## 연동 설정 및 사용 방법 - Zeplin을 설치하고 프로젝트를 생성합니다. 실험용 프로젝트도 사용할 수 있습니다. - Figma의 왼쪽 상단 메뉴에서 **Integrations > Zeplin**을 선택해 연동을 활성화합니다. - Figma에서 개발자에게 전달할 프레임을 만듭니다. - 해당 프레임을 선택한 뒤 **Export > Export to Zeplin**을 실행합니다. - 자동으로 열린 Zeplin 앱에서 **Import**를 선택합니다. - 이후 Zeplin에서 Figma 디자인을 확인하고 개발 핸드오프에 활용할 수 있습니다. ## 협업 생태계 확장 - 디자인 도구와 개발 도구 간 통합은 팀의 업무 전환 비용을 줄이고 협업 흐름을 매끄럽게 만듭니다. - Figma는 Zeplin 같은 외부 파트너와의 연동을 통해 플랫폼 생태계를 확장하려고 합니다. - 글에서는 새로운 협업 도구와 파트너십 제안을 계속 환영한다고 밝힙니다. 실무에서는 Figma를 디자인의 원본으로 관리하고, 변경이 완료된 시점에 프레임을 Zeplin으로 재내보내는 운영 방식을 권장합니다. 이를 통해 Zeplin에 전달된 화면이 실제 디자인과 불일치하는 문제를 줄일 수 있습니다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑사용자 인터페이스front-end-development+2

figma·2017년 10월 23일·4분 읽기큐레이션 요약

스탠퍼드와 UC 버

인터페이스 디자인이 중요해지고 있지만 대학 교육에서는 여전히 주변적인 분야이며, 교수들은 제한된 시간 안에 디자인 원리와 복잡한 도구 사용법을 함께 가르쳐야 한다. 이 글은 스탠퍼드와 UC 버클리 교수들이 Figma를 선택한 이유로 접근성, 낮은 비용, 쉬운 학습 곡선, 실시간 협업과 피드백 기능을 제시한다. Figma를 활용하면 도구 교육보다 디자인 사고와 원칙 자체에 수업의 초점을 맞출 수 있다는 것이 결론이다. ### 대학에서 인터페이스 디자인을 가르치기 어려운 이유 - 인터페이스 디자인 과목은 대학의 주류 커리큘럼에 널리 포함되어 있지 않다. - 관련 수업은 여러 전공 사이에 배치된 소수의 융합 과목인 경우가 많다. - 교수와 조교는 짧은 수업 시간 안에 기술 개념과 디자인 원리를 모두 다뤄야 한다. - 기존 디자인 도구는 기능이 복잡해, 학생들이 실제 디자인보다 도구 사용법을 익히는 데 많은 시간을 쓰게 된다. ### 다양한 컴퓨터에서 사용할 수 있는 클라우드 기반 도구 - Figma는 클라우드에서 실행되므로 웹 브라우저만 있으면 사용할 수 있다. - Windows PC, Linux 컴퓨터, Chromebook 등 운영체제와 기기 종류에 크게 구애받지 않는다. - 별도의 대형 프로그램을 설치할 필요가 없다. - 개인 컴퓨터가 없는 학생도 인터넷이 가능한 장소에서 과제를 수행할 수 있다. - 학교가 특정 하드웨어나 운영체제를 일괄적으로 제공하지 않아도 수업을 운영하기 쉽다. ### 교육기관에 무료로 제공되는 Figma - Figma는 교육기관을 대상으로 프리미엄 기능을 무료로 제공한다고 설명한다. - 저소득층 학생도 비용 때문에 수업 참여를 포기할 필요가 없다. - 대학이 고가의 소프트웨어 라이선스 계약을 별도로 협상할 필요가 없다. - 교수는 복잡한 구매 절차 없이 바로 수업에 도입할 수 있다. ### 짧은 학습 시간과 단순한 기능 구성 - Figma는 디지털 디자인에 필요한 기능에 집중해 도구를 비교적 가볍고 직관적으로 구성했다. - UC 버클리 교수들은 Figma를 “가볍고”, “단순하며”, “직관적”이라고 평가했다. - 디자인 경험이 없는 학생도 한 시간 이내에 기본 사용법을 익힐 수 있다고 소개한다. - 교수와 조교는 도구의 세부 기능을 반복해서 설명하기보다 디자인 원칙을 가르치는 데 집중할 수 있다. - 학생 역시 도구 조작에 어려움을 겪기보다 배운 원칙을 실제 결과물에 적용하는 데 에너지를 사용할 수 있다. ### 기술 문제를 지원팀에 맡길 수 있음 - 대규모 수업과 제한된 예산 때문에 교수와 조교의 지원 여력은 부족할 수 있다. - Figma 앱 내부의 채팅을 통해 지원팀에 기술적인 질문을 할 수 있다. - 평일 기준 24~48시간 이내 답변을 제공한다고 설명한다. - 학생들이 기본적인 기술 문제를 직접 지원팀에 문의하면 교수와 조교는 수업 내용이나 중요한 디자인 질문에 집중할 수 있다. ### 최신 작업물을 링크 하나로 확인 - 브라우저 기반이므로 학생들이 파일을 별도로 저장하거나 내보내서 제출할 필요가 없다. - 교수는 디자인 파일 URL을 열어 언제든 최신 작업물을 확인할 수 있다. - 파일을 직접 검토하거나 학생이 작업하는 과정을 실시간으로 볼 수 있다. - 파일 버전을 주고받거나 최신본을 확인하는 데 드는 커뮤니케이션 비용이 줄어든다. ### 댓글과 버전 기록을 통한 피드백 - 교수는 특정 디자인 프레임에 댓글을 고정해 구체적인 피드백을 남길 수 있다. - 학생은 어떤 요소에 대한 의견인지 명확히 확인할 수 있다. - 이메일로 파일을 다시 보내지 않아도 같은 파일에서 피드백을 실시간으로 확인할 수 있다. - 대면 미팅이 아니어도 학생이 피드백을 반영하고 반복적으로 디자인을 개선할 수 있다. - 버전 기록을 통해 디자인이 어떻게 발전했는지 확인할 수 있다. - 그룹 프로젝트에서는 구성원별 작업 기여도도 파악할 수 있다. ### 하나의 파일에서 실시간 공동 작업 - 여러 학생이 같은 디자인 파일에 동시에 접속해 작업할 수 있다. - 파일이 손상되거나 서로의 작업을 덮어쓸 걱정 없이 협업할 수 있다. - 최신 파일을 이메일로 주고받거나, 한 명씩 번갈아 작업할 필요가 없다. - 그룹 프로젝트에서 작업 과정과 결과물을 하나의 공유 공간에서 관리할 수 있다. 수업용 디자인 도구를 선택할 때는 기능의 많고 적음보다 학생들의 접근성, 학습 난이도, 협업 및 피드백 방식을 우선적으로 검토하는 것이 좋다. 이 글의 사례처럼 설치와 비용의 장벽이 낮고 실시간 공유·댓글·버전 관리가 가능한 도구를 사용하면, 수업의 중심을 도구 훈련에서 디자인 원리와 반복적인 개선 과정으로 옮길 수 있다.

원문 읽기(새 탭에서 열림)

Figmacollaborative-design클라우드 컴퓨팅version-control+2

figma·2017년 10월 15일·2분 읽기큐레이션 요약

놓치셨을 분들을

Figma는 창립 1주년을 기념해 월요일부터 토요일까지 매일 새로운 기능을 공개하는 `#6DaysofShipping` 이벤트를 진행했다. 고급 사용자를 위한 기능부터 초보자를 위한 단축키 안내까지 다양한 수준의 기능을 연속적으로 선보이며, 빠른 제품 개발과 사용자 커뮤니티의 기대감을 강조했다. 이 글은 해당 주간에 공개된 기능과 사용법을 간단히 정리한 회고다. ## 6일간 이어진 기능 출시 이벤트 - Figma 팀은 제품 출시 속도에 대한 사용자들의 관심과 기대에 호응해 6일 연속 기능을 공개했다. - 이벤트는 월요일부터 토요일까지 매일 하나의 기능을 소개하는 방식으로 진행됐다. - 주요 대상은 다음처럼 다양했다. - 중첩 인스턴스 교체 같은 파워 유저용 기능 - 키보드 단축키 목록처럼 입문자에게 유용한 기능 - 서로 성격이 다른 기능을 한 주에 묶어 공개함으로써 다양한 사용자에게 새로운 기능을 제공했다. ## 드래그로 속성값을 조절하는 Scrubbable Inputs - 속성 패널의 숫자 값을 직접 입력하는 대신, 마우스로 드래그해 빠르게 변경할 수 있다. - `Option` 키를 누른 상태에서 값을 클릭하고 드래그하면 값이 조절된다. - 커서를 위쪽으로 움직이면 값의 변화 속도를 더 빠르게 할 수 있다. - 반복적으로 크기, 위치, 간격 등의 값을 바꿔야 하는 디자인 탐색 과정에서 특히 유용하다. - 정확한 숫자를 매번 입력하기보다 시각적으로 결과를 확인하며 여러 대안을 빠르게 비교할 수 있다. ## 모서리 반경을 빠르게 조정하는 단축 동작 - 사각형의 모서리 반경을 별도의 입력 과정 없이 직접 조절할 수 있다. - 도형에 마우스를 올린 뒤 모서리 조절 핸들을 클릭하고 드래그하면 원하는 둥근 정도를 설정할 수 있다. - `Alt` 키를 누른 상태에서 드래그하면 네 모서리를 한꺼번에 바꾸는 대신 특정 모서리 하나만 조절할 수 있다. - 따라서 전체적으로 둥근 카드뿐 아니라 한쪽 모서리만 둥근 형태도 빠르게 만들 수 있다. - 디자인 시안을 수정할 때 속성 패널과 캔버스 사이를 오갈 필요가 줄어든다. ## 파워 유저와 초보자를 함께 고려한 기능 구성 - 이번 출시 주간은 하나의 큰 기능에 집중하기보다 작업 속도와 접근성을 높이는 여러 기능을 폭넓게 다뤘다. - 중첩 인스턴스 교체처럼 컴포넌트 기반 작업을 강화하는 기능과 키보드 단축키 안내를 함께 제공했다. - Figma는 기능 자체뿐 아니라 사용자가 기능을 발견하고 익히는 과정도 중요하게 보고 있었다. - 매일 새로운 내용을 공개하는 형식은 사용자들이 다음 출시를 기대하게 만들고 커뮤니티의 참여를 유도했다. 실무에서는 숫자 값을 반복해서 수정할 때 Scrubbable Inputs를 사용하고, 모서리 형태를 조정할 때 드래그와 `Alt` 조합을 활용하면 디자인 탐색 속도를 높일 수 있다. 또한 새로운 기능을 한꺼번에 익히기보다 단축키와 캔버스 직접 조작 기능부터 작업 흐름에 조금씩 적용하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)

Figma사용자 인터페이스design-toolskeyboard-shortcuts+1

figma·2017년 10월 11일·2분 읽기큐레이션 요약

피그마팁 모음

Figma의 **FigmaTip Roundup 2.0**은 디자인 커뮤니티가 공유한 짧고 실용적인 Figma 활용 팁을 모은 글이다. 이번 글에서는 여러 이미지를 한 번에 배치하는 방법과 특정 레이어를 빠르게 확대해 확인하는 방법을 소개한다. 핵심은 반복적인 캔버스 작업을 단축키와 레이어 조작으로 빠르게 처리하는 것이다. ## 여러 이미지 한 번에 가져와 배치하기 - `Cmd + Shift + K`를 눌러 이미지 가져오기 창을 연다. - 여러 이미지 파일을 동시에 선택한다. - 캔버스에서 클릭하면 선택한 이미지들을 배치할 수 있다. - 여러 장의 사진이나 시각 자료를 하나씩 불러오는 대신, 한 번에 가져와 작업 시간을 줄일 수 있다. - Figma는 기능 사용법을 짧은 GIF와 함께 보여주며, 커뮤니티에 다른 팁도 공유해 달라고 독려한다. ## 레이어를 빠르게 확대해 확인하기 - 레이어 패널에서 원하는 레이어의 아이콘을 **더블클릭**한다. - 해당 레이어 객체가 화면에 꽉 차도록 확대되어, 세부 내용을 빠르게 확인할 수 있다. - 캔버스에서 직접 객체를 찾아 확대하거나 줌 수준을 수동으로 조절할 필요가 없다. - 복잡한 디자인 파일에서 특정 요소를 검토할 때 특히 유용하다. ## 커뮤니티 중심의 팁 공유 - `#FigmaTip`은 Figma 사용자들이 매주 작업 노하우를 공유하는 커뮤니티 형식의 콘텐츠다. - Figma 공식 계정뿐 아니라 파워 유저들의 사용 팁도 함께 소개된다. - 짧은 단축키나 조작법이라도 반복 작업을 줄이고 디자인 검토 속도를 높일 수 있다는 점을 보여준다. 실무에서는 이미지를 여러 장 다루는 작업에 `Cmd + Shift + K`를 활용하고, 특정 요소를 점검할 때 레이어 아이콘을 더블클릭하는 습관을 들이면 캔버스 탐색과 자료 배치 시간을 줄일 수 있다.

원문 읽기(새 탭에서 열림)

Figmadesign-toolsgraphic-designcanvas+1

figma·2017년 10월 3일·2분 읽기큐레이션 요약

#FigmaTip 라운드

이 글은 Figma 커뮤니티가 공유한 유용한 단축키와 숨은 기능을 모아 소개하는 첫 번째 `#FigmaTip` 모음집이다. 레이어 속성 복사, 캔버스 이동, 동일한 속성의 객체 선택처럼 반복 작업을 줄이고 편집 속도를 높이는 기능을 중심으로 설명한다. 작은 기능을 익히는 것만으로도 Figma 작업 흐름을 더 효율적으로 만들 수 있다는 것이 핵심이다. ### 여러 레이어의 속성 복사 - 여러 레이어에서 원하는 속성을 선택한 뒤 다른 객체에 복사할 수 있다. - 크기, 색상, 테두리 등 필요한 속성만 골라 적용할 수 있어 객체를 일일이 수정할 필요가 없다. - 여러 객체의 스타일을 빠르게 통일하거나 디자인 시안을 정리할 때 유용하다. ### 키보드로 캔버스 이동하기 - `Z` 키와 방향키를 함께 누르면 캔버스를 원하는 방향으로 이동할 수 있다. - `Shift + Z`와 방향키를 사용하면 더 큰 폭으로 캔버스를 이동하는 “큰 이동”이 가능하다. - 마우스나 트랙패드로 화면을 드래그하지 않고도 넓은 작업 영역을 빠르게 탐색할 수 있다. ### 동일한 속성을 가진 객체 선택 - 특정 객체와 같은 속성을 가진 다른 객체를 한 번에 선택할 수 있다. - 동일한 색상, 스타일 또는 형태를 사용하는 요소를 일괄적으로 수정할 때 편리하다. - 반복되는 UI 요소를 정리하거나 디자인 시스템의 스타일을 통일하는 작업에 활용할 수 있다. Figma에서 자주 반복하는 편집 작업을 단축키와 다중 선택 기능으로 대체하면 작업 시간을 줄이고 디자인 일관성도 높일 수 있다. 특히 속성 복사와 동일 속성 객체 선택 기능을 익혀 두면 여러 화면의 스타일을 수정할 때 효과적이다.

원문 읽기(새 탭에서 열림)

Figma사용자 경험keyboard-shortcutscanvas-panning+1

figma·2017년 9월 27일·2분 읽기큐레이션 요약

Figma의 라이브

Figma는 웹 기반 디자인 파일과 프로토타입을 최신 상태로 유지한 채 다른 웹사이트와 협업 도구에 삽입할 수 있는 **Live Embed Kit**을 공개했다. 사용자는 iframe 코드만으로 Figma 콘텐츠를 임베드할 수 있으며, 원본 파일이 변경되면 별도 재업로드 없이 임베드된 화면도 자동으로 동기화된다. 이를 통해 팀이 이메일, 메신저, 파일 공유 서비스에 흩어진 디자인을 찾는 번거로움을 줄이고 더 빠르게 협업할 수 있다는 것이 글의 핵심 주장이다. ## iframe 기반의 간단한 임베드 - Figma 파일 우측 상단의 **Share** 메뉴에서 **Public embed**를 선택하면 iframe 코드를 얻을 수 있다. - 개발자는 이 iframe을 자신의 웹사이트나 서비스에 삽입해 Figma 디자인 또는 프로토타입을 표시할 수 있다. - 별도의 복잡한 렌더링 시스템을 구축하지 않아도 웹페이지에 Figma 콘텐츠를 통합할 수 있다. ## 항상 최신 상태로 유지되는 디자인 - 임베드된 콘텐츠는 Figma 원본 파일과 연결되어 실시간으로 동기화된다. - 디자이너가 여백, 아이콘, 레이아웃 등을 수정하면 임베드 화면에도 변경 사항이 반영된다. - 디자인을 이미지로 다시 내보내거나, 수정된 파일을 다시 업로드할 필요가 없다. - Figma가 웹에서 실행되는 디자인 도구라는 점이 이러한 지속적인 동기화의 기반이다. ## 외부 서비스와의 통합 - Live Embed Kit은 개인 웹사이트뿐 아니라 제3자 서비스가 Figma 임베드 기능을 제공하도록 설계됐다. - 글에서는 Trello, JIRA, Dropbox Paper와 같은 도구에서의 활용 사례를 언급한다. - 서비스 개발자는 자체 제품 안에서 사용자가 최신 Figma 파일을 공유하고 확인할 수 있도록 통합할 수 있다. ## 팀 협업에서의 활용 사례 - **사내 위키**: 프로젝트나 기능 문서에 최신 디자인을 삽입해 문서와 시안을 함께 관리할 수 있다. - **팀 메시징 앱**: 그룹 채팅에서 디자인 파일의 최신 버전을 공유할 수 있다. - **블로그**: 프로젝트 소개 글에 live Figma 파일을 넣어 독자가 항상 최신 디자인을 보도록 할 수 있다. - 이러한 방식은 이메일 기록, Slack 대화, 파일 공유 폴더를 뒤져 최신 디자인을 찾는 문제를 줄인다. ## Figma 플랫폼 확장의 출발점 - Figma는 Live Embed Kit을 웹 기반 플랫폼 전략의 시작으로 소개한다. - 향후 Figma 파일에서 디자인 외의 다양한 정보를 가져와 새로운 업무 흐름에 활용할 수 있는 **Figma API**를 제공할 계획도 밝혔다. - 개발자와 파트너사가 Figma 데이터를 다른 협업 도구와 연결하는 생태계를 구축하는 방향이다. 실무적으로는 사내 문서, 제품 블로그, 협업 툴에 정적인 이미지 대신 Live Embed를 사용하면 최신성 유지와 커뮤니케이션 비용을 줄일 수 있다. 다만 공개 임베드 방식인 만큼, 삽입할 파일의 접근 권한과 공개 범위를 설정할 때 보안 및 기밀성도 함께 검토해야 한다.

원문 읽기(새 탭에서 열림)

Figmareal-time-collaborationAPI웹 개발+3

figma·2017년 9월 18일·3분 읽기큐레이션 요약

팀 라이브러리 1

Figma의 Team Library 1.0은 팀이 컴포넌트를 공유·사용·관리하며 일관된 디자인 시스템을 구축하도록 돕는 기능이다. 중앙화된 온라인 환경을 기반으로 컴포넌트와 변경 사항을 실시간으로 공유하고, 각 팀원이 업데이트를 적용할지 선택할 수 있게 했다. 베타 버전의 사용성 문제를 개선해 탐색, 문서화, 분류 기능을 강화한 것이 핵심이다. ## 중앙화된 디자인 시스템과 단일 진실 공급원 - 버튼, 아이콘, 다이얼로그 같은 컴포넌트를 여러 파일과 팀원 사이에서 공유할 수 있다. - Figma의 온라인·중앙화 구조 덕분에 별도의 내보내기, 동기화, 파일 공유가 필요 없다. - 공유 컴포넌트를 게시하거나 수정하면 팀 라이브러리에 즉시 반영된다. - 다른 파일에서 컴포넌트가 변경되면 알림을 받고, 자신의 인스턴스에 변경 사항을 적용할지 결정할 수 있다. - 이를 통해 팀별로 분산된 도구나 클라우드 동기화 작업 없이 일관된 디자인을 유지할 수 있다. ## 라이브러리 탐색 UI 개선 - 베타에서는 컴포넌트를 찾을 때마다 캔버스를 가리는 팝업을 열어야 했다. - 1.0에서는 왼쪽 사이드바에 Team Library 전용 탭을 제공한다. - 작업 화면을 벗어나지 않고 팀 컴포넌트를 탐색할 수 있다. - 원하는 컴포넌트를 사이드바에서 디자인 캔버스로 드래그해 인스턴스를 생성한다. - 왼쪽 사이드바 탭은 `Alt+1` 단축키로 빠르게 전환할 수 있다. - 별도의 로컬 컴포넌트 탭도 제공해, 라이브러리에 게시될 컴포넌트를 미리 확인하고 관리할 수 있다. ## 컴포넌트에 연결된 문서화 - 베타 버전에서는 컴포넌트의 사용 목적이나 동작 방식에 대한 설명을 저장할 공간이 없었다. - 그 결과 관련 정보가 Slack이나 Google Docs에 흩어졌다. - 1.0에서는 오른쪽 속성 패널에서 선택한 컴포넌트에 설명을 추가할 수 있다. - 팀원은 Team Library에서 컴포넌트를 탐색하면서 해당 문서를 함께 확인할 수 있다. - 문서가 컴포넌트 자체에 연결되므로 사용 시점에 필요한 지침을 바로 확인할 수 있다. ## 그룹과 프레임을 활용한 컴포넌트 분류 - 베타에서는 파일 단위로만 컴포넌트를 분류할 수 있어 라이브러리가 쉽게 복잡해졌다. - 1.0에서는 파일뿐 아니라 그룹과 프레임 기준으로도 컴포넌트를 정리할 수 있다. - 예를 들어 버튼 컴포넌트를 “Buttons”라는 그룹에 모으면 Components 탭과 Team Library 탭에서 함께 표시된다. - 그룹과 프레임을 활용하면 규모가 큰 라이브러리에서도 원하는 컴포넌트를 쉽게 찾을 수 있다. - 공유 컴포넌트를 담은 프레임의 배경색을 변경해 라이브러리에서 표시되는 배경을 설정할 수도 있다. ## 베타 피드백을 반영한 제품 발전 - Figma는 2017년 2월 Team Library 베타를 출시한 뒤 수백 명의 사용자와 실제 활용 방식을 논의했다. - 초기 기능은 사용자의 요구를 파악하기 위한 최소한의 형태였지만, 실제 디자인 시스템을 운영하는 팀에는 부족했다. - 사용자 피드백을 바탕으로 탐색 UI, 문서화, 분류 기능을 확장해 1.0 버전을 완성했다. - 목표는 단순한 컴포넌트 저장소가 아니라 팀이 함께 유지·발전시키는 “살아 있는” 디자인 시스템을 만드는 것이었다. 팀에서 디자인 시스템을 운영한다면 컴포넌트를 파일별로 분산시키기보다 Team Library를 단일 관리 지점으로 활용하는 것이 효과적이다. 특히 컴포넌트 설명과 그룹 구조를 함께 정리하면 재사용성과 팀 간 커뮤니케이션을 동시에 높일 수 있다.

원문 읽기(새 탭에서 열림)

Figma디자인 시스템collaborative-designcomponent-library+1

figma·2017년 9월 12일·2분 읽기큐레이션 요약

Trello 및 Jira Software에서 Figma 디자인

Figma는 Trello와 Jira Software에서 디자인 파일을 실시간으로 확인할 수 있는 Live Embed 기능을 출시했다. Figma 원본에서 패딩이나 색상 등을 수정하면 Trello 카드나 Jira 티켓에 삽입된 디자인도 자동으로 업데이트되어, 최신 디자인을 찾거나 PNG를 반복 업로드할 필요가 없어진다. 이를 통해 디자이너와 개발자, 기획자 간의 협업과 정보 공유를 간소화하는 것이 핵심이다. ## Atlassian 도구에 Figma 디자인 실시간 삽입 - Figma 파일을 Trello 카드나 Jira Software 티켓에 Live Embed로 추가할 수 있다. - 원본 Figma 파일이 변경되면 삽입된 디자인이 자동으로 갱신된다. - 패딩, 글꼴 색상 등 세부 디자인을 수정해도 별도의 재업로드 작업이 필요 없다. - 팀원들은 프로젝트 관리 도구 안에서 항상 현재 디자인 상태를 확인할 수 있다. ## 기존 디자인 공유 방식의 문제점 - 디자이너가 최신 디자인을 공유하기 위해 관련 프로젝트 카드나 티켓을 직접 찾아야 했다. - PNG 파일을 내보내 업로드하는 방식은 원본이 수정되는 순간 빠르게 오래된 정보가 된다. - 개발자, 제품 관리자, 마케터 등 여러 팀원이 최신 디자인 파일을 어디서 찾아야 하는지 혼란을 겪었다. - Live Embed는 디자인의 단일 원본을 유지해 이런 커뮤니케이션 비용을 줄인다. ## Trello와 Jira Software 연동 방식 - **Jira Software** - Atlassian 마켓플레이스에서 Figma 연동 기능을 활성화한다. - Jira 티켓의 디자인 영역에 Figma 파일 URL을 붙여 넣는다. - **Trello** - 팀 설정에서 Figma Power-Up을 활성화한다. - Trello 카드의 첨부 파일로 Figma URL을 추가한다. - 두 서비스 모두 Figma 파일의 최신 상태를 프로젝트 관리 화면에서 확인할 수 있다. ## 확장되는 임베드 생태계 - Figma는 웹에서 실행되는 디자인 도구라는 장점을 활용해 다양한 업무 흐름에 Live Embed를 적용하려 한다. - 이번 Atlassian 연동은 Dropbox Paper에서 제공하기 시작한 기능과 유사한 방향이다. - 향후 디자이너와 팀이 협업하는 여러 서비스에서 Figma 임베드를 지원할 계획임을 밝혔다. 팀에서 디자인 파일을 PNG로 반복 공유하고 있다면, Figma 원본 URL을 Trello나 Jira의 작업 항목에 직접 연결하는 방식이 더 효율적이다. 프로젝트 관리 도구와 디자인 도구 사이의 정보 불일치를 줄이고 최신 상태를 자동으로 유지할 수 있다.

원문 읽기(새 탭에서 열림)

Figmatrelloatlassianlive-embed+3

figma·2017년 8월 29일·2분 읽기큐레이션 요약

피그마 + 드롭박

Figma와 Dropbox Paper의 통합으로 Figma 디자인과 프로토타입을 Paper 문서에 실시간 임베드할 수 있게 되었다. 문서에 삽입된 콘텐츠는 최신 디자인으로 자동 업데이트되므로, 팀원들이 오래된 파일을 찾거나 버전을 확인하는 번거로움이 줄어든다. URL을 복사해 붙여넣기만 하면 빠르고 가벼운 라이브 임베드가 생성되는 것이 핵심이다. ## Figma와 Dropbox Paper의 통합 - 2017년 8월 30일부터 Figma 콘텐츠를 Dropbox Paper에 라이브 임베드할 수 있게 됐다. - Figma 디자인과 프로토타입이 Paper 문서 안에서 직접 표시된다. - 원본 Figma 파일이 변경되면 임베드된 콘텐츠도 즉시 최신 상태로 반영된다. - 프로젝트 매니저, 엔지니어, 제품 디자이너가 동일한 최신 디자인을 확인할 수 있다. ## 버전 관리와 협업 문제 해결 - 팀 협업에서는 최신 디자인 파일을 찾기 어렵거나 오래된 버전을 참조하는 문제가 발생하기 쉽다. - 라이브 임베드를 사용하면 문서에 고정된 이미지나 수동으로 갱신해야 하는 링크 대신 항상 최신 디자인을 볼 수 있다. - 디자인이 공유 문서의 맥락 안에 유지되므로, 별도의 도구를 오가며 내용을 확인할 필요가 줄어든다. - Figma가 지향해 온 협업 중심 디자인 환경을 디자인 직군 외의 팀원까지 확장한다. ## Dropbox Paper의 협업 문서 기능 - Dropbox Paper는 팀이 함께 문서를 작성하고 협업하는 문서 플랫폼이다. - Dropbox 계정이 있는 사용자는 이용할 수 있다. - YouTube, GitHub, Facebook 등 여러 외부 서비스와의 통합을 지원한다. - Figma 임베드를 통해 디자인 작업도 문서 기반 협업 흐름에 자연스럽게 포함된다. ## 간단한 사용 방법과 기술적 특징 - Figma 프로젝트 URL을 복사한다. - Dropbox Paper 문서에서 `Command + V`로 붙여넣는다. - 별도의 복잡한 설정 없이 즉시 라이브 문서가 표시된다. - 임베드에 불필요한 애플리케이션 요소를 제거해 코드 크기를 줄였으며, 빠르게 로드되도록 설계했다. ## 실용적인 활용 - 기획 문서에 최신 디자인 시안을 삽입해 기획자와 디자이너가 같은 내용을 확인할 수 있다. - 개발 문서나 이슈에 프로토타입을 임베드해 구현 대상과 상호작용을 쉽게 공유할 수 있다. - 프로젝트 회의 문서에 디자인을 포함하면 별도의 파일 첨부나 버전 안내 없이 최신 상태를 유지할 수 있다. - 디자인 변경이 잦은 프로젝트일수록 정적 이미지보다 라이브 임베드가 유용하다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑githubdesign-collaboration+2

figma·2017년 8월 9일·3분 읽기큐레이션 요약

Figma 이모지 출시의

Figma는 사용자 요청이 많았던 이모지 지원을 추가하면서, 운영체제마다 다르게 표시되는 이모지 문제를 해결하고자 했다. 브라우저나 OS의 이모지 렌더링에 의존하지 않고, 개별 이모지를 64×64 컬러 PNG로 제공한 뒤 캐싱하는 방식을 선택했다. 이를 통해 플랫폼 간 일관성과 디자이너가 요구하는 시각적 품질을 모두 확보했다. ## 이모지가 제품에 필요한 이유 - 이모지는 감정, 말투, 뉘앙스를 전달하는 디지털 커뮤니케이션의 시각 언어로 자리 잡았다. - Figma에서 실제 서비스 화면을 디자인하려면 광고 문구, 메시지, 트윗 등에 사용되는 이모지도 정확히 표현할 수 있어야 했다. - 이모지 지원 부족으로 일부 팀이 Figma를 이탈할 정도로 사용자 요구가 컸다. - Mac에서는 `Control + Command + Space`, Windows에서는 터치 키보드의 이모지 아이콘으로 입력할 수 있다. ## 이모지 표준과 플랫폼별 차이 - 이모지는 1999년 일본 휴대전화 사업자가 텍스트만으로 감정을 표현하기 어렵다는 문제를 해결하기 위해 처음 만들었다. - 통신사마다 자체 이모지 세트를 사용하면서 플랫폼 간 호환 문제가 발생했다. - 2009년 Unicode Consortium이 이모지를 문자 체계에 포함하고, 각 이모지에 고유 코드 포인트를 부여했다. - 예를 들어 `U+1F355`는 피자 이모지를 의미한다. - Unicode는 코드와 기본 지침을 정의할 뿐, 구체적인 그림의 디자인은 플랫폼에 맡긴다. - 따라서 같은 이모지도 Apple, Google, Facebook, Twitter, Samsung 등에서 서로 다르게 보일 수 있으며, 감정이나 의미가 왜곡될 위험이 있다. ## Figma에서 OS 렌더링을 사용할 수 없었던 이유 - Figma는 Mac, Windows 등 여러 플랫폼에서 협업하므로 모든 사용자가 동일한 디자인을 봐야 한다. - 브라우저가 운영체제의 이모지 라이브러리를 사용하면 같은 코드가 플랫폼마다 다른 이미지로 렌더링된다. - 이는 협업 디자인 도구에서 시각적 일관성을 훼손하고, 사용자가 의도한 이모지의 의미를 바꿀 수 있다. ## Slack 방식과 한계 - Slack은 Apple 이모지를 표준으로 정하고, 모든 이모지를 하나의 대형 PNG 파일에 담아 자체 호스팅했다. - 사용자가 이모지를 선택하면 대형 이미지의 해당 영역만 표시하므로 삽입 속도가 빠르다. - 그러나 PNG 기반 방식은 확대 시 화질이 떨어지고, 저해상도 이미지가 된다. - 채팅 화면에서는 문제가 크지 않지만, 시각 품질에 민감한 디자이너가 사용하는 Figma에는 적합하지 않았다. ## Figma의 개별 PNG와 캐싱 방식 - Figma는 각 이모지를 별도의 64×64 풀컬러 PNG로 제공했다. - 처음 특정 이모지를 삽입할 때는 이미지를 불러오느라 약간의 지연이 발생한다. - 이후에는 해당 이미지를 캐시해 재사용하므로 반복 사용 시 빠르게 표시된다. - 하나의 거대한 PNG를 내려받는 대신 필요한 이모지만 관리해 메모리 효율도 높였다. - 결과적으로 Slack 방식보다 높은 해상도를 유지하면서도 플랫폼에 관계없이 동일한 이모지를 표시할 수 있었다. 사용자 요구가 제품 이탈과 직결될 수 있는 기능이라면 우선순위를 재평가해야 한다. 특히 협업·디자인 도구에서는 운영체제에 따른 렌더링 차이를 그대로 허용하기보다, 일관된 리소스 제공과 캐싱을 조합해 품질과 성능을 함께 관리하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)

Figmaunicodecross-platformemoji+1

figma·2017년 7월 24일·3분 읽기큐레이션 요약

피그마 2.0:

Figma 2.0은 디자이너 간 협업을 넘어 마케팅, 경영진, 개발자까지 포함한 전체 팀의 협업을 목표로 한다. 이를 위해 디자인 파일과 발표용 프로토타입을 연결하는 프로토타이핑 기능과, 개발자가 디자인 정보를 직접 확인하는 개발자 핸드오프 기능을 추가했다. 핵심은 내보내기·동기화·버전 관리 같은 중간 단계를 줄이고 하나의 클라우드 문서를 모든 팀원이 함께 사용하는 것이다. ## 디자이너 협업에서 전체 팀 협업으로 - Figma 1.0은 클라우드 기반 디자인 환경을 구축하는 데 초점을 맞췄다. - 저장, 내보내기, 동기화, 이메일 공유가 거의 필요 없다. - 여러 사용자가 동시에 편집하는 멀티플레이어 기능을 제공한다. - 팀 단위 컴포넌트 라이브러리로 디자인 요소를 공유할 수 있다. - Figma 2.0에서는 협업 범위를 디자이너 밖으로 확장했다. - 마케팅 부서, 경영진, 엔지니어 등 다양한 이해관계자가 같은 디자인 자료를 활용할 수 있다. - 제품 개발 전반에서 하나의 진실 공급원(single source of truth)을 유지하는 것이 목표다. ## 클라우드 기반 프로토타이핑 - 디자이너가 디자인을 별도 도구로 내보내지 않고 같은 장소에서 발표와 테스트까지 진행할 수 있다. - 주요 활용 목적은 다음과 같다. - 디자인 리뷰와 피드백 - 경영진 대상 프레젠테이션 - 사용자 인터랙션 테스트 - Figma는 고급 모션 그래픽보다 슬라이드쇼와 핫스팟 기능을 우선적으로 제공했다. - 프로토타입은 정적인 결과물이 아니라 원본 디자인과 연결된 “살아 있는 문서”로 동작한다. - 원본 프레임을 수정하거나 화면을 추가하면 발표 화면에도 실시간 반영된다. - 별도의 내보내기나 동기화가 필요 없다. - 프레임을 노드로 연결해 화면 이동을 구성하고, 개별 객체를 핫스팟으로 설정할 수 있다. - 컴포넌트에 핫스팟을 지정하면 해당 컴포넌트의 모든 인스턴스에 내비게이션 동작이 적용된다. - 프레임 순서를 정해 간단한 프레젠테이션으로 사용할 수도 있다. - 발표자는 휴대폰으로 프레젠테이션을 탐색할 수 있다. - 아트보드 순서를 맞추기 위한 복잡한 파일명이나 버전 관리가 줄어든다. - 다만 모든 프로토타이핑 시나리오를 지원하는 것은 아니며, Framer 같은 전문 도구와의 연동도 계속 추진할 계획이다. ## 개발자 핸드오프 - 디자이너는 개발자에게 파일을 보기 전용(view-only)으로 공유할 수 있다. - 개발자는 편집 권한 없이도 오른쪽 속성 패널의 ‘Code’ 모드에서 디자인 정보를 확인할 수 있다. - 객체를 선택하면 다른 객체와의 간격을 빨간색 측정선(redline)으로 확인할 수 있다. - 다음 플랫폼에 필요한 정보를 추출할 수 있다. - CSS - iOS - Android - 정보는 두 가지 방식으로 제공된다. - **테이블 보기:** 속성을 항목별로 나누어 빠르게 확인 - **생성된 코드 보기:** 구현에 활용할 수 있는 마크업 및 코드 제공 - 개발자가 편집자 좌석을 구매하지 않아도 되므로 팀의 비용 부담을 줄일 수 있다. - 디자인 파일 자체를 기준으로 치수와 스타일 정보를 확인하므로, 별도의 스펙 문서나 수동 전달 과정이 줄어든다. ## 하나의 문서로 줄어드는 추상화 계층 - 기존에는 디자인 파일, 프로토타이핑 도구, 발표 자료, 개발자용 스펙 문서가 분리될 수 있었다. - Figma 2.0은 디자인과 발표, 디자인과 구현 사이의 변환 단계를 줄인다. - 원본 디자인이 수정되면 연결된 프로토타입과 공유 정보에도 즉시 반영된다. - 팀 구성원마다 별도의 파일이나 도구를 관리하는 대신, 클라우드 문서를 중심으로 협업할 수 있다. ## 확장되는 도구 생태계 - Figma는 모든 팀의 워크플로를 하나의 제품으로 대체하려 하기보다 다양한 도구와 함께 작동하는 생태계를 지향한다. - 전문 프로토타이핑 도구 및 다른 협업 도구와의 통합과 파트너십을 다음 단계로 제시했다. - 궁극적인 목표는 더 나은 소프트웨어를 함께 만들 수 있도록 팀 전체의 협업 장벽을 낮추는 것이다. 실무적으로는 디자인 파일을 단순한 작업물이 아니라 발표·검토·개발의 기준 문서로 운영하는 방식이 Figma 2.0의 가장 큰 장점이다. 팀은 프로토타입과 개발자 핸드오프를 같은 파일에서 관리하고, 개발자에게는 필요한 최소 권한인 보기 전용 접근을 제공하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)

Figma프로토타이핑AndroidiOS+3

figma·2017년 7월 19일·2분 읽기큐레이션 요약

터가 피그마

Figma는 2017년 이미지 조정 기능을 도입해 별도의 Photoshop 없이 캔버스에서 사진을 빠르게 보정할 수 있도록 했다. 노출, 대비, 채도, 색온도, 색조, 하이라이트, 그림자 등을 조절할 수 있으며, 전문 이미지 편집기를 대체하기보다는 디자이너의 간단한 수정 작업을 줄이는 데 목적이 있다. ## Photoshop 경쟁자로 시작한 Figma - Figma는 2012년 Photoshop의 대안으로 시작했다. - 공동 창업자이자 CTO인 Evan Wallace는 브라우저 기술을 활용해 사진 필터와 마스크 기능을 실험했다. - 새 이미지 조정 기능은 이러한 초기 방향성과 브라우저 기반 이미지 편집이라는 Figma의 뿌리를 다시 연결한다. ## Figma의 이미지 조정 기능 - 이미지에 다음과 같은 조정 효과를 적용할 수 있다. - 노출(Exposure) - 대비(Contrast) - 채도(Saturation) - 색온도(Temperature) - 색조(Tint) - 하이라이트(Highlights) - 그림자(Shadows) - 이미지를 Figma 캔버스에 드래그한 뒤, 오른쪽 속성 패널의 **Fill** 영역에서 필터 옵션을 선택하면 사용할 수 있다. - 별도 프로그램에서 이미지를 수정한 뒤 다시 내보내거나, Figma 내부에서 비공식적인 우회 방법을 사용할 필요가 줄어든다. ## 빠른 보정에 맞춘 조정 범위 - Figma 팀은 각 조정값의 범위를 신중하게 조정해 실용적인 결과를 내도록 설계했다. - 예를 들어 노출값을 높은 수준으로 올려도 이미지가 지나치게 하얗게 날아가는 현상을 방지하려고 했다. - 따라서 전문적인 색보정 도구보다는 UI 시안 제작 중 밝기, 색감, 대비를 빠르게 맞추는 용도에 적합하다. ## 전문 이미지 편집기를 대체하지 않는 기능 - 이 기능은 Photoshop 같은 전문 이미지 편집 도구를 완전히 대체하려는 목적이 아니다. - 복잡한 리터칭, 정교한 색보정, 고급 마스킹 작업보다는 디자인 작업 중 발생하는 간단한 이미지 수정에 초점을 둔다. - 디자이너가 작업 흐름을 벗어나지 않고 Figma 안에서 즉시 결과를 확인할 수 있다는 점이 가장 큰 장점이다. 간단한 이미지 보정이 필요한 UI·UX 작업에서는 Figma의 조정 기능을 우선 활용하고, 정밀한 편집이나 전문적인 색보정이 필요할 때만 Photoshop 등 별도 도구를 사용하는 방식이 효율적이다.

원문 읽기(새 탭에서 열림)

Figmaimage-processingphotoshopphoto-filters+1

figma·2017년 6월 25일·2분 읽기큐레이션 요약

피그마 가이드 출시 |

Figma는 사용자 요청이 많았던 Guides 기능을 도입해 디자인 요소를 정렬하고 배치할 수 있도록 했다. Guides는 자를 기준으로 빠르게 생성·이동할 수 있으며, 프레임 단위로 관리하거나 픽셀 단위로 조정할 수 있다. Layout Grids보다 간편하게 사용할 수 있는 보조선이라는 점이 핵심이다. ## Guides의 목적과 특징 - Guides는 디자인 요소의 위치를 맞추기 위한 가로·세로 기준선이다. - Layout Grids보다 생성과 조작이 빠르다. - 2017년 출시 당시 6개월 동안 약 100건의 사용자 요청이 접수될 정도로 수요가 높았다. - Figma는 이 기능을 인턴 Shirley Miao와 엔지니어 Kenrick Rilee가 함께 개발했다고 소개한다. ## Guides 표시와 생성 - 메인 메뉴에서 **View → Show rulers**를 선택해 자를 표시한다. - 캔버스 상단의 가로 자 또는 왼쪽의 세로 자 위에 마우스를 올리면 오프셋 값이 표시된다. - 원하는 위치의 자를 클릭하면 해당 위치에 Guide가 생성된다. - 자의 여러 위치를 클릭해 여러 개의 Guides를 한 번에 만들 수 있다. ## Guides 이동과 삭제 - 생성된 Guide는 얇은 빨간 선으로 표시된다. - Guide를 드래그해 다른 오프셋으로 이동할 수 있다. - 삭제하려면 Guide를 선택한 뒤 Delete 키를 누르거나 화면 바깥으로 드래그한다. - 자 보기 기능을 끄면 Guides도 화면에서 사라진다. - 실수로 위치를 변경한 경우 `Command + Z`로 되돌릴 수 있다. - 화살표 키를 사용하면 Guide를 픽셀 단위로 미세 조정할 수 있다. ## 프레임 수준의 Guides - Guide를 프레임 안으로 드래그하면 해당 프레임에 종속된 프레임 수준 Guide가 된다. - 이를 활용하면 전체 캔버스에 Guides가 과도하게 표시되는 것을 줄일 수 있다. - 프레임 수준 Guides는 최상위 프레임에서만 작동한다. - Guides가 포함된 프레임을 다른 프레임 안으로 이동하면 해당 Guides는 사라진다. ## 실용적인 활용 - 자를 켠 뒤 주요 콘텐츠의 좌우 여백이나 상하 정렬 기준을 Guide로 표시하면 배치를 일관되게 유지할 수 있다. - 여러 화면이나 컴포넌트의 공통 정렬선을 빠르게 확인할 때 유용하다. - 세밀한 간격 조정에는 화살표 키와 실행 취소 기능을 함께 활용하는 것이 좋다. - 복잡한 캔버스에서는 프레임 수준 Guides를 사용해 화면별 기준선을 관리하는 것을 추천한다.

원문 읽기(새 탭에서 열림)

Figma사용자 인터페이스layout-gridsdesign-editor+1