archuive

프레이머(Framer) CMS의 강력한 필터 기능을 활용하면 콘텐츠를 손쉽게 관리하고 사용자가 원하는 방식으로 콘텐츠를 탐색할 수 있는 인터페이스를 만들 수 있습니다. 이번 포스팅에서는 프레이머 CMS의 필터 기능을 활용해 블로그 게시물 목록을 날짜별로 구분하는 탭을 구성하는 방법을 단계별로 설명하겠습니다.1. CMS 컬렉션 설정하기우선 프레이머 CMS에 블로그 게시물 컬렉션을 만들어야 합니다. 예를 들어, 4월과 5월에 게시된 블로그 포스트가 각각 4개씩 있다고 가정하겠습니다. 다음은 이를 기반으로 한 CMS 컬렉션을 만드는 방법입니다.  프레이머 프로젝트에 CMS 컬렉션 추가: CMS 탭에서 새로운 컬렉션을 생성하고, 필요한 필드(제목, 날짜, 콘텐츠 등)를 설정합니다.데이터 입력: 해당하는 블로그 ..

Figma는 UI/UX 디자이너들이 효율적으로 작업할 수 있도록 다양한 기능을 제공합니다. 그 중에서도 도형이나 레이어를 미세하게 조절할 수 있는 Nudge Amount 설정은 작업의 정확성을 높여줍니다. 이번 글에서는 Nudge Amount를 설정하고 활용하는 방법에 대해 소개하겠습니다.  Nudge Amount란 무엇인가요?Nudge Amount는 Figma에서 화살표 키를 사용해 도형이나 레이어의 위치를 이동할 때, 한 번에 얼마나 이동할지를 설정하는 기능이에요. 기본 설정은 작은 이동(Small Nudge)은 1픽셀, 큰 이동(Big Nudge)은 10픽셀이에요. 이 값을 조절하면 작업이 훨씬 더 수월해진답니다. Nudge Amount 설정하기Nudge Amount를 설정하는 방법은 다음과 같습니..

Framer에서 손쉽게 콘텐츠를 관리할 수 있는 CMS 기능.CSM의 Settings 화면에는 페이지별 Description을 어떻게 구성해 보여줄지 설정이 가능하다. Google 검색 센터의 우수한 메타 설명을 만들기 위한 권장사항 살펴보자.좋은 예와 나쁜 예를 이해하기 쉽게 정리해두었다.

