InkscapeのSVGをFigmaにインポートする方法〈互換性抜群〉

Inkscapeで保存したSVGをFigmaにインポートする方法を教えます。インクスケープで制作したデザインがFigmaでちゃんと読み込めるのか知りたい人におすすめの内容です。


{tocify} $title={Table of Contents}
Ads
Amazon Audible｜プロの声優や俳優の朗読が12万冊以上聴き放題で楽しめる〈30日間無料〉



まず、インクスケープでSVGを保存します。インクスケープでは様々なタイプのSVGを保存できますが、Inkscape SVGで保存すればOKです。


そうしたら、Figmaを開きます。ダッシュボードから「ファイルをインポート」を押してSVGを開こうとすると、以下の赤枠で囲ったようにエラー表示が出てきます。

なので、黄色で囲った「デザインファイルを新規作成」からキャンバスを開きます。

ファイルから直接Inkscape SVGをキャンバスへドラッグアンドドロップしてください。そうすると、以下のように途切れます。

インクスケープで保存したデザインのサイズが大きいと、Figmaで開いたときに途切れた形になりますが大丈夫です！

Ctrlを押しながらマイナスキーでズームアウトしていきます。キーボードにプラス/マイナスキーがない場合は、Ctrlを押しながらスクロールすればOK。

ズームアウトすると、ちゃんとすべてのデザインがキャンバスに収まっているのがわかります。

そうしたら、右クリック「グループ解除」をクリックします。これを何回か繰り返してください。多分1回だけだと、すべてのグループが解除されないと思います。

すべてのオブジェクトをグループ解除すると、左サイドバーにある「レイヤー」にパスが一覧で表示されるのでわかりやすいですね。

Figmaはデフォルトでキャンバスの色がダークグレーになっているのでちょっと見づらいです。右サイドバーにある「背景」から白に変えられます。


これで、Inkscape SVGをFigmaにインポート完了です。めちゃくちゃ簡単でした。

最後に｜InkscapeとFigmaの互換性

以上、InkscapeのSVGをFigmaにインポートする方法を説明しました。

FigmaはUI/UXデザイナーが扱うものだと思ってたから今まで全く興味がなかったんだけど、実際に始めてみて"思いっきりグラフィックソフトじゃん！"と驚いてる。

まさかSVGを出力できるとはね。ちなみに、Figmaで保存したSVGもインクスケープに何の問題もなくインポートできるよ。

両者の互換性が抜群なので、Figmaでちょっと本格的なロゴ制作なんかもしてみたい。

ただ、Figmaはすごく便利だけどインクスケープのような豊富なパスエフェクトがないから、あまり複雑な造形のデザインはできないのが欠点。

プラグインを入れたらどこまで作れるのか今度検証してみます。


最後までお読みいただきありがとうございました。


　You may also like : 

• Inkscapeを使うのに最適なおすすめノートパソコンを厳選
• 快適に過ごせる大きいサイズの昇降式PCデスクをサイズ別に紹介
• エモい手書きの日本語フォントをAdobe Fontsから厳選
PR 初心者でも安心！たった10分で出来るWordPressブログの始め方