セルフリフォーム - 作り方

Figmaでの編集前の事前準備

1. 以下のページで編集対象のスペースを選択する。
セルフリフォーム

2. URLの「Click」リンクをクリックする。

3. 画面右上の「Open in Figma」をクリックする。

4. Figmaのアカウントにログインする。
googleアカウントをお持ちの方は、googleのアカウント情報でもログイン可能。

[Sign up]の場合

[Log in]の場合

5. 左の「Pages」のタブより、（Guidの下の）ワークスペースを選択する。
※ 選択肢がいくつかある場合は、ご希望のサイズの画像をお選びください。
A：Basicサイズの画像
B：Standardの画像
C：Organizationの画像

6. 編集したい画像を選び、編集を開始します。

[00:52] ①パーツを動かす方法

1. オブジェクト一覧から使用したいものを選択する。

2. 配置したい場所で右クリックし、「paste here」をクリックする。

3. オブジェクトをドラッグすると移動することが可能です。

[01:52] ②パーツを反転する方法

1. 反転させたい画像を右クリックする

1. 「Flip horizonal」もしくは「Flip vertical」を選択する。
　　＊Flip horizonal：左右反転
　　＊Flip vertical：上下反転

1. オブジェクを選択する。

2. ４隅の◯のどちらかを選択し、ドラッグするとオブジェクトのサイズを変更することが可能です。

[02:47] ④パーツを配置する方法（配置変更）

1. 画像を重ねて配置したい場合、上に配置したい画像を右クリックする。

2. 「Bring to front」を選択する。

[03:11] ⑤テキストを追加する方法

1. 左上のツールバーから「T（テキスト）」を選択する。

2. スペース上の好きな場所をクリックし、文字を入力する。

3. 文字を選択すると右のタブに「Text」編集ツールが出現
文字のフォント、サイズ、配置などを編集することが可能です。

[04:09] ⑥テキストの向きを変更する方法

1. レイアウト下にある「Textサンプル」をコピーして使用します。

2. スペース上の好きな場所で右クリックし、「paste」を選択

3. 「text」の文字を削除して、好きな文字を入力する

[05:13] ⑦好きな形に切り抜く(クリッピングマスク)

1. 編集したい画像を選択し、左上のツールバーからペンを選択する。

2. クリックで点を描きながら、切り抜きたい部分でオブジェクトを囲む。

3. 囲み作業が完了したら、右のツールバーの「Fill」をクリックする。

4. 左上のツールバーの「Done」をクリックする。

5. 切り抜きたい画像を右クリックし、「Bring to front」を選択する。

6. 「Shiftキー」を押しながら、背景のグレーの画像と切り取りをしたい画像の両方を選択する。

7. 上のツールバーの丸いマークをクリックすると、画像が切り取られます。

※切り取りを解除する方法※

1. 元に戻したい画像をクリックする。

2. ツールバーにある「Group」の左にある三角をクリックする。

3. 下に出てきた「Victor」をクリックする。

4. 上の黒いツールバーにある四角いマークをクリックすると、元の画像に戻すことができます。

会議室の作成方法

1. ギャラリーのAsset - Accessoryページより会議室のサンプルページのコピーを作成する。

2. 「pages」タブより「private meeting room」を選択する。

3. 使いたい会議室を選択し、右クリック→「copy」でコピーする。

4. 貼り付けしたいスペースの画像に戻り、スペース画像をクリックして全体を選択。

5. 文字左の点々マークをクリックし、出てくるポップアップの「size」の数字を「80」に変更する。

6. コピーしていた会議室の画像を、右クリック→「paste here」で貼り付け、赤いグリッド線に合わせて配置する。

[06:53] ⑧完成したレイアウトを書き出す方法

1. レイアウトの編集が完了したら、背景を含めてレイアウト全体をドラッグして選択します。

2. 右クリックをして、「Group selection」をクリックすると、選択したオブジェクトがグループ化され、全てが１枚の画像になります。

3. グループ化した画像を選択し、「＋」から「JPG」を選択する。

4. 「Export Group」をクリックすると画像が保存されます。

※グループ化を解除する方法※

1. グループ化を解除したい画像を選択し、右クリックします。

2. 「Ungroup」を押すと、グループ化を解除することができます。

画像の圧縮

1. Figmaの「Guide」ページにある説明欄に、圧縮サイトを記載しております。

2. 2に記載のあるリンクをクリックすると圧縮サイトが開きますので、赤枠の「Select images」から該当のレイアウトを選します。

3. 画像がアップロードされたら、右下にある「Compress IMAGES」をクリックし、画像を圧縮します。

3. 画像の圧縮が完了したら、以下のボタンからダウンロードします。

4. ダウンロードした画像をoViceの設定画面よりアップロードすると、オリジナルの背景としてお使いいただけます。

Figma上で画像を3D背景に合わせる方法

1. Figma画面左上の赤枠のボタンをクリックする

2. 「Plugins」ボタンをクリックする

3. 検索窓に「Ease Isometric」と入力して、「Ease Isometric」にマウスを移して右側の「Run」ボタンをクリックする

4. 「Run」ボタンをクリックすると下記の画面となります。 これでプラグインの導入は完了しました。

5. あとは、画像を選択して右クリック→Pulugin (赤枠)を選択→Ease Isometric (オレンジ枠)を選択する

6. 以下の赤枠で囲んだ部分で出ている選択肢を選択すると画像が3D背景に合わせる形で調整可能です。

レイアウトアップロード時の縦横比について

①figmaから確認する

1. 作成したレイアウトをクリックして選択いただき、レイアウトの下部に表示された数値11

1. figma内右側のプロパティから確認する Inspect＞Properties項目のWidth（横）、Height（縦）

オリジナルレイアウトのアップロード方法