PWA開発にデザインツールFigmaを導入してみた感想：エンジニア編｜umesan
こんにちは、株式会社ミクシィでエンジニアをしているumesanです。 最近、「みんなでピック」というPWAの開発に携わりました。 このサービスを立ち上げるにあたり、Figmaを導入して幸せになれた話をエンジニア視点からしようと思います。 🔗「デザイナー編」はこちらから 「みんなでピック」とは スマートフォンアプリ「モンスターストライク スタジアム」で遊ぶ際に使えるキャラクター選択サービスです。大会で使用されていたキャラ選択システムが、スマートフォン向けになって誰でも使用できるようになりました！ 🔗「みんなでピック」リリースのお知らせ 🔍 導入の経緯 みんなでピックの企画が立ち上がった際、 下記のような少人数のメンバーが召集されました。 ・プランナー1名 ・デザイナー1名 ・フロントエンドエンジニア1名 ← 私 ・SRE 1名 ・QA 1名プランナーから企画を聞いた後、皆でアイデアを出
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
Figmaで使えるSticky Notesを作った｜灰色ハイジ
2020/04/20 追記：Figma Community にSticky Notesをアップロードし直したため、リンクを変更しました --- 日本でも話題にする人が増えてきたFigmaですが、Sketchとの大きな違いは、Google Docsのようにリアルタイムに人と共同編集できるところにあります。 デザインはもちろんのこと、Miro （旧RealtimeBoard）のようにチームでアイデアを出し合ったり、議論を整理するのに使うこともできます。Figma公式ブログでもそのような使い方を提案していたりします。 そこで、一番使い方として多そうだと思ったSticky Notes（付箋）を作りました。すでに自分が関わるプロジェクトで使ったりしているので、配布できるようにファイルを整理して公開しました。 Figmaで使えるStickey Notes作りました🗒 使用例として別ページにAffin
Figmaを半年使って分かった便利なところ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 この記事はDesign Tools Advent Calendar 2018の6日目の記事になります。忙しい年末ということで気軽に読める記事にしてみました。 さて、以前ブログでsketchからFigmaに移行した話をしたのですが、思っていたよりも反響が多く各所から参考にしましたと声をいただきました。 完全に予想外でしたが誰かの参考になったのなら嬉しい限りでございます...ともあれ、あれから時間も経ったので実際どうだったのか？運用してからの知見をご紹介したいと思います。 チームメンバーへの共有スピードが速いFigmaを使う理由はこれだけで十分では？と思えるくらい「共有」がしやすいです。 SlackにもGithubにもFigmaのURLを貼るだけでUIデザインとプロトタイプの共有ができてしまい、エンジニアとのコミュニケーションでは相手の画面を
Sketch + Zeplin から Figma に移行したら快適だった！！｜masashige｜note
デザインツールをSketch + ZeplinからFigmaに移行しました。 Figmaへの移行を迷われている方も多いのではないかと思い、「なぜ移行したのか、移行する際にどのような負担が発生したか、移行して何が良かったか」などをシェアしたいと思います。 移行したキッカケ移行したキッカケは、とあるエンジニアに「Figma絶対にイイですよ！導入しましょう！！」と力強い意志をもってゴリ推しされましたw その強い熱意が移行を検討するキッカケになりました。 とある大手EC事業者では、最近Figmaを全社導入した、というような話も聞いており、Figmaに注目が集まっていることは知っていました。 その後、実際にFigmaをつかって業務をしたことがあるPM/デザイナーの方にFigmaの使い勝手を聞きました。 すると、「めっちゃ使いやすいです」「Figma良すぎて、Sketchの使い方忘れつつあります」と言
ZeplinとSlackで、ディレクターの方とのデザインに関するやりとりがスピードアップした ｜ Tips Note by TAM
2017.04.04 ZeplinとSlackで、ディレクターの方とのデザインに関するやりとりがスピードアップした 私はデザイナー兼フロントエンジニアです。 ZeplinとSlackを使って、ディレクターの方とのデザインに関するやりとりのスピードがとても上がったので、 どのようにやり取りをしているか紹介したいと思います。 Zeplinとは Sketch3やPhotoshopのアートボードから、レイアウト指示書を作成してデザインを確認できるツールです。 公式サイト https://zeplin.io/ Sketch3やPhotoshopから、プラグインでZeplinにデザインをアップロードして利用できます。 アップロードすると、Zeplinでは次のような画面にSketch3やPhotoshopのデザイン(アートボード)が表示されます。 オブジェクト間の距離やCSSなどが表示されます。テキスト
Figma使うのに便利なTips - Qiita
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
Figmaで日本語を使う - Qiita
日本語が消える Figmaの標準フォントで日本語を入力すると消えてしまいます。 ネットでググってもWeb版で日本語を使うという記事は観測時点では検索上位に出てきません。 日本語には対応してないのか、、、と思っていて、Figmaを使っていたら要望のポップアップが出てきたので、聞いてみることにしました。 「Japanese plz!」 するとしばらく立ってかFigmaからメールで返信が来ていました。 Hey sakapun, In case you didn't know, we do support some Japanese Fonts, such as Noto Sans JP. You can also enable local fonts to use your own! どうやら日本語が使えるフォントがいくつかあるようです。探せたのは下記です・ - Noto Sans JP - N
SketchからFigmaに移行してチーム間でのコミュニケーションがしやすくなりました - クックパッド開発者ブログ
こんにちは、メディアプロダクト開発部のデザイナ若月 ( id:puzzeljp ) です。 現在関わっている、一緒につくれるクックパッド | cookpadTV のアプリ開発上のチーム間のやりとりについて今回は書きたいと思います。 cookpadTV は料理上手な有名人や料理家がクッキング LIVE を生配信しているサービスです。クッキング LIVE を見られるのは、iOS アプリ・Android アプリ・FireTV アプリとなっています。 cookpadTV のデザインデータを Figma に乗り換えました cookpadTV に私がジョインしたのは、今年の8月です。 cookpadTV アプリがリリースされたのは3月なので、デザインを引き継ぐ形でジョインをしました。 私がジョインしたタイミングで、社内で Figma が使われる事例が増えてきたので、 Figma に移行を行ってみました
Flutterで社員研修用のアプリを作った話 - pixiv inside
みなさんはじめまして。初めてじゃない方はお久しぶりです。ピクシブでAndroidアプリエンジニアをしておりますconsommeです。 ピクシブでは基本的に年一回、社員同士の交流を深めるという目的のもと、社員研修を開催しています。2018年は2泊3日の沖縄研修が計画されました。そのなかで研修運営チームから「社員研修で使うアプリを作れないか？」という相談を受けました。 研修中は基本的にチーム行動になるので、自分のチーム以外の人が何をしているかがわかりづらい。それなら各自で研修中に撮った写真を共有して、みんなで楽しめれば社員同士の交流につながるのではないか、そのためのアプリが欲しい、とのこと。 そう言われるとアプリエンジニアとしては作らないという選択肢はありません。ぜひやりましょう、ということで、社員研修を盛り上げるためのアプリを開発することになりました。 システム構成 アプリ側 アプリはFlu
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
UI案、イラレやパワポで作るくらいなら、『Figma』 - Qiita
Figmaとは UIのプロトタイピングで名を馳せているSketchというアプリケーションがあるのは、アプリケーションやWEB開発に携わっていれば、知っている人も少なくないと思います。 しかし、SketchはMacOS専用で、Windowsユーザーでは、このソフトを使うのは障壁が高いと思います。 （というか、私が使ってみたいもののWindowsユーザーなので、とっつきにくかったです） Figmaは、ブラウザ上でも編集可能でありながら、Sketchと同じような感覚でUI案を作れます。 必要なのはGoogle chrome ブラウザだけ！ (Windowsのアプリケーションもあります） 本格的にデザイナーへ投げる前に、要件の洗い出しのためのイメージ共有の際に、使えるツールになるのかな、と思います。 （この記事は、初めて知る人が10分後には使用開始できるお手軽感を目指しています。 やれること全て網
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