디자인 토큰을 서드파티가 아니라 퍼스트파티 기능으로 사용하구싶다..! Design Tokens 훌륭한 플러그인! 하지만 디자인 토큰은 디자인 파운데이션을 전부 다 흔들어야하는 작업이라 플러그인이기 때문에, 피그마가 급격히 변화하기 때문에, 쉽게 손대기가 망설여지는 부분이다. 관련해서 피그마 커뮤니티에서 논의중인 토픽: Design Token support in Figma Design Token support in Figma We have been managing our design system(s) for Desktop, Mobile, and TV applications in Figma for some time now and the experience overall has been great (espec..

SpaceOne의 디자인 시스템은 Figma를 적극적으로 활용하여 작업 효율성을 극대화시키고 있습니다. Component에 properties 활용도가 굉장히 높은데, 활용성을 더 증가시키기 위한 중첩 컴포넌트를 만들 경우 컴포넌트 하위에 중첩되어있는 컴포넌트들에 설정된 프로퍼티 속성들에 접근하기 어렵다는 문제가 있었습니다. 이러한 문제점들을 감안하고라도 중첩 컴포넌트가 가진 장점을 포기할 수 없어 중첩 컴포넌트를 사용하고 있었는데, 피그마에서 이 중첩 컴포넌트를 상위 컴포넌트에서 제어할 수 있는 기능을 베타 런칭했습니다! 유저들은 간단한 설정만으로 베타 기능을 사용해볼 수 있습니다. 1. 베타로 지원하는 기능 사용하려면? 컴포넌트를 선택한 뒤 좌측 패널에서 설정 버튼을 클릭. Component prop..

개발자 혹은 다른 작업자들에게 피그마 파일을 공유했는데, 그들이 이미지나 에셋을 추출하지 못한다고 할 때 두가지를 확인해야합니다. 1. 에셋에 Export 설정을 했는가? 2. 파일 자체에서 복사나 공유가 제한되어있지 않은가? 이 중에서 2번, "파일에서 복사 및 공유가 제한된 경우" 해결 방법을 알아봅니다. 파일 복사 및 공유가 제한되면 can edit 권한을 가진 작업자들의 Inspect 패널에 "Export disabled - This file's editor has disabled exporting, copying, and charing" 메시지가 뜹니다. 이런 경우, 파일의 공유 설정이 제한되어있으니 설정에서 간단하게 해결할 수 있습니다. 파일 우측 상단의 share 버튼 클릭 팝업 오른쪽 하..

Dark mode, 다크 모드 피그마 데스크탑과 웹 모두 다크모드 지원. https://bit.ly/39bdarm Redesigned auto layout, 오토 레이아웃 재설계 이제 오토 레이아웃이 더욱 강력하면서 훨씬 간편해졌습니다. 새로운 것들은 아래와 같아요. → Properties 패널 → 캔버스에서 바로 조작 가능 → Layout 옵션 (absolute position, negative spacing 등!) https://bit.ly/3L0TfZk Component properties, 컴포넌트 속성https://bit.ly/3N5TyUg 컴포넌트에 빌트인 텍스트, 부울린을 추가하거나 인스턴스 커스터마이징이 가능합니다. 디자인 시스템을 심플하게 만들고 개발에 전달하는 과정을 더 유연하게 가져갈..

부모(parents)와 자식(children), 형제 (siblings) 관계 피그마의 오브젝트(객체) 사이에는 부모, 자식, 형제 관계가 있다. 이 용어는 웹 개발이나 프로그래밍에서 유사한 관계를 설명하기 위해 일반적으로 사용하는 용어이다. 이 용어에 대해 명확하게 알아보자. OOP(Object-Oriented Programming)을 경험해보았다면, 이러한 관계는 약간 다르다. 피그마의 부모/자식 관계는 실제 상속과 관련이 없다. 피그마에서, 이러한 관계는 DOM(Document Object Model)과 더 유사하게 작동한다. 즉, 내부에 엘리먼트를 포함하고 있는 컨테이너의 개념이다. 부모(parents)와 자식(children), 형제 (siblings) 우리는 캔버스에서 오브젝트와 오브젝으가 어..

피그마는 (오토 세이브 되는..) 버전 히스토리 기능도 매우 훌륭하다고 생각했는데, 어느새 워크 플로우를 관리하기 위한 브랜치 기능까지 추가되었다. 피그마에 작성된 브랜치 문서를 살펴보았다. 최근 브로들리 사용중이다. 이전 툴과는 다르다. 첫번째 원칙으로 단순성과 일관성에 초점을 맞췄다. 브랜치를 사용하기 적절한 예제 이미 존재하는 소스를 기반으로 작업을 시작할 때 고려하면 좋다. 특히 실험적이고, 반복적인 경우 디자인 라이브러리 유지보수 메인 파일은 항상 하나로 유지됨 공통 스타일 추가하거나 수정할때 기존에 존재하던 컴포넌트나 배리언츠 수정할때 라이브러리에 새로운 콤포넌트 만들때 컴포넌트 수정 제안이 편리해짐 의사 결정권자 혹은 콜라보레이터에게 공유할 때 개발 파트에 시안을 전달하기 위해 작업을 멈춰야..

Arrange Layers 부모(parents)와 자식(children), 형제 (siblings) 관계 피그마의 오브젝트(객체) 사이에는 부모, 자식, 형제 관계가 있다. 이 용어는 웹 개발이나 프로그래밍에서 유사한 관계를 설명하기 위해 일반적으로 사용하는 용어이다. 이 용어에 대해 명확하게 알아보자. OOP(Object-Oriented Programming)을 경험해보았다면, 이러한 관계는 약간 다르다. 피그마의 부모/자식 관계는 실제 상속과 관련이 없다. 피그마에서, 이러한 관계는 DOM(Document Object Model)과 더 유사하게 작동한다. 즉, 내부에 엘리먼트를 포함하고 있는 컨테이너의 개념이다. 부모(parents)와 자식(children), 형제 (siblings) 우리는 캔버스에..