2018.06.08

Web制作

Illustratorで作成した線画をUIデザインツールFigmaにコピーする方法

Illustratorで作成した線画をUIデザインツールFigmaにコピーする方法のアイキャッチ画像

Figmaでイラストやアイコンを作成することはもちろん可能ですが、やはり細やかな表現はIllustratorの方が一日の長がありますし、何より使い慣れているユーザーが多いでしょう。

そんな方に朗報です。なんとUIデザインツールのFigmaで、Illustratorで作成した線画(ベクター状態)をコピーできるんです。過去Illustratorで作成した今までのイラストやアイコンを「ベクター状態」でFigmaでも使用できる。となるとこれはもうやらない手はないです。

やり方は簡単です。今回はその方法をご紹介します。

Illustratorで線画を作成しコピーする

Illustrator画像

まずはIllustratorでイラストやアイコンを作成します。
作成できたら選択しコピーをしましょう。

Figmaに移りペーストする

Figma画像01

次にFigmaに移りペーストします。
するとFigmaにIllustratorで作成した線画がコピーされました。先の太さや色の塗りなどの情報もすべてIllustratorで作成したままです。

コピーした線画は編集が可能

Figma画像02

もちろんコピーした線画はFigma上で編集も可能です。先の太さ、拡大縮小、塗りなどを変更することが可能です。

どこまで情報が維持されるか試してみた

IllustratorとFigmaの比較

かなり複雑なイラストがどこまでFigmaで維持されるか試してみたところ、短縮化されてコピーされました。ある程度の限界があるみたいですね。まあUIデザインツールなので、このクラスのイラストはラスタライズ化など画像化して使用したほうが良いでしょうね。

最後に

まさかIllustratorで作成したイラストやアイコンなどの線画がそのままコピーペーストできるとは思いませんでした。なかなか便利なのでみなさまもご活用ください。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する