A collection of Design Systems for Figma from all over the globe 🌎 backed by code.
![Design Systems For Figma](https://cdn-ak-scissors.b.st-hatena.com/image/square/2364a26a0c9dd0343ae5f1aa8cfde09f4cc9ef21/height=288;version=1;width=512/https%3A%2F%2Fassets-global.website-files.com%2F5f08a6a4b22d4a7ca3b0b630%2F5f18a5844db54c3e79853bca_OG-image-main.png)
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
この記事は、デザインの要望やニーズに合わせたグリッドレイアウトの使い方を、実際にレスポンシ・グリッドを利用した参考サンプル例と一緒に学ぶ基本ガイドです。 Webレスポンシブデザインにおけるグリッドの基本的な使い方がわからないひとは、まずパート1でグリッドの使用方法を確認しておくと良いでしょう。 Webデザインのレスポンシブ対応グリッド、基本の使い方徹底ガイド デスクトップ向けのウェブサイトが、スマートフォン向けモバイルサイズまでどのように変化、スケールダウンするべきか自然とテクニックが身につきます。 1カラム・レイアウト 別名フルページ・レイアウトとも呼ばれ、もっともシンプルなレイアウトで、ランディングページに使用されます。 ブランドや製品プロダクトのメッセージを強調するために、大きな画像を配置したスペースが特長。1カラムレイアウトに並べられたコンテンツは、個別のモジュールとして機能し、表
2020年5月現在、世界で最も洗練されたUXを実現してるプロダクトのひとつが、Nintendo Switchのソフト『あつまれ どうぶつの森』ではないでしょうか。 子供から大人まで世代を問わず楽しめて、日本のみならず世界中の人々を虜にし、入手が困難になるほど爆発的に売れている。 何より外出自粛になったこのタイミングで、外で遊ぶことを疑似体験できるソフトがドンピシャで発売されるという運命の巡りあわせに、任天堂の持つ神懸かり的な力を感じずにはいられません。 それだけ多くの人に愛されるプロダクトなので、プレイしていても学ぶことが本当に多く、いま自分が遊んでいるのか、仕事をしているのか、わからなくなるほどです。 いや、さすがにそれは言い過ぎました。プレイしている時は完全に遊んでいます。完全に遊んでいるのですが、それでもゲームをしていて、自分の仕事に活かせるような「これは…!」というようなアイデアや
こんにちは!はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。UI デザインをコアスキルとしているのは私1人というのもあり、みんなの足並みを揃えたいと思っていました。 知識がないと、どう調べればいいかすらわからないこともあります。自分が「当たり前だ」「常識だ」と思っているものも、専門外の人にとってはピンと来ないときも多いと思います。 そこで、デザインの当たり前をチームの当たり前にす
どうもーUI/UXデザイナーのうっくんです。 以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。 そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。 constraintsとは 「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為にこのnoteはあります。 constraints=制約。とは、frame(外枠)のサイズが変わったときに、中のUI部品がどのように振る舞うかを決めるもの、です。 もともとiPhone向けのアプリなどを開発するツールである、「Xcode」の中でUIを作る機能として使われていた用語がFigmaに輸入されたものと理解しています。なので、概念としても、設定方法としても、Xcodeのconstraintsに似ていま
UIのデザイナーをはじめ、デザイナーではない人でも、どのようにデザインのセンスを磨き、デザインを見る目をどのように養えばよいのかを紹介します。 How to develop an eye for Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインのセンスを磨き、デザインを見る目を養う アプリは使うだけではなく、そこから何を学ぶか 実際のアプリを分析 ルールが分かれば、壊すこともできる デザインのセンスを磨き、デザインを見る目を養う 私はデザインを始めた時、デザインが苦手でした。 Dribbbleなどからトレンドのデザインをコピーするのに夢中で、それらがどのように機能するのか気がついていませんでした。私が加えたドロップシャドウや不必要なエフェクトをもしあなたが見たら、ぞっとすると思います。 私はデザインの天才で
0----1----2--- みたいな形式のテキストでタイムラインアニメーションを作れるライブラリを作りました。 しゅうまいさんと「Webでタイムラインアニメーションを作るのがだるい」的な話をしていて、 AAみたいな発想で楽をできないかなと思ったのが発端になっています。 まずは下記のデモを見てください。 See the Pen TimelineDown Example by hashrock (@hashrock) on CodePen. 下記の文字列を渡すことで、4つの絵文字がそれぞれ個別のアニメーションをします。 const p1 = "--------0----1--2-------"; const p2 = "---------0----1--2------"; const p3 = "----------0----1--2-----"; const p4 = "---------
UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。 今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。 9 tips to quickly improve your UI designs by Marc Andrew (mrcndrw.com) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 要素をより明確に表示する 2. デザインに使用する書体は1つで十分 3. 長いコンテンツは文字のサイズに気をつける 4. ユーザーのオンボーディングエクスペリエンスを改善する 5. シャドウを使う時は光源を意識する 6. テキストと画像のコントラストを改
デザイナー⇔エンジニアでデザインデータのやりとりをする時に困ったことはないでしょうか?僕は過去に困ったことがありDXELというイベントでこんなSketch(Zeplin)はイヤだ #dxelと言う発表をしたこともありました。あれから1年以上の時が経ちましたが、今でもまだまだ都度確認しないといけないことが発生します。その時々で聞いたり確認するのも大変なので、ある程度忖度をして実装することもありますが、中にはデザイナーが想定していなかった結果になることもあります。逆に実装を進める中でUIが崩れたり、見辛いUIになってしまう可能性もあります。なるべくプロダクトがユーザーの手元に届く前にそういった問題は潰しておきたいですよね。本記事ではUIを固める上で擦り合わせが必要だろうと思う項目を挙げてみました。(他にも考慮するべきポイントがあれば教えていただければ追記していきます) ☑️画面サイズが小さい端
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Since 2015, I am not affiliated, associated, authorized, endorsed by or in any way officially connected to AirBnb, Deezer or others companies displayed on uxtimeline.com. Despite many hours of research on Internet (Wayback Machine; Google Image; etc.). It could remain some mistakes. Please let me know. Designed by Jacinthe BUSSON, COO & Co-founder Fastory.io and Elegantt For Trello
インターフェースの設計をユーザー視点で構築するのは、決して難しいことではありません。 ここでご紹介するのは、私がユーザーとUIの整合性を取るために使う、最も簡単な思考法です。 良いインターフェースは会話をするあなたがこれから設計するインターフェースは、あなたの代わりにユーザーと会話をしてくれる人間のような存在です。 何かを販売・広告するウェブサイトなら、あなたの代わりに24時間営業トークを行うセールスマンのようなものであり、 また、ライフスタイルのアプリ等であればそれを隣で説明する良き友人であり、それが業務ツールであれば使い方を教えるよきメンターになります。 良いインターフェースのデザインを設計したいのであれば、このような優秀な解説者のトークシナリオ(台本)を作成するかのようにUIを設計するのが一つの解決策です。 よく設計されたインターフェースは、ユーザーの一つひとつの思考に対して、一つひ
先日、友人のデザイナーさん達とランチした際に、1人のデザイナーさん(Webデザインがメイン、軽いコーディングまでなら経験あり)が ・iOSアプリデザインやUXデザインにも興味ある ・より良いデザインやユーザー体験を実現できるようになるために アプリ開発もしてみたい(特にデザイン上の制約を知るために) と言っており、同じニーズを持つデザイナーさんやディレクターの方も多そうだったので、この記事を書いてみました。 対象読者 ・iOSアプリのUI面で、できる/できるけどしんどい/できないことを知りたい デザイナー、ディレクター 解説すること ・アプリで画面が表示されるまでの仕組み ・アプリの画面を実装する上でよく使うコンポーネント(パーツ) ・気をつけるべきポイント 実際の実装については、Qiitaなどでいくらでも解説されていると思いますので、イメージを掴んでもらうための概念的な説明をメインにして
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい(≒Webフロントエンドエンジニアにやさしい)デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く