unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
CSS
おしゃれなSVGファイルを無料で扱っているunDrawのSVGファイルを、無料から使えるデザインツールであるFigmaで加工して、SVGファイルをCSSでアニメーションさせるための下準備の手順を紹介します。
unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順
unDrawでSVGファイルをダウンロード
まずはunDrawでSVGファイルを選択してダウンロードします。
https://undraw.co/
無料で商用にも使えます。
FigmaでSVGを修正
次にFigmaでSVGを修正します。
https://www.figma.com/
Figmaは無料から使えるデザインツールで、UI/UXのデザインやSVGの作成、編集などいろいろなことができます。
登録するかGoogleのアカウントでログインする必要があります。
不要な部分を削除
Figmaにログインしたら、新しいキャンパスを作成して、そこにダウンロードしたSVGファイルをドラッグ・アンド・ドロップします。
そして、影や、使わない部分などの不要なパスを削除していきます。
色を調整
サイトやアプリのイメージに合わせて、色を調整していきます。
Linearでグラデーションを付けたいときは、複数選択しているとグラデーションの方向を変更することができません。
一つずつ選択すれば方向の変更ができます。
パスの調整や付け足したいものがあれば作成する
パスの調整や付け足したいものがあれば作成します。
この時点で、アニメーションを意識して調整できていることが重要です。
これができていないと、再度微調整に時間を取られることになります。
グループ化して名前をつける
不要な部分を削除して、パスの調整が終わったら、グループ化して名前をつけます。
後ほど、この名前がid属性としてexportできるようになるので、それを意識したid名にしておくといいです。
Exportする
Exportsの欄で、SVGを選択します。
Contents Onlyにチェックが入っていることを確認します。
そして、Include “Id" attributeにチェックを入れます。
そしてexportします。
特にId attributeへのチェックをすると便利で、グループ化したときの名前のままでexportされる使えるようになるので、忘れずにチェックをいれましょう。
背景が不要の場合は、Bavkgroundの欄の Show in exportsのチェックを外しておくといいです。
以上が下準備です。
後は、ダウンロードしたSVGファイルをプロジェクトに取り込んでいけば利用することができます。