WebDesigner's Memorandumウェブデザイナーの備忘録

Figmaのバージョン管理機能を使って、デザインの変更点を管理する

IllustratorやPhotoshopなどのバージョン管理機能が存在しないデザインツールの場合は、作業前にファイルを別名保存する必要がありました。

しかしデザインデータはそこそこの容量がありますし、細かい差分を別ファイルにしていくのも面倒です(ファイル名もごちゃごちゃになりがち)。

Figmaにはバージョン管理機能があるので、それを使えば簡単に過去のバージョンに戻したり確認できます。

無料プランは管理期間が30日間のみ

便利な機能ですが、無料プランの場合は管理期間が30日間だけなので注意が必要です。

バージョンを保存してから30日経つとアクセスできなくなってしまいます。
有料プランにすると制限なくアクセスできるようになります。

現在のバージョンを保存する

ツールバーのファイル名横の「下アイコン」をクリックして、「Show Version History」を開きます。

「Show Version History」

すると画面右にパネルが表示されます。
ここに履歴がタイムライン上になって表示されるのですが、「+」アイコンをクリックして現状を名前をつけて保存できます(自動で保存された分は「autosave versions」として保存される)。

Version historyパネル

「Add to version history」にタイトルを入力して保存します。
その下の説明文は必須ではありませんが、あとで振り返るときに分かりやすいように入力しておくのがオススメです。

Versionの保存

ちなみにこの「現在のバージョンを保存」のショートカットキーはoption + command + Sなので、こちらを使った方がすぐに現在のバージョンを保存できます。

バージョンの復元

バージョンを復元したいときは、復元したいバージョンの右に表示される「・・・」アイコンから「Restore this version」をクリックすると、そのバージョンに戻ります。

バージョンの復元

非常に簡単に過去のデザインを復元したり、最新の状態に戻ってきたりできます。

著者について

プロフィール画像

@31mskz10

1997年生まれ。2016年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね