Figma用Mapsicleプラグイン

Figmaは、デザイナーとチームが効率的に共同作業を行うのに役立つクラウドベースのデザインツールです。ブラウザアプリであり、非常に高速で、リンクを共有するのと同じくらい簡単にファイルを共有できるのが気に入っています。Figmaは昨日、ライブストリームを介して多数の素晴らしいプラグインを立ち上げたばかりで、私のお気に入りの1つは、Remix DesignerのChris Arvinによって作成されたMapsicleです。Mapsicleプラグインを使用すると、2〜3回のクリックと0行のコードで、MapboxマップをFigmaデザインプロジェクトにドロップできます。

Mapboxの地図はインタラクティブなので、ズームやパンで最適な場所を探したり、UIで検索して正確な場所を見つけることができます。Mapboxのコアスタイルに加えて、このプラグインを使用すると、Mapbox Studioから独自のカスタムスタイルを取り込むことができます。

デザインにマップを配置すると、変更はシームレスに行えます。Mapsicleでマップを再度開き、場所やスタイルを調整できます。これは、さまざまなマップスタイルを試したり、さまざまなズームレベルを含むユーザーフローでさまざまなステップをモックアップしたりすることで、迅速に反復できることを意味します。より大きなブレークポイントに合わせて設計し、より多くのマップが必要ですか？ワンクリックでマップの領域を拡張できます。

そして、細部が重要であるため、Mapsicleは地図を高解像度画像として作成します。つまり、地図を作成するときにRetinaディスプレイを使用していなくても、デザインはRetinaスクリーン上で鮮明に見えます。

Mapsicleは非常にシンプルで素晴らしいツールです。Remixのプロダクトデザイナーであり、Mapsicleの作成者であるChris Arvin氏に簡単なQ&Aを依頼しました。

Mapsicleのアイデアはどこから生まれたのですか？

Mapboxの地図は、私が行うデザインワークの中心です。最近デザインしているもののほとんどすべてに、何らかの形で地図が含まれています。デザイナーとして、私は実際の内容でデザインすることが重要であると考えています。そして、それには地図も含まれます！また、視覚的な観点から、UIと地図がうまく連携していることを確認することが重要です。

しかし、時間が経つにつれて、デザインで地図を扱う上で多くの課題があることに気づきました。Mapbox Studioで地図のコンテンツやスタイルを反復処理しているとき、変更を加えるたびに同じスクリーンショットを撮り続けて、それがデザインの他の部分とどのように連携するかを確認する必要がありました。より大きなブレークポイントに合わせてデザインしたり、地図が使用する領域を増やしたりしたい場合は、ブラウザに戻って地図のより大きなスクリーンショットを撮る必要がありました。

ブラウザとデザインツールを何度も切り替える必要があったため、ワークフローから外れ、デザインではなく地図画像を使用するのに時間を費やしていました。

仕事と副業で何をしていますか？

私はRemixのプロダクトデザイナーで、トランジット計画製品を担当しています。トランジット機関のプランナーは、簡単なルート変更からトランジットネットワーク全体の再設計まで、あらゆることにそれを使用しています。また、トランジット指向の個人的なプロジェクトもいくつかあります。パートナーと私は、非営利団体のマーケットストリート鉄道のためにstreetcar.liveを作成しました。これは、サンフランシスコの歴史的な路面電車を追跡し、近くにどの路面電車がいるかを確認できるWebアプリです。また、サンフランシスコの失われた鉄道路線を示すインタラクティブな地図とフォトギャラリーのセットであるBay Area’s Lost Streetcarsも作成しました。

FigmaとMapboxを組み合わせた理由は何ですか？

FigmaとMapboxは、私の仕事のやり方を大きく変えました。FigmaはリアルタイムでのコラボレーションとWebベースであることのシンプルさ、Mapboxは地図の非常に強力なカスタマイズオプションです。Figmaがプラグインを発表する前から、この2つのツールをより簡単に連携させる方法を作りたいと思っていました。そして、最初のプロトタイプのプレビューをTwitterに投稿したところ、大きな反響があり、このプラグインが役に立つと思うのは私だけではないと確信しました。

今すぐ開発を始める

今すぐFigmaプロジェクトにMapboxの地図をドロップしましょう！FigmaプラグインページからMapsicleをインストールするだけです。Figmaプロジェクトで、メニュー＞プラグイン＞Mapsicleを開くか、キャンバスを直接右クリック＞プラグイン＞Mapsicleを選択します。とても簡単です！

皆様が作成されたものをぜひ拝見したいです！@mapboxでプロジェクトを共有するか、ハッシュタグ#builtwithmapboxと#figmapluginを付けてツイートしてください。

‍