デザインツールFramerもくもく勉強会を開催しました。

この記事は、2017-09-08に他ブログで書かれた記事の転載です

こんにちは。デザイナーの上田です。

普段、皆さんはどんなプロトタイピングツールを使っているでしょうか？世の中には様々なプロトタイピングツールがありますが、それぞれ使い方や得意とすることが違っていて、キャッチアップしていくのも一苦労ですよね。

クラウドワークスでも色々なツールを試していて、次はFramerを試してみようということになりました。そして、せっかくなら社外の方たちと一緒にさわってみよう！ということで「もくもく勉強会」というイベントを開催しました。

Framerとは

Framer - Design, code and collaborate.

Framerは、Sketchライクなデザインツールとコードエディタを組み合わせたようなプロトタイピングツールで、プログラム（CoffeeScript）を書くことでアニメーションや画面遷移を作っていきます。

プログラムを書かなければいけないので、デザイナー（非エンジニア）にはややとっつきにくいのですが、プログラムだからこそ、作れるものの自由度がとても高く、細かい動きもかなり作り込める点が特徴です。

イベントの様子

イベントでは、それぞれもくもく作業をする前に、まずは簡単なプロトタイプをつくる公式のチュートリアルにみんなで取り組みました。Framerはチュートリアルやサンプルが充実してるのもポイントです（全部英語ですが…）。

我々も参加してくださった方々もFramerを初めてさわる方ばかりで、試行錯誤しながらも、協力し合いながら進めていきました。なんとか書いたプログラムがサンプル通りに動くところまで辿り着けました。

チュートリアルが終わった後は、「もくもく会」です。もくもく会とは、“それぞれ各自もくもくと勉強したり作業したり本を読んだりするだけの会”（もくもく会ポータルより） のことです。各自、黙々と作業します。

チュートリアルで作ったプロトタイプをいじってみたり、別のサンプルをさわってみたり。とても可能性を感じるツールなのですが、日本語の情報が少なく、使いこなすまでには苦労しそうです。

懇親会も開きました

約１時間の作業の後、懇親会も開きました。Framerを使ってみての感想や、他のプロトタイピンツールについての情報交換など、とても有意義な時間が過ごせたと思います。ご参加いただき本当にありがとうございました！