はてなブックマーク

こんにちは！　UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。 今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。Figma のプロトタイプの作り方Figma のプロトタイプ機能はデフォルトで備わっていて、作成したデザインに画面遷移・マイクロインタラクションの再現ができます。設定方法はとても簡単かつ直感的なので、実際にやってみましょう。 まずはプロパティパネル（デフォルト右側のパネル）の上にあるPrototypeをクリックしプロトタイプモードにします。 試しに、た

こんにちは！　UIデザイナーのmarinです。 デザイナーが自分たちでデータを見ることができるようになってきたので、そのメリットについてと、どのように学習していったか、そしてスペースマーケットのデザインチームでは数値をどう扱っているか、のお話です。 デザインチームも人が増え、今までリソースがカツカツすぎて手出しできずにいたこともちょっとずつ着手できるようになってきて嬉しい限りです。 デザイナーが自分でデータを確認できるようになるといいことづくめ、とはいえデータドリブンデザインという言葉をよく見かけるようになってから早数年。特に事業会社のデザイナーは、導入しているツールを用いて自分で数字を見られる方やSQL叩いてデータを取得できるという方も多いのではないでしょうか。 デザインをする時は仮説だけでは成り立たず、価値を正しく数値化してくれているデータの存在が不可欠です。とはいえデータだけに頼ると

こんにちは！　UIデザイナーのmarinです。 2019/12/6 にFigma がアップデートし、Auto Layoutという機能が搭載されました。このAuto LayoutをFigma ユーザーの皆様がどう活用しているか知りたくて、まずは自分から紹介してみようとこの記事を書いています。 Auto Layoutとはその名の通りなのですが、UI上のサイズ変更やオブジェクト等の入れ替えを自動的に調整してくれる機能です。Sketch にもSmart Layout というよく似た機能が実装されていますね。 XcodeのAuto Layoutや、CSSのFlexboxと同じような挙動をしてくれます。 Auto Layout化することで何が便利なのかUIデザインは基本的に試行錯誤の連続で、一度作ったデザインを変えないということはありません。完成するまで常に試行錯誤を重ね、もちろん完成した後もユーザー

こんにちは！　UIデザイナーのmarinです。 この記事は スペースマーケットプロダクトチーム Advent Calendar 2019の 12月11日の記事となります。 スペースマーケットのデザインチームがnoteを書き始めて早いもので半年以上経過しているため、今更になってしまいますが、普段どんなツールを使って業務をしているのかざっとご紹介させていただきます。 スペースマーケットでは、デザインチームに限らず日々メンバーが増えており、人が増えると管理や効率化のため、さまざまなツールの力が必要となってきます。日々の業務をより効率的にこなすため、最適化出来るツールを模索しています。 とにかく効率化出来るところは効率化して（楽をして）仕事をしたいので、うちはこんなの使ってるよ〜とかもっといいやり方があるよ〜など、おすすめのツールがありましたら是非教えて頂けると幸いです。機械が出来ることは全部機械