본문 바로가기

UX 디자인

[피그마] 여러개 선택된 레이어 한번에 컴포넌트 생성하기 (Multiple Components) 피그마에서 컴포넌트를 생성할 때 여러개의 레이어를 한번에 컴포넌트로 생성해야 할 때가 있습니다. 보통 우클릭이나 단축키로 컴포넌트 생성이 가능하지만, 일괄로 레이어를 컴포넌트로 생성하는 방식은 우클릭이나 별도 단축키로 지원되지 않습니다. 한번에 여러 컴포넌트를 생성하는 방법은 여러 레이어를 선택한 상황에서, 상단 피그마의 컴포넌트 메뉴의 옵션 메뉴를 통해 선택이 가능합니다. 상세한 버튼의 위치와 이름은 아래 이미지를 참고해 주시기 바랍니다(피그마 상단 메뉴바 컴포넌트 메뉴 아이콘의 'Create multiple components' 메뉴 선택).
[피그마] 홈페이지(웹페이지)를 피그마에 그대로 가져오기 (html.to.design) 'html.to.design'은 웹페이지를 피그마에서 수정이 가능한 디자인 파일 형태로 그대로 가져올 수 있게 해 주는 플러그인입니다. 비슷한 기능의 플러그인들은 많았지만, 완성도면에서 부족한 면이 많은 것들이 대부분이었다고 하면 'html.to.design'의 경우 꽤 신뢰할만 한 수준의 품질을 보여 줍니다. 설치 및 사용방법 직관적인 이용방식을 보여 주는데, 플러그인 설치의 경우 여타 다른 플러그인처럼 피그마 내부에서 '플러그인' 버튼을 눌러 검색을 시작함으로써 설치 및 실행이 가능합니다. 사용방법은 플러그인 실행 시 나오는 주소창에 가져오고자 하는 페이지의 URL을 입력한 후 사이즈 등을 고르는 과정을 거쳐 임포트 버튼을 누르면 해당 웹페이지의 디자인이 간직된 신규 프레임 레이어가 생성된 것을 확인..
포토샵 파일 피그마(Figma)로 변환하기 (PSD to Figma) 포토샵에서 피그마 파일로의 변환은 어도비에서 지원하는 공식 기능은 없습니다. 크게 두 가지 방법이 있는데, 컨버터를 이용하는 방법과 수동으로 옮기는 방법입니다. 2023년 07월 기준으로 PSD를 FIG 파일로 변환하는 작업을 시도해 본 결과, 제가 갖게 된 결론은 '불가능'이다이긴 합니다. 다음 그 방법에 대해 소개해 드리고, 결과가 어떠한가에 대한 내용도 텍스트로 간략히 덧붙여 봅니다. 포토샵 파일이 벡터 위주로 레이어 관리가 잘 된 경우에 아래 컨버팅이 유효할 수 있으나, 범용적으로 활용성이 높다고 볼 수는 없습니다. 쉽게 말해 불가능하다고 생각하는 것이 더 좋다는 결론을 다시 한 번 말씀드리며, 관련 내용 전달을 드립니다. 1. Magicul 컨버터 사용 Magicul 컨버터 이 컨버터는 유료입니..
피그마(Figma) 아이콘 다운로드 무료 플러그인(Plugin) ‘아이코니파이(Iconify)’ 피그마(Figma)는 다양한 아이콘을 무료로 다운받을 수 있는 플러그인을 제공해 줍니다. 그 중 유료로 제공되는 것들도 있는 반면, 무료로 제공되는 것들 중에도 높은 기능성을 통해 실제 업무에 활용하기 충분한 성능을 보여 주는 플러그인도 많습니다. 그 중 가장 오래된 피그마 플러그인이자 또 가장 많이 다운로드된 플러그인 중 하나인 ‘아이코니파이(Iconify)’를 간단한 활용법과 함께 소개해 드리고자 합니다. 아이코니파이 (Iconify) 쉬운 검색 및 아이콘 세트별 분류 쉽게 키워드만으로 원하는 아이콘을 검색 가능하며, 특히 아이콘 세트별로 분류가 되어 있어, 원하는 아이콘 스타일을 일관되게 적용할 수 있습니다. 무료이자 오픈소스 라이선스 무엇보다 무료로 매우 양질의 아이콘들을 종합, 검색할 수 있는 ..
포토샵 시프트(SHIFT) 키로 고정 비율로 크기 변경 기능 복구하기 포토샵은 업데이트될 수록 끔찍한 기능이 추가되는 걸로 최근 유명한데, 그중 최고 중 하나는 크기 변경 시에 가로세로 비율을 강제로 고정시키는 것입니다. 포토샵은 라이트 유저가 쓰는 툴이 아닌데, 왜 이런 기능을 넣었는지 알 수 없습니다. 2019년부터 적용된 사항인데, 다행히 옵션 변경을 통해서 원래의 작동 방식처럼 시프트 키를 활용해서 가로세로 비율을 고정하게 하는 것이 가능합니다. 방법은 'Preferences > General > Use Lagacy Free Transform' 기능을 체크해 활성화하는 것입니다. 직역하면 과거의 트랜스포밍 방식을 사용한다인데, 저는 이전 방식이 더욱 익숙하고 또 더 나은 방법이라고 보기 때문에 포토샵 새로 설치 시 기본적으로 해당 옵션을 체크하고 사용하는 편입니다.
피그마(Figma) 오토 레이아웃 스페이싱 모드(spacing mode) 단축키로 빠르게 변경하기 (packed vs space between) 피그마 오토 레이아웃(auto layout)의 핵심 기능 중 하나는 자식 요소들의 배치 방법을 packed(고정 여백으로 나열) 또는 space between(여백을 자동으로 나열) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다. CSS의 flex 레이아웃 모델을 참고한 이 기능은 여러 엘리먼트를 배치하는 과정을 자동화시켜 주기에 매우 큰 생산성 향상 효과를 선사해 줍니다. 다만 마우스만을 통해 제어하기에는 더보기 레이어팝업을 확인한 후 적용해야 한다는 점에서 다소 사용성이 떨어지는 측면이 있습니다. 피그마는 약간의 작업속도라도 단축시키기를 원하는 사용자들을 만족시키기 위해 스페이싱 모드에 대한 단축키 또한 지원을 합니다. 오토 레이아..
포토샵 글리프 대체 팝업 안 뜨게 하기 (글자 팝업) 이런 끔찍한 기능을 누가 만들었는지 모르겠지만, 포토샵에서 텍스트를 입력하다 보면 자체적으로 대체 문자가 있는 글자를 인식해서 대체 문자로 변경할 것인지를 질의하는 팝업이 생성되곤 합니다. 작업 흐름이 깨지는 것도 모자라, 생성 빈도수가 매우 높기 때문에 전체 작업 효율에도 지대한 악영향을 줍니다. 환경설정의 값을 변경해 해당 팝업이 생성되는 것을 중단시킬 수 있습니다. 영어 버전의 경우 Enable Type layer glyph alternates를, 한글 버전의 경우에는 ‘문자 레이어 글리프 대체 활성화'라는 옵션을 비활성화하면 됩니다. 이런 끔찍한 기능을 만든 어도비는 반성 좀 하기 바랍니다.
피그마(Figma)에서 트랙패드 줌(핀치줌, Pinch zoom)이 안 되는 문제 2022년 4월 기준으로 맥OS 버전의 피그마 데스크탑 앱에서 트랙패드를 통한 줌인, 줌아웃 인터랙션(핀치줌, Pinch zoom)이 작동하지 않는 이슈가 발견됐습니다. 해당 이슈는 연초부터 보고되기 시작됐으며, 피그마 공식 커뮤니티에에서도 화제가 됐습니다. 글을 작성하는 4월 24일 기준으로, 현재 피그마의 공식적인 답변은 다음과 같습니다. 피그마는 MacOS의 버그 현상으로 피그마 앱과는 무관하다는 의견을 냈네요. 피그마가 대처법을 강구하고 있는 사이에 불편을 겪고 있는 사용자들이 해당 스레드에 자신들이 발견한 대처법을 공유하고 있습니다. 그 중 유효해 보이는 대처법 중 일부를 공유하오니, 혹시 해당 버그로 인해서 불편을 겪고 계신 분이라면, 활용해서 효율성을 제고해 보시기 바랍니다. 알아 둬야 할 ..
외주/과외 문의

티스토리툴바