Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DIST.39「Figmaを使ってベクターイラストを描く!」
Search
Miki Kuramata (nico)
June 04, 2023
Design
1
1.1k
DIST.39「Figmaを使ってベクターイラストを描く!」
2023年6月2日開催 DIST.39「みんなのFigma」LT資料です!
https://dist.connpass.com/event/281775/
Miki Kuramata (nico)
June 04, 2023
Tweet
Share
Other Decks in Design
See All in Design
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.2k
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
220
アフォーダンスとシグニファイア
ryokanakai
0
290
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
170
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
760
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
380
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
220
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
Design System for training program
mct
0
120
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
430
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
0
180
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing for Performance
lara
604
68k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
The Invisible Side of Design
smashingmag
297
50k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Designing the Hi-DPI Web
ddemaree
280
34k
Why Our Code Smells
bkeepers
PRO
334
57k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Transcript
00 Figmaを使って ベクターイラストを 描く! 倉又美樹(まるみ) @nicoicon_design
1 倉又美樹(まるみ) @nicoicon_design Web/DTP/UIなどをやるデザイナー イラストを使ったデザインが好き イラストを描くのも好き IllustratorとFigmaを 行ったり来たりする
2 イラストを描く時だいたいIllustratorなのですが Figmaでデザインする機会が増えてきました 色調整などはFigmaで行うこと多し
3 LEVEL 1 植木鉢に花を咲かせる Figmaの「楕円」と「長方形」で描画する
4 前提:イラストは があればある程度描ける!! •▲▪の形 楕円 長方形 楕円を変形 楕円を変形
5 LEVEL 2 虹・雨・雲を描く これらすべてFigmaで描けます
6 構造はこんなかんじ
7 円グラフを描く要領で 複数の円弧を重ねると虹が描けます ポイントは「円弧」
8 LEVEL 3 グラデーションでリアルめな表現 「線形」「放射状」グラデーションは便利
9 いちごを拡大 粒部分といちご本体の グラデーションで 光を表現
10 いくらの粒を拡大 「放射状」グラデーションの集合体
11 補足 ブーリアングループを併用すると便利です 特に「選択範囲の結合」 めちゃ便利
12 これらの技術を活用して、 良きイラスト+デザインライフを! ご清聴ありがとうございました!