최초의 Amplify Studio

개시하다
AmplifyStudio 활용
React 구성 요소를 생성하기 전에
나는 일련의 절차를 기록하고 싶다.
Amplify Studio
설계 도구Figma를 Amplify로 제작한 어플리케이션
연결 가능한 서비스.AmplifyStudio 에서 제작된 디자인
React 구성 요소로 변환Figma에 생성된 어플리케이션 측면에서 사용 가능
무사이즈/저사이즈 서비스.
참조: Introducing AWS Amplify Studio
전체 프로세스

Amplify 생성 애플리케이션

AmplifyStudio

효율성

AmplifyStudio에 로그인

Amplify Studio

에 Figma 파일 읽기

Amplify 응용 프로그램 측면pull에서 React 구성 요소 생성

1. Amplify 애플리케이션 만들기
우선 리액트 기반의 암플리파이 앱을 만든다.
이번에는 상세한 내용을 생략하도록 허락해 주십시오.
Amplify 자습서 등을 참조하십시오.
2. AmplifyStudio 활성화
다음은 1에서 만든 Amplify 애플리케이션의 설정입니다.
AmplifyStudio를 활성화합니다.
절차.
Amplify 어플리케이션 설정>Amplify Studio 설정

3. AmplifyStudio에 로그인
AmplifyStudio 인증은 AWS 인증
따로 관리하니까.
이번 일의 계정을 발행하다.
AWS 계정의 설계자 및 마케팅 담당자가 필요하지 않음
하지만 쉽게 접근할 수 있는 환경을 만들 수 있을 것 같다.
절차.
AmplifyStudio 설정
'초대 사용자' 에서 자신의 메일 주소로 로그인합니다.
(사용 권한이 개인 개발인 경우 먼저 선택Amplify임시 비밀번호를 보내니까.
메일 주소와 임시 비밀번호로 비밀번호를 다시 설정하면서 로그인합니다.

4. AmplifyStudio에 Figma 파일 읽기
AmplifyStudio에 로그인할 수 있는 경우
드디어 Amplify Studio가 Figma 파일을 읽게 되었습니다.
절차.
4-1. 사용할 Figma의 파일 URL 복사

4-2.
Design>UI Library>Get Started 붙여넣기>4-1 URL을 클릭

참고 자료
5. Amplify 애플리케이션 포트pull에서 React 구성 요소 생성
마지막으로 Amplify 애플리케이션에서
Amplify Studio의 구성 요소
코드에 React 구성 요소로 pull을 입력합니다.
절차.
※ npm 시

Full access

npm install -g @aws-amplify/cli

Amplify의 애플리케이션 ID와 환경 이름을 사용자 환경에 맞게 변경하십시오.
예제)
적용 ID: amplify pull --appId {アプリケーションID} --envName {環境名}환경 이름: hoge_123dev참고 자료
최후
수고하셨습니다.
AmplifyStudio 활용
React 구성 요소 생성이 완료되었습니까?
만약 이 보도가 무슨 도움이 된다면 매우 좋겠다.
아름다운 Amplify 생활을 보내세요.