Chromeの最小フォントサイズの10px制限がなくなった - Qiita概要 Chrome 118からフォントサイズの下限値10pxの制約がデフォルトでオフになり、特にユーザ側で設定していない場合は0pxが下限値になるようになりました。 影響 CSSで10px未満を指定した場合や相対サイズ(em, %など)が10px未満でもそのまま反映されるようになる 上記に起因したレイアウト崩れが起きる可能性がある 設定値の変更 設定値はChromeのフォント設定画面の最小フォントサイズという項目で変更することができます。 chrome://settings/fonts 参考
BCD Design によるコンポーネントの分類 - Qiita
atoms を atoms であり続けさせるための工夫は以前記事に書いたので参考にしてみてください。 AtomicDesign の atom より小さな世界の扉を開く 軸の転換 粒度軸重視から概念軸重視へ 以下は簡単なブログサービスで作成するであろうコンポーネントを5つの方法で分類した例です。 粒度軸で分類しても、概念軸の分類をしないとキレイな構造にはならない 概念軸で分類すると、粒度軸で分類しなくてもかなりキレイな構造になる 概念軸と粒度軸で分類すると、非常にバランスの取れた構造になる 概念軸と関心で分類すると、スケールに強くなる 5 概念軸と関心と粒度軸で分類すると、スケールに強く、関心をまとめつつ粒度の恩恵も得られる 5 なぜ粒度軸より概念軸なのか 粒度軸の中で概念軸の分類を行う 概念軸の中で粒度軸の分類を行う この2つの一番大きな違いは、関心のまとまりです。 DDD の基本でもある
フロントエンドのディレクトリ設計思想
はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために
Figma and Adobe are abandoning our proposed merger | Figma Blog
Fifteen months into the regulatory review process, Figma and Adobe no longer see a path toward regulatory approval of our proposed acquisition. Figma and Adobe have reached a joint decision to end our pending acquisition. It’s not the outcome we had hoped for, but despite thousands of hours spent with regulators around the world detailing differences between our businesses, our products, and the m
Figmaの作業を効率化！ 知らないと損するショートカット集 - ICS MEDIA
ウェブ制作における定番になりつつあるデザインツール「Figma」。本記事では、Figmaの知らないと損するショートカットキーを紹介します。 よく使う便利な機能を呼び出すショートカットキーを覚えておくことで、作業効率が上がるのでしっかり覚えていきましょう。 本記事では基本機能のショートカットキーだけでなくマニアックなものまで紹介します。初心者はもちろん普段からFigmaを利用している方にも役立つ内容をまとめています。 ショートカットキー一覧の呼び出し（control+shift+?） Figmaでは、見やすいショートカットキー一覧をいつでも表示できます。ショートカットキーを忘れてしまった場合には、control+shift+?(macOS) /control+shift+?(Windows)を押しましょう。 画面下部にショートカット一覧が表示されます。使ったことのあるショートカットは色が付き
Figmaのヒラギノ系のfont-weightが狂っている!? - Qiita
対象読者 Figmaを使うデザイナー Figmaを見ながらスタイルのコーディングをするエンジニア なぜこの記事を書いたのか 弊社ではデザインシステムを構築しています。 テキストもコンポーネント化しているのですが、ある日エンジニアから上がってきたPull Requestを見ると font-weight: 700; となっていたのです。 デザイナーとしては、太文字は font-wight: 600; になる用にコンポーネントを作っていたので、なぜ700と指定されてしまったのか不思議でした。 原因を調査した結果、他でも嵌る可能性があるかもしれないと思ったので、今回記事に残そうと思いました。 すべての答えはFigmaにある 弊社で使っているFigmaの文字設定は下記のようにしています font-familly Figmaでのfont-weight ブラウザでのfont-weightとして出力したい
iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫 | Spinners Inc.
これを回避するために、iOSの実装側でHiragino Sansを使うという方法もありますが、その場合にも注意が必要です。Hiragino Sansを使った場合にAutoLayoutでのテキストオブジェクトの高さが、グリフを表示するための見た目の高さより小さく計算されてしまい、アルファベットのyやgなどの下に飛び出しているグリフが切れて表示されてしまうことがあります。 これはおそらくiOSに組み込まれているHiragino Sansのフォント側の問題だと思われますが、かなり前からこの問題は報告されており、修正されることはあまり期待できないでしょう。 日本語文字サイズ問題をFigma Pluginで対応する今回の問題はiOSのシステムフォントが日本語グリフの表示の場合に、特殊な文字調整を入れていることから発生しているというのが上の説明です。 つまりFigma上でシステムフォントと同じ状況が再
EightShapes Contrast Grid
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
Ultimate ChatGPT cheatsheet for UX UI Designers
AI won’t replace designers, but designers who use AI will replace those who don’t. Similar to how calculators were once thought to replace mathematicians, many fear that AI will replace designers. However, this is a misconception. Just as calculators didn’t replace mathematicians, AI won’t replace designers either. Instead, AI will offer you — designers, new tools and capabilities to increase thei
FigGPT | Figma
Write copy with ChatGPT in Figma or FigJam! 🎉 🚀 Quick actions: Easily change the style, length, or formatting of text in just one click.🎨 Custom actions: Create your own personalized quick actions.🌍 Multilingual output: Supports over 40 languages.✨ Magic Populate (Alpha): A magic button that fill...
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
Figma で メンテしやすいテーブルを作る
始めに 画面仕様を作る時に、プロダクトの将来の変更に強くなるように再利用性を高く作っていくことは重要です。最近は、Figmaを使って画面仕様を落とすことが多く、その中でも表形式のリストテーブルを作ることがよくあります。この記事では、自分なりのメンテ性の高いリストテーブルの作り方を紹介していきます。 今回つくった Figma ファイルは こちら メンテ性が高いとは? メンテ性が高い状態とは、将来の変更に強いこと だと自分は考えています。 今回作っていくリストテーブルについて言うと、 カラムの増減が容易にできる テーブルの行数の変更が容易である 埋め込んだ際自動でサイズ調整をしてくれる これらかなと考えています。 それでは、これらの特徴を踏まえたテーブルの作り方をみていきたいと思います。 作る物 今回は、Material Design の Data Table を真似て作っていきます 手順 テ
Interface Inventory
Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, but the hard work pays off. You end up all your content laid out on the table, which gives you a new perspective on what your content is and how to tackle
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜
iOS 日本語システムフォント サイズ計算 | Figma
SmartHR Design System
FigGPT
6-2. バージョン管理の使い方 | UI/UXデザインツール『Figma』入門
Stark: The suite of integrated accessibility tools for your product design and development team
