Skip to content

Latest commit

 

History

History
104 lines (60 loc) · 2.39 KB

section09.md

File metadata and controls

104 lines (60 loc) · 2.39 KB
Raw

デザイン変更 / デプロイ

Figma での作業

ヘッダーのコンポーネントの編集

auth

  1. NavBar が選択された状態にします。
  2. Logo 以外のインスタンスを全て削除します。
  3. 画面上部のメニューの「リソース」アイコンをクリックします。
  4. 検索窓に button と入力し、ローカルコンポーネントの Button クリックいます。

auth

  1. 画像のように 「Default button（Button）」が追加されたのを確認します。

auth

  1. label が選択された状態からテキストを「Default button」から「Log out」に修正します。

auth

  1. NavBar が選択された状態にします。
  2. 右メニューのオートレイアウトの詳細の設定ボタン（...）をクリックします。
  3. 「間隔設定モード」の設定で「空間を開けて配置」を選択します。
  4. 「Log out（Button）」の配置が変わったことを確認します。）

Amplify Studio での作業

デザインの更新

auth

  1. 左メニューの UI Library をクリックし、続けて画面右上の「Sync with Figma」をクリックします。

auth

  1. 画面右上の Accept all をクリックします。

auth

  1. 画面左の Navbar が選択されていることを確認し、「Configure」をクリックします。

ログアウトボタンの設定

auth

  1. 画面左の tree を展開し、Button をクリックします。
  2. 続けて画面右のメニューの Set onClick action をクリックします。

auth

  1. Action は 「Sign out this device」を選択します。

auth

  1. 画像のように表示されていれば OK です。

Cloud9 での作業

修正したコンポーネントのダウンロード

amplify pull

動作確認

PORT=8080 npm start

デプロイ

git add -u
git commit -m 'update components.'
git push origin master

-> トップへ戻る