Thinkings株式会社 では sonarATS の開発にあたり、基本的にはデザイナーがFigmaを作成し、それに基づいてエンジニアが開発するというフローを取っています。 そんな中、先日エンジニアサイドで画面設計を行ってみるという実験的な取り組みをしました。 本記事では画面設計を行うことになった経緯と具体的な取り組み内容を振り返り、エンジニアが画面設計をすることのメリットと課題感について考えたことをまとめたいと思います。 エンジニアサイドで画面設計をするきっかけとなった要因 エンジニアサイドで画面設計をすることとなった理由として、大きく分けて以下３つの要因がありました。 デザイナータスク削減の目標 あるマスタ画面を開発したときの課題感 上述の通り、『簡単なマスタ画面の開発』のような共通的な画面設計になる機能については、できるだけデザイナーが介入せずエンジニア主導で開発している → 実際に
エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
こんにちは、株式会社ミクシィでエンジニアをしているumesanです。 最近、「みんなでピック」というPWAの開発に携わりました。 このサービスを立ち上げるにあたり、Figmaを導入して幸せになれた話をエンジニア視点からしようと思います。 🔗「デザイナー編」はこちらから 「みんなでピック」とは スマートフォンアプリ「モンスターストライク スタジアム」で遊ぶ際に使えるキャラクター選択サービスです。大会で使用されていたキャラ選択システムが、スマートフォン向けになって誰でも使用できるようになりました！ 🔗「みんなでピック」リリースのお知らせ 🔍 導入の経緯 みんなでピックの企画が立ち上がった際、 下記のような少人数のメンバーが召集されました。 ・プランナー1名 ・デザイナー1名 ・フロントエンドエンジニア1名 ← 私 ・SRE 1名 ・QA 1名プランナーから企画を聞いた後、皆でアイデアを出
こんにちは、かみそるです。 noteでファイルアップロードができるようになったので、さっそくずっと育ててきたスタイルガイドのテンプレートを販売してみようと思います！ このノートでは、テンプレートのつくりかたを解説しています。テンプレートデータのダウンロードは有料ですが、命名規則などのノウハウはすべて無料で読めるのでぜひ参考にしてみてください！ はじめに🌟 UIをスクラッチで作るときに向いているスタイルガイドです 🌟 表現の幅が狭まらない設計を心がけています 🌟 テンプレート（.fig）のダウンロードのみ有料 🌟 アップデート（カイゼン、バリエーション追加）があった場合も無料で再ダウンロード可能 なんのためにテンプレートをつくるの？ 1️⃣ 効率化のため 命名規則、文字周りの定義などを一瞬で決めてデザインに入りたい。 2️⃣ 拡張性担保のため 複数のデザインデータに展開できるようにカ
こんにちは、note初投稿です。 現在、会社や個人でデザイナーとして0→1の事業立ち上げのお手伝いをしています。 0→1の立ち上げにおいて大事なことは、「プロダクトの目指したい姿・方向性・アイデアは何となくあるけど物理的には何もない」ところから仕様を決め、具体的な形にしていくまでの解像度をいかにスピード感もって高めることができるか、だと思っています。 ふだん、そんな新規事業の立ち上げドカタをしていますが、sketchが圧倒的勢力を誇るこの世界において、figmaエバンジェリスト（自称）として世の中にfigmaの素晴らしさを広めていきたいと思い、今回、私が個人的にお手伝いしているフィンテックのプロジェクトで行っているデザインフローについて記事にしました。（※まだリリースしてません。とりあえずfigmaの良さを伝えたい。プロダクトの詳細については今後記事にしていきたいです） また今回の記事内容
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
