Framer+Remix를 사용하여 웹 사이트의 #2-Fame 만들기

이것은 Advent Calender 2021 #Framer 다음날의 문장이다.
첫날 기사는여기.

다음 날 - Frame 사용

첫날부터 프레임러를 준비해 디자인했습니다.
계속 열리는 뮬란회'Kamakura MokMok Hack의 홈페이지는 프레임+리믹스가 제작한다.
사이트의 필요조건 등에 관심이 있는 사람은 첫날기사를 보세요.

소개
이사회의 목적
회의 분위기
이사회의 규칙
- 참가 방법

사이트 개요

Framer로 회의의 목적과 회의 분위기·하는 일 구성 요소 만들기

회의의 목적 내용은 다음과 같다.

#　この会の目的

鎌倉を中心として土曜日午前中からゆるく有志で集まってもくもくと
自習したり、新しい技術を試したり、個人開発したりと色々なことをしようという会と
Meetupで交流をはかることが目的です。

# この会の雰囲気とやってること

もくもく会としていますが、
OMO（オンライン・オフライン両方ありな）もくもく会の開催や時々ビアバッシュなどのMeetupの開催もあります。

リアル（オフライン）もくもく会は疫病・災害がなければ鎌倉で開催しています。
リアル開催の時はランチを鎌倉の地元向けや観光客向けのお店へ行ける人でいくおまけもあります。
鎌倉ランチ・鎌倉観光ついでに都内から参加される方もいます。

목적, 분위기, 하는 일을 추상화하면 구조적으로 이런 느낌이다.
섹션

제목(Heading)

본문(Body)

굉장히 간단하지만 Framer로 한번 디자인해보세요.

Frame으로 레이아웃

Framer에서 레이아웃을 사각형 디자인 객체 "Frame"으로 표시하고 이를 조합하여 전체 디자인을 수행합니다.그나저나 프레임의 프레임은 프레임이 아니라 Rectangle에 해당한다.

이번에는'목적'부분부터 제작하기로 했다.의도 영역에 제목과 본문이 있으므로 해당 Frame을 적절한 크기(나중에 조정)로 추가합니다.
Frame 아이콘을 클릭하고 드래그 앤 드롭을 사용하여 가로 세로 크기를 원하는 위치에 배치합니다.

이번에는 Scree의 가로 사이즈를 가득 끌어서 높이를 적당히 결정하세요.

프레임으로 대략적인 레이아웃을 완성했고 제목과 본문을 문자로 표현했기 때문에 텍스트를 넣으세요.Text 아이콘을 클릭하여 임의의 위치에서 드래그 앤 드롭으로 가로 크기를 적절하게 조정합니다.

불필요한 배경을 취하다

배경색은 기본적으로 파란색 계열의 색이기 때문에 먼저 배경색을 모두 무색으로 바꿉니다.

객체의 폭 조정

현재 텍스트 객체의 폭은 Screen의 폭과 같습니다390px.
물론 Screen 크기 및 Section의 Frame 객체, Heading 및 Body의 Frame 객체 폭을 수정해도 텍스트 객체는 고정390px됩니다.
텍스트 객체의 폭을 변경하여 향후 수정에 대비할 수 있습니다.
Width 속성 옆에는 선택기가 있고 여기서 선택Relative합니다.Relative의 값은 정수가 아니라 백분율이기 때문에 여기100%로 정합시다.

참고로 Figma와 Rectangle의 Constrains 중 선택Left and right이 같다.Framer는 가로 값을 변경할 수 있도록 CSS에 더 가깝게 만듭니다.

Width/Height 속성에 대한 추가 값

세로와 가로는 방금 소개한 4가지Fixed,Relative,Fraction,Auto가 있다.각각 소개하다.
타입
타입
설명
FixedInt고정 크기 및 정수 입력
RelativePerecentage가변 크기, 백분율로 입력
FractionInt다음은 Stack을 통해 폭을 결정하는 비율입니다.
AutoInt컨텐트(텍스트의 경우 문자 수)에 따라 가변 가능

기타, Frame 등록 정보 설명

Frame의 속성은 향후 설계 조정 등에 앞서 미리 설명됩니다.자세한 사용법을 추가합니다.

Position

x, y 값의 설정입니다.상위 객체 중 하나에 따라
값
설명
T
탑
L
Left, 왼쪽
R
오른쪽
B
보텀은 아래를 뜻합니다.
각 쪽의 방망이를 클릭하면 파란색 방망이가 된다.이 파란색 스틱이 기준입니다.
즉, 왼쪽 상단에 막대기가 하나 있는데 대상은 부모 대상의 왼쪽 상단에 해당하는 px값에 있다.

Size

Width/Height

위에도 말씀드렸지만 세로 사이즈입니다.

아이콘
설명

세로 너비를 auto로 설정

고정 세로 너비

너비를 auto로 설정

고정 너비

MinWidth/MinHeight, MaxWidth/MaxHeight

CSS의min-width,min-height,max-width,max-height와 같다.

Styles

배경색, 투명도, 필렛, 회전, 프레임 및 섀도우를 조정할 수 있습니다.

값
설명
Opacity
투명도는 CSSopacity와 같습니다.소수점 입력(0-1)
Visible
CSSvisibility: hidden/visible와 동일하게 표시/숨기기
Radius
각환, CSS의border-radius와 같다.상하 좌우 모두 적응 가능
Rotation
회전은 CSStransform: rotate()와 같습니다.입력 각도
Fill
배경색은 CSSbackground와 같습니다.SOLID(단색), Lireear(수평, 수직 그래디언트), Radial(원형 그래디언트), image(이미지 배경)
Border
프레임은 CSSborder와 동일
Shadows
섀도우는 CSSbox-shadow와 같습니다.다중 설정 가능
이러한 느낌은 각종 속성이 Figma보다 CSS의 명칭 값에 가깝기 때문에 CSS를 접한 사람들이 쉽게 이해할 수 있을 것이다.
따라서 3일째에는 Text에 대한 등록 정보를 설명합니다.
3일차 기사가 여기 있어요.