6月22日にFigma3.0のリリースが公開されました。Figmaといえば、ブラウザで動作するデザインツールであり、機能もSketchやAdobe XDと肩を並べるほど高いレベルを誇っています。 そんなFigmaが、「Figma 3.0」という形で大幅なアップデートをリリースしました。プロトタイピング機能やスタイル機能など、Figmaがさらに使いやすくなるアップデートとなってます。 今回は、Figma 3.0のアップデート内容についてご紹介したいと思います。 Figmaとは そもそもFigmaを知らない！という方のために、簡単にFigmaのご紹介をしておきましょう。 Figmaは、ブラウザで動作するUIデザインツールで、機能はSketchやAdobe XDと同レベルのクオリティを誇っています。さらに、ベーシックプランは無料で利用することが可能となっており、プロジェクト数やメンバー数、バージ

Figmaといえばコラボレーション機能（ですよね…） Figmaを他のUIデザインアプリと比較するとき、もっともわかりやすいポイントは「Webサービスで複数人で同時編集できる」ということだと思います。 この点は、まだFigmaを使っていない人にとってもわかりやすいポイントですし、Figmaも早い段階からそういうコラボレーション機能に力を入れてプロモーションしてきた感があるので、そういう印象を持っている人が多いと思います。 でも実は、UIデザインツールとしての基本機能が優秀👍 1年以上Figmaを使ってきた自分としては、そういう他にはない大きな機能差よりも、むしろ他のアプリにもあるような「UI・グラフィックのデザインツールとしての普通の機能」のなかの細か〜い使い勝手の部分で「いいじゃんFigma👍」と思っているところが結構あります。 自分自身、デザインツールはその昔イラレとかで印刷物のデ

はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design

2019/02/26 追記 Figmaのプラン内容少しづつ更新されています。この記事の内容は現行プランとは少しズレている部分があるので、公式サイトでの内容の確認は必須です！ 例えば、フリープランでは2メンバー以上招待できない（editor/viewer関係なく）とこの記事にはあるのですが、現行のプランだとeditorが2名以上招待できないだけで、viewerは制限なく招待できます。こちらの記事でFigmaをべた褒めしたのですが、プランについては少し複雑なので別記事に分けました。 べた褒めしてる記事を読んでいない方は先にそちらを読んだほうが良いかもしれません。そもそもFigmaが使いたくないのにプランを理解した所でアレですし......。 プラン自体はそんなに難しくない 前の記事で書いたようにFigmaは基本的には無料です。 ただ、プロジェクトを増やしたいとか、編集できるメンバーを増やしたい

https://www.figma.com/ 個人的に激推しなブラウザ環境で動く（デスクトップアプリもある）UIデザインツール。 英語UIということで敬遠するひともいるかもしれないので、使ってくれる人が増えてくれることを願って、使いやすいところとかTipsをちょっとずつ追記していこうと思います。 ※Mac環境を前提に書いています。⌘（command） → control などショートカットキーの違いは良しなに読み替えてください。 2018年7月3日追記： 2018年6月21日に、Figmaのバージョン3が公開されました！🎉 https://blog.figma.com/figma-3-0-217d6c248f85 クローズドβだったテキストスタイルとカラースタイルが使えるようになったほか、固定ヘッダーや領域内でのスクロールなども再現できるようになりました。 2018年8月13日追記： M

こんにちは、ふじけん (@kenshir0f) です。 普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。 業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。 Figmaに乗り換えるに至った経緯やプロコンなど、ざっくりまとめてみます。 なぜsketchから乗り換えたのか 今まで他の人と共同で同じsketchデータを作業することがなかったのですが、メンバーが増えてからはabstractで共同で作業していました。 ライブラリを分けたりbranchを切ったりしながらデザインを行っていたのですが、しばらく経つと不満点がいくつか見えてきます。 影響範囲がでかいライブラリを更新するとコンフリクトしやすい branchを切って作業してマージするなどスピードが遅くなりやすい デザイナーにb