Figma Drawで自分らしさを表現

デザイナーは長年、Figmaで創造的表現の可能性の限界を押し広げてきました。限界を超えることがますます重要になり、デザイナーの役割がよりハイブリッドになるとともに、彼らは従来のサイロを打破し、ピクセルパーフェクトなデザインと表現豊かなデザインの間をより自由に行き来しています。本日、私たちはFigma Drawを発表できることに胸を躍らせています。Figma Drawは、ベクター編集のより細かな調整とイラスト用の新ツールを提供するので、ユーザーはキャンバスを離れることなく、またさらに重要なことに、作業のフローを中断することなく、自身のビジョンを実現できます。

Figma Design内でFigma Drawを使用すると、ブラシ、動的な線、段階的なぼかし、テクスチャやノイズエフェクト、パスのテキストなど、表現豊かな新ツールを中心にUIを合理化できるようになります。高精度のモックアップ用のアイコン、ウェブ用のスポットイラスト、またはソーシャルメディア用のグラフィックなど、どんなものを作成する場合でも、Figma Drawを使えばツールを切り替えることなく、効率的に作業し、素早くイテレーションできます。「Figmaは私が必要とするものがすべてが揃った、進化するプレイグランドです」とプロダクトデザイナーのAdanna Onuekwusi氏は述べています。「Figma Drawのおかげで他のツールを使用する必要が減り、ワークフローに集中することができます。」

フローを保つワークスペース

ウェブページの作成中で、即座にロゴを作成するために画面を拡大する必要があるプロダクトデザイナーでも、クリエイティブな能力を発揮するための集中スペースを必要とするブランドデザイナーでも、視覚的な表現を作成するために特別にデザインされたインターフェース、Figma Drawを活用できるようになりました。ユーザーのインスピレーションや遊び心を刺激するために、Figma Drawのパネルやツールバーを次のように整理しました。

• レイヤーパネル: フレーム、グループ、シェイプ、ベクター、画像のサムネイルプレビューを備えたレイヤーパネルをベクターデザイン用に最適化しました。これにより、さまざまな要素のナビゲートと調整がより簡単になりました。
• ツールバー: ペン、ブラシ、鉛筆ツールがすぐに使えるように再構築されたツールバー。特殊なベクター機能へのアクセスが簡単になり、関連性の低い機能が削除されました。追加のツールバーを使用すると、キャンバスにペンを置く前に線のスタイルをカスタマイズできます。
• プロパティパネル: プロパティパネルは、スライダーと大きなビジュアルプレビューでより触覚的なコントロールを提供します。また、塗り、線のスタイル、エフェクトを事前選択できるオプションがありので、事後の調整が少なくなります。

簡単で効率的なベクター編集

高品質で本番環境への準備が整ったデザインを実現するには、精密な制御とアイデアを自由に反復できるツールが必要です。Figma Drawは、より精密で強力な機能でベクター編集プロセスの問題を解決するため、より多くのアセットを作成し、キャンバスで継続的に改良することができます。「Figma Drawには私が必要とする機能がすべて揃っています」とMUTIのパートナー兼クリエイティブディレクターであるBrad Hodgskiss氏は語ります。「私は詳細な描画を作成しますが、 [Figmaで]作成する方法はシンプルです。」

ツールには以下の特長があります。

• 操作性の向上: 適切な頂点の選択、オブジェクトの整列と配置、選択されたジオメトリ間のタブ、開いたパスを閉じる、ハンドルのアップデートをより直感的に行えるようになりました。
• ブーリアン演算と線のアウトライン化の改善: ブーリアン演算と線のアウトライン化を処理するエンジンがアップグレードされ、シェイプの組み合わせや減算をよりスムーズに行えるようになりました。
• 複数ノードの編集: 効率性を最大限に高めるために、複数のベクターノードを選択して [Enter] を押し、すべてを一括処理します。Shiftキーを押しながら他のノードをクリックして選択に追加し、Commandキーを押しながらクリックして別のノードのベクトル編集に移動することもできます。(これは、別のレイヤーのジオメトリを基準に頂点をスナップする場合にも便利です。)
• シェイプ作成のサポート: シェイプビルダーツールを使用してシェイプの組み合わせや操作を行い、特徴的なアイコンやログを作成します。
• ラッソの選択: 不規則なベクターオブジェクトのグループを選択する必要がある場合や、キャンバスの密集した部分に焦点を合わせる場合、フリーハンドで選択範囲を描いて、必要なものを正確に囲みます。

