반응형 피그마 튜토리얼 반응형 4 [피그마] figma 업데이트된 Variants 기능을 알아보자(+기존 컴포넌트 레이어 정리하기) figma 업데이트된 Variants 기능을 알아보자(+기존 컴포넌트 레이어 정리하기) 안녕하세요. 당근입니다. 새해도 됐고, 피그마 업데이트 후 달라진 가장 중요한 이슈중에 하나로 속할 컴포넌트 레이어 - Variants 에 대해 드디어! 알아보겠습니다. 그동안 포스팅해야지~ 하다가 요즘에 웹 이슈를 다루고 있지 않기도 했고, 이런 저런 핑계로 미뤄뒀었는데요. 이번 포스팅에서는 제가 만들어둔 예전 Asset에 일부를 떼와서 최근 업데이트 된 기능을 어떤식으로 적용하는지 실제로 사용해보면서 테스트해보겠습니다. 복잡한 UI키트는 전체적인 구조를 파악하는 데는 좋지만 실습에는 방해가 돼요. 그래서 일부만 더미로 떼오고 이래저래 뭔가 만들어가면서 Variants를 적용해볼게요. 그럼 시작할까요?! 여기에 여러.. 2021. 1. 8. [피그마] figma에서 히스토리 저장으로 파일 버전 관리하기 [피그마] figma에서 히스토리 저장으로 파일 버전 관리하기 안녕하세요. 당근입니다. 오늘은 피그마에서 히스토리 저장으로 파일 버전을 손쉽게 관리할 수 있는 팁을 공유해드릴게요. 피그마에서는 저장이 자동으로 되다보니 한 파일에 계속 덮어쓰듯이 자동저장이 되는데요. 현재 시안을 기록하고 싶을 땐 버전 히스토리를 저장하여 남겨두실 수 있습니다. 피그마에서 메뉴버튼을 눌러 file - save to version history에 들어가세요. 잘 알아보실 수 있게 이름과 간단한 설명을 추가해주시고 save 버튼을 누릅니다. 그런다음에 file - Show version history에서 저장된 버전을 보실 수 있어요. 이렇게 오른쪽 프로퍼티 탭에 버전히스토리가 보이게됩니다. 여러가지 자동 저장 시안들도 남아있.. 2020. 6. 1. [피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중이라 차근차근 해보면서 가끔은 삽질도 하면서? ... 공부해나가는 중입니다. 오늘은 버튼을 만들어볼건데 텍스트를 기준으로 여백을 유지하면서 자동으로 크기가 늘어나는 버튼을 만들 것입니다. 이렇게 말이죠. 먼저 버튼을 만들고 Create Component 해줍니다. 버튼 안에 있는 텍스트의 위치가 박스의 중앙에 위치하도록 Constraints를 설정합니다. Paragraph도 가운데 정렬해주셔야 텍스트 수정할 때 용이하겠죠. 텍스트의 가로크기를 확인하신 다음 박스를 다시 선택하시고 텍스트 크기+양옆 여백(패딩)을.. 2020. 3. 3. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑 툴은 Adobe XD와 스케치(+제플린)이 또 유명한데.저는 스케치는 써본적이 없고 XD만 한 프로젝트 하는 김에 끄적끄적 사용해 본 경험이 있습니다.스케치는 맥용 툴이라 윈도우 사용자분들은 포토샵+제플린 플러그인 설치해서 사용하시더라고요. 조만간 스케치도 맥북에 깔아서 이것 저것 테스트 해보려고합니다.일단 오늘은 브라우저 기반으로 어떤 운영체제에서도 사용이 가능한 피그마(Figma)를 테스트해볼겁니다.설치 이외에 어느 정도까지 해보고 테스트를 할 지도 잘 모르겠어요. 일단 써봅니다. https://www.figma... 2020. 2. 25. 이전 1 다음
