728x90 반응형 SMALL 피그마3 [Figma] 기획서 양식 만들어보기( '오토레이아웃' 활용) 서비스기획자로 일하면 기획서 양식 너무 필요합니다. (너무 당연한 얘기네요 ㅎㅎ)대부분은 회사에서 기본 템플릿이 있을텐데요.오토레이아웃을 활용해보기 위해서 기획서 템플릿을 만들어보려고 합니다!아래 이미지의 기획서 양식을 피그마로 만들 수 있나요?(바로 스크롤해서 답안을 확인하지 말고, 피그마에 직접 만들어본 후 답안을 확인해보면 여러분 성장에 더 많은 도움이 될 거에요! :) ) 꼭꼭꼭!!! 피그마로 할수 있는 만큼 해보고 아래 내용을 확인해 주세요!타이틀 만들기칩 만들기Description 영역 만들기만들어진 오토레이아웃 합치기프레임 추가(W: 1920, H: 1080)생성된 프레임에 만들어진 오토레이아웃을 적당한 위치에 배치최대한 잘 따라올 수 있도록 상세하게 설명 드려보았어요!답안을 보면서 직접 .. 2024. 11. 13. '오토레이아웃'을 활용하여 팝업 만들어보기(2탄) 팝업을 완성해볼게요!1탄: 타이틀과 메시지 영역 추가2탄: 버튼 추가 및 팝업 완성(+컴포넌트 활용까지)오토레이아웃으로 아래 팝업을 피그마로 만들 수 있나요?추가 기능: 팝업 내 텍스트 내용이 길어지거나, 짧아지더라도 [취소], [확인] 버튼은 내용 길이에 따라 자동으로 간격 조정됨 오늘은 완성해봐요! 버튼 만들기1. 텍스트 ‘취소', ‘확인' 타이핑하여 만들기(단축키: T)2. 추가한 텍스트에 각각 오토레이아웃 추가(단축키: Shift + A)3. 오토레이아웃 각각 색상, corner radius, 크기, 테두리 설정(설정하고 싶은 색상으로 선택하세요.)4. 2개의 오토레이아웃을 모두 선택한 후 오토레이아웃 추가5. 버튼 위치를 좌, 우로 변경하기 위해, 전체 오토레이아웃 선택 후 우측패널 내 .. 2024. 11. 8. '오토레이아웃'을 활용하여 팝업 만들어보기(1탄) 팝업은 블로그 글이 너무 길어질 거 같아서 2개로 나눠서 설명드리려고 합니다! 요점 이해 부탁드려요!1탄: 타이틀과 메시지 영역 추가2탄: 버튼 추가 및 팝업 완성(+컴포넌트 활용까지)먼저, 오토레이아웃으로 아래 팝업을 피그마로 만들 수 있나요?추가 기능: 팝업 내 텍스트 내용이 길어지거나, 짧아지더라도 [취소], [확인] 버튼은 내용 길이에 따라 자동으로 간격 조정됨 피그마로 만들기 어렵다면 저와 같이 한번 만들어봐요 :) 1. 텍스트 '타이틀'과 '메시지'를 타이핑하여 만들고(단축키: T), 굵기나 크기를 설정(저는 '타이틀'에 bold 했어요) 2. 추가한 '타이틀'과 '메시지' 텍스트에 각각 오토레이아웃을 추가(단축키: Shift +A)각각 오토레이아웃을 추가하는 이유: 오토레이아웃별로 설.. 2024. 11. 5. 이전 1 다음 728x90 반응형 LIST
