Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
10 Steps to Translate Your iOS Designs for Android - Material Design
How to bring your iOS experiences to Android in record time
UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用したマテリアルシンボル、スイッチをはじめUI要素のデザインも変更されています。 Material Design 3 Material Design 3の大きな特徴は、表現力豊かなパーソナライズ機能とアクセシビリティ機能です。ダイナミックカラーのサポートに加えて、いくつかのマテリアルコンポーネントもアップデートされました。新機能は、オンラインやFigmaやGoogle Fontsなどで提供されており、すぐに利用できます。 Dynamic co
The next stage for Material Design
AndroidアプリをMaterial Designのガイドラインに準拠させるための取り組み - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部ZOZOTOWNアプリ部Android2ブロックの鈴木（@s1u2z1u3ki）です。 本投稿ではZOZOTOWN Androidアプリを、Material Designに準拠したUI/UX1とするために取り組んでいる内容を紹介します。 目次 はじめに 目次 Material Designとは？ Material Design勉強会について 勉強会の流れ 存在した課題 課題解決へのアプローチ 提案会の実施 提案会の流れ 1. 提案会の準備 2. セクションの復習 3. 提案内容の議論 実装会の実施 「結局やらない」をなくすため モブプロ形式でリリースまでのスピードを上げるため 実装会の流れ 1. タスクの共有 2. タスクを進める 3. 進捗記入 4. 進捗共有 取り組みの結果 リリースした提案 1. ログイン画面のテキストフィールドのフォーカスを強調する
Beer CSS - Build material design interfaces in record time, without stress for devs 🍺💛.
The first CSS framework based on Material Design 3. 10x smaller than others CSS frameworks based on Material Design. Translates Material Design to HTML semantic standard. Ready to use with any JS framework. Highly focused on DX.
First Batch of Color Fonts Arrives on Google Fonts - Material Design
Customize color palettes, add gradients, and more with COLRv1
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
重厚長大な企業の内製開発組織で成果を出すためのサーバーレスアーキテクチャ / ServerlessDays Tokyo 2023
Material Tailwind - Easy-to-use Tailwind CSS components library with React and Material Design
The Tailwind CSS Components Library For Coding 10x FasterMaterial Tailwind is an open-source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier. The stunning design inspired by Material Design is a bonus!
Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform
Material Design Icons | Figma
This is the official Material Design icon stickersheet managed by Google Fonts team! Material Design Icons are available in five styles. The icons are crafted based on the core design principles and metrics of Material Design guidelines. Our icons are free for everyone to use. It’s available und...
Android Advent Calendar 10日目です。 Material Designの一般的な話に留まってしまいました。Android特有の話やコードは出てきませんが、「ふーん」と流し読みいただければ幸いです。 Material Design 3とは 2014年にGoogleから発表されたMaterial Designですが、2018年にMaterial Themingが登場し、今年2021年にMaterial Youが新たに発表されました。発表当初は「Material You」という呼称での発表でしたが、先日ガイドラインが登場し、そこでは「Material Design 3」、略称として「M3」と記載されていました。このタイミングで、Material ThemingをM2、Material YouをM3と整理されたようです。 下記のガイドラインの用語集の中に詳細が記載されていま
FlutterでのMaterial Designのカスタマイズ ~ThemeDataはどこに影響するのか~ - Qiita
Flutterは、Material Designを標準サポートしています。そして、テーマを自分で設定できます。 そのために利用するのが、ThemeDataです。 これについて色々な記事があります。 が、日本語はもちろん、英語でも、ThemeDataのプロパティのどこを変更すれば、Widgetのどこに影響するのかを纏めてある記事が見つかりませんでした。 そこで、この記事では自分が愚直にコードを書いて調べたものを記述します。 基本的にここに書いてあるものだけ変更すればそれなりに統一的なデザインになるものを書いてます。 前提 カスタムテーマは MaterialApp の themeプロパティで設定します。 ThemeData() のプロパティにカスタマイズしたい値を設定していきます。 void main() => runApp(MyApp()); class MyApp extends Stat
Icons - Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Designed by David Allin ReeseThis article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team. Dave Chiu , Staff Interaction Designer, and Sameer Bansal, User Experience Designer, collaborated with Michael on redesigning the text fields. You might not always notice, but Material Design is constantly evolving and iterating based on research. We recentl
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angularの要素を操作するディレクティブの自作方法を説明しました。今回は、Googleのデザインガイドライン「Material Design」に対応したAngularのコンポーネント（UI部品）「Angular Material」を紹介していきます。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 「Material Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用され
Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material Design Guidelines.
Material Designベースの 「頑張らないデザインシステム」で爆速フロントエンド開発 | HiCustomer Lab - HiCustomer Developer's Blog
はじめに こんにちは、フロントエンドエンジニアの尾島です。 2 年ほど前から副業という形で HiCustomer の開発にちょこちょこと関わっていましたが、今年の 7 月からはフルタイムで開発をしています。 入社以来、新機能の開発と並行してデザイナーと共に進めている HiCustomer のデザインシステムの作成、アプリケーションへの適用、また運用についてご紹介します! この記事で話すこと: デザインシステム、デザインガイドラインとは なぜデザインシステムが必要だったか どのようにデザインガイドラインをスモールスタートしたか 具体的な Tips など デザインシステム、デザインガイドラインとは デザインガイドラインやデザインシステムという言葉は、人や組織によって定義や解釈が微妙に異なりますが、 一般的に以下のような構成要素(一例)のフルセットとして認識されているのではないでしょうか。 デザ
GitHub - styled-icons/styled-icons: 💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
DevFest 2020 で Material Design Components のカスタマイズについて話してきました。
► 2023 (3) ► 4月 (1) ► 3月 (2) ► 2022 (17) ► 12月 (2) ► 11月 (3) ► 9月 (2) ► 8月 (2) ► 7月 (2) ► 5月 (2) ► 4月 (2) ► 3月 (1) ► 2月 (1) ► 2021 (46) ► 12月 (2) ► 10月 (1) ► 9月 (1) ► 8月 (3) ► 7月 (2) ► 6月 (5) ► 5月 (12) ► 4月 (7) ► 3月 (5) ► 2月 (7) ► 1月 (1) ▼ 2020 (44) ► 12月 (6) ► 11月 (5) ▼ 10月 (1) DevFest 2020 で Material Design Components のカスタマイズに... ► 9月 (1) ► 8月 (2) ► 7月 (2) ► 6月 (7) ► 5月 (4) ► 3月 (8) ► 2月 (3) ► 1
How Material used color science to make design easier and more expressive than ever before
Figma Community plugin - Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through the entire list. Filter by category, change style, size, and color. Available in all styles: outlined, filled, sharp, rounded, and ...
【Material Design】SnackbarとToastの使い分けと注意点｜kanna UI/UX Designer
こんばんは！デザイナーの@kannaです。 最近改めてマテリアルデザインのSnackbarについて触れる機会があったので記事にしておこうと思います。 はじめにMaterial Design ガイドラインには Confirming actions と Acknowledging actions の2つのアクションタイプがあります。 Confirming actionsは確認のためのアクションで、 Acknowledging actionsはユーザーが選択したアクションが完了したかを知らせるアクションです。 Snackbarはユーザーの行動後のアクションを知らせるものなので、Acknowledging actionsに含まれます。 Acknowledging actions＝Dialog / Snackbar / Alert Dialog はユーザの行動を妨害し、アクションも 2 つまでは持つ
Material Design Text Fields Are Badly Designed — Smashing Magazine
Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organizations like Boots, Just Eat and Gov.uk. One topic that comes up a lot
material-design-icons/codepoints at master · google/material-design-icons · GitHub
Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Introducing Material Design Guidance for Large Screens - Material Design
Designing and building for more devices
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unveiling Material You - Material Design
「Gmail」と共通 ～「Google ドライブ」や「Google ドキュメント」も新デザインに／「Google Material Design 3」に準拠
Material Design と Product UI Design
Material Design Components カスタマイズ最前線
Material Design 3ガイドライン概要 - Qiita
The Evolution of Material Design’s Text Fields
「Angular Material」で、「Angular」のWebページにMaterial Designを導入しよう
🎨 Material Design Colors, Color Palette | Material UI
The Science of Color & Design - Material Design
Material Design Icons | Figma Community
Androidの「Material Design」アイコンフォントが可変フォント技術に対応／4つのスタイルを1つのフォントファイルで実現
kuromaron.hatenablog.com
jnsg.jp
honest-to.hatenablog.com
cryptowiseinvestor.hatenablog.jp
www.pixiv.net
www.publickey1.jp