自由な創造的表現

表現力豊かなツールの拡張されたパレットを備えたFigma Drawなら、その他のツールやプラグインに切り替えることなく探索や実験を行えます。ブラシでマークし、テクスチャを加えてより触覚的なアセットを作成するか、段階的なぼかしを加えてデザインに深みをつけましょう。ゲームおよびアプリ開発者のDavid Fu氏は、「Figma DrawはFigmaの可能性に対する私の理解を変えました。想像以上のインスピレーションを与えてくれます」と述べています。

スライド1 / 81 / 8

ビジュアルプロダクトデザイナー兼イラストレーター、Erica Leong氏

Figma、デザインマネージャー、Leandro Castelao

OutSystems、リードデザイナー、Bruno Figueiredo氏

Figma、プロダクトデザイナー、Tammy Taabassum

Figma、デザイナーアドボケート、Rogie King

ビジュアルプロダクトデザイナー兼イラストレーター、Erica Leong氏

Raycast、ブランドおよびプロダクトデザイナー、Inga Hampton氏

T-Mobile、デジタルデザイナー、Lydia Bazan氏

手描き風の仕上げ

• ブラシ: 書道のようなブラシで自然な線をキャンバスに配置するか、独自のスタイルを醸し出すカスタムブラシを作成します。
• ダイナミックなストローク: さまざまな小刻みな動きで完璧な不完全さを演出する線で、味があり生き生きとしたストロークを作成します。
• バリアブル幅の線 (近日公開予定): バリアブル幅のポイントツールでパスに沿って文字やバリエーションに線を追加するのが簡単になります。

テクスチャの強化

• パターン塗り: 単色や画像でスペースを塗りつぶすのと同様に、イラストの任意の部分に希望するテクスチャのパターン塗りを使用します。
• ノイズ: 写真やデザイン(ボタンなど)にざらつきを与えてアナログ的な雰囲気を出します。
• テクスチャ: レイヤー、シャドウ、グラデーションにリアルで具体的なざらつきを与えます。
• 段階的ぼかし: レイヤーまたは背景ぼかしのエフェクトを使用して、奥行の深い視覚効果を演出します。

新しいシェイプの作成

• 回転の原点: オブジェクトを選択してOpt+Rを押すと、回転の原点をより正確に設定できます。回転ハンドルの位置にカーソルを合わせると、その位置を固定することも可能です。
• パスのテキスト: 直線的や狭さなどの制限から解放され、描いた任意のベクターパスに言葉をはめ込んで芸術に変えましょう。
• リピート: ノードを直線または放射状のパターンで繰り返し、変換を反復して万華鏡のような効果を生み出します。

より迅速なイテレーションとスムーズなワークフロー

Figma Drawは視覚表現とイラストに集中するためのスペースを提供しますが、Figma Designではほとんど同じツールが手の届くところにあるため、同じ場所で作成、編集、イテレーションが可能です。ツールの切り替えを最小限に抑え、生産性を最大化することに加えて、作業をスムーズに進めることが最も重要なことだと私たちは認識しています。絵画がまだ濡れていて、アイデアに順応性があるときにエキサイティングなことが起こります。最終的に、デザインの新しいトレンドはツールだけから生まれるのではなく、それらを使って遊び、実験し、未知の領域に挑戦するデザイナーたちから生まれるのです。

Figma Drawは本日、Figma Designツールバーで全ユーザーに展開されます。詳細についてはこちらをご覧ください。私たちは、皆さんの作品を見ることと、共に新しい作成方法にチャレンジできることを楽しみにしております。