Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
2024年1月26日紙版発売 2024年1月26日電子版発売 工藤智祥 著 B5変形判／384ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13943-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア，マークアップエンジニア，そしてデザインシステムの構築に興味があるデザイナーを対象に，Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
UIの一貫性と開発生産性を高める！UI実装ガイドライン制定と浸透のプロセス - Techtouch Developers Blog
こんにちは。テックタッチの shoko です。 最近モスのフィッシュバーガーにハマっていて、3日に1回食べています🐟 さて、本日は、UI の一貫性と開発生産性を高めるために、テックタッチの UI チームがどのような取り組みをしているかをお話したいと思います。 UI チームとは テックタッチが抱える UI の課題 UI 実装ガイドライン制定と浸透のプロセス 1. メンバーから課題を収集 2. 課題・議論の集約 3. UI チームでガイドラインを制定 4. チーム全体へのガイドライン浸透 ガイドライン制定の効果 おわりに UI チームとは テックタッチでは、複数のスクラムチームでプロダクト開発を進めています。主要な機能の開発は順調に進んでいるものの、UI 改善のようなタスクに時間を割くのが難しいという状況に直面していました。 そこで、開発の優先度では後回しになりがちなものの、プロダクトの品質
Stable Diffusionのオリジナル開発陣がAI企業「Black Forest Labs」を立ち上げ独自の画像生成AIモデル「Flux」をリリース
画像生成AIの「Stable Diffusion」などの開発に携わったAI研究者が、新しいAI開発企業の「Black Forest Labs」を立ち上げました。さらに、Black Forest Labsはパラメーターサイズが120億のオープンソース画像生成AIモデル「Flux」も発表しています。 Announcing Flux by Black Forest Labs: The Next Leap in Text-to-Image Models https://blog.fal.ai/flux-the-largest-open-sourced-text2img-model-now-available-on-fal/ Announcing Black Forest Labs - Black Forest Labs https://blackforestlabs.ai/announcing-b
Franken UI
Home Changelog About Examples Blogs Getting Started Introduction Installation JavaScript Web Components Dark Mode Hooks Theming Typography Accessibility UIkit Components Accordion Alert Align Animation Article Background Badge Breadcrumb Button Card Close Column Comment Container Countdown Cover Description List Divider Dotnav Drop Dropbar Dropdown Dropnav Filter Flex Form Grid Heading Height Icon
「日頃の作業をどうにか楽にしたい、できることならだれかやってほしい」と思ってしまうほど自分にあまい筆者が、制作時間の短縮や効率化アップにつかえる新ツールやデザイン素材をまとめました。 すべて手作業だと時間のかかるCSSスタイリングや、スキルも必要な手描きイラストを用意したり、「このツール、早く知りたかった」と思った素材やツールが揃っています。 日頃のワークフローに活用して、デザイン制作の新ルールを一緒に見つけてみませんか。 コンテンツ目次Web便利ツールデザインツールFigma・アイコンツールユニーク・面白ツール Web便利ツール The good colors – Full spectrum – OKLCH 注目の色「OKLCH色空間」によるカラーパレット作成ができるツール。一般的なLCHとOKLCH色の比較の通り、より「いい感じの色合い」で、明度と彩度のトーンがあった美しい配色を生成し
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
長谷川白紙 - 恐怖の星 (Official Video)
Taken from 'Mahōgakkō', released July 24, 2024 on@BrainfeederRecords : https://hakushihasegawa.lnk.to/mahogakkoYo Subscribe: https://found.ee/hakushi-ys Movie & Animation: 米澤柊 Shu Yonezawa Logo Design & Typography: 八木幣二郎 Heijiro Yagi Animation Assistant: misa, mashimi, unaiukino 恐怖の星 Written, lyrics & arranged by 長谷川白紙 Hakushi Hasegawa Horn arranged by 挾間美帆 Miho Hazama Vocal, program & key: 長谷
「砂の雨が降る惑星」をNASAのジェイムズ・ウェッブ宇宙望遠鏡が発見
サイズの割に非常に軽く、密度が小さいことから「わたあめ」に例えられることもあるガス惑星「WASP-107b」には、水滴ではなく砂粒が雨のように降ることが、ジェイムズ・ウェッブ宇宙望遠鏡の観測により判明しました。 SO2, silicate clouds, but no CH4 detected in a warm Neptune | Nature https://www.nature.com/articles/s41586-023-06849-0 James Webb Space Telescope detects water vapour, sulfur dioxide and sand clouds in the atmosphere of a nearby exoplanet - News https://nieuws.kuleuven.be/en/content/2023/jwst
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
Adobe Fontsオススメ欧文書体－Serif・San Serif・Slab Serif編｜文字とフォントのことはじめ10
Adobe Fontsオススメ欧文書体－Serif・San Serif・Slab Serif編｜文字とフォントのことはじめ10 欧文書体の新定番をAdobe Fontsで見つけよう 文字・フォント・デザインの情報をお届けする連載「文字とフォントのことはじめ」、第10回は膨大な欧文書体のなかからオススメフォントを紹介していきます。 Adobe Fontsは非常に多くのフォントを自由に使えるクラウドフォントサービスです。 その数は2023年12月現在、25,000以上にものぼり、その多くはラテン文字を中心にした、いわゆる“欧文書体”が占めています。 デザインワークでは、使えるフォントの数が多いほど、文字表現の選択肢は増えていきます。さまざまな書体が使えることはデザイナーにとって歓迎すべきことなのは間違いありません。 しかし一方で、その膨大な書体を前に、“数が多すぎて、探すのが大変”、“どれがい
タイポグラフィ｜デジタル庁デザインシステムβ版
タイポグラフィの定義は、一貫性のあるユーザー体験を作り上げる上で極めて重要な役割を果たし、ウェブサイトの全体的な視覚的アイデンティティ、読みやすさ、ユーザー体験等に大きな影響を与えます。
Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb Design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
画像生成AIのMidjourneyを1年間使い続け、特に気に入っているのが、AIによるロゴデザインの作成です。 ロゴを適当に利用してしまうと、大きなデメリットしかなく、もったいなさすぎます。 その理由はずばり、ロゴは単なるきれいなイメージではないからです。 ロゴは、ブランドのすべての価値を表す重要な略語なのです。 出典: The 7 Types of Logos And How to Use Them – 99designs それぞれのロゴの背景には、ブランドの世界観が詰め込まれています。 ロゴを見たときに、意識的にせよ無意識にせよ、あなたの脳はストーリーや感情、経験で満たされます。 実際、人間の脳はテキストの６万倍の速さで画像を処理しているそう。 もしかしたら、これまで無料のロゴを利用したり、プロのデザイナーに頼むと高くつくので、自分で作っているかもしれません。 しかし、Midjourn
Want help enforcing rules? 👮 Gently nudge you and your team into ECSS. Install the Stylelint config Eager to build something? 🏁 A quick & efficient starting point is within reach! Clone the scaffolding library (WIP) Want to know the beast? 📰 Go ahead and see what you think of it! Dive into ECSS rules Curious about it all? Well, keep scrolling! Why ECSS? Because CSS as a language is misunderstoo
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
デジタル庁デザインシステム デジタル庁デザインシステムとは、名前の通りデジタル庁が提供しているデザインシステムです。 行政機関や公共性の高い組織のWebサイト、アプリケーションを構築する際に利用することを念頭に置いて構築されています。 2024/05/30にv2.0.0としてベータ版が公開されました。 デジタル庁デザインシステムの内訳 デジタル庁デザインシステムには以下の成果物が含まれています。 デザインシステム本体 Figmaのデザインデータ v2系 Figmaのデザインデータ v1系 React製のコードスニペット イラストレーション/アイコン素材 以降は内容物をそれぞれ確認しつつ、デジタル庁デザインシステムがどのようなものかを考えていきます。 デザインシステム本体 デジタル庁デザインシステムベータ版のWebサイトのことを指します。 はじめて本ウェブサイトを見る方への業務での活用につい
How not to use box shadows
So you think you know box shadows? Box shadows. I love them. Four years ago I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I. If you are looking for a how to use box shadows to get the look of the latest UX trend, this is not the right article for you. But if you like some janky creativity, stay tuned. I want to sha
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
Hello Ridgeliners! I don’t aspire to write “Japan travel tip” notes here on Ridgeline, but this is such an easy trick, and one seemingly rarely known, that I can’t help it. As Japan has seen a resurgence of tourism, I’ve noticed more and more slightly-confused looking folks hauling their colossal suitcases around like traumatized barbarians. If you’re one of these suitcase luggers, there’s an easy
a portal into a mythical forest on the wall of my small messy bedroom detailed cinematic dof render of an old dusty detailed CRT monitor on a wooden desk in a dim room with items around, messy dirty room. On the screen are the letters “FLUX” glowing softly. High detail hard surface render underwater scene of two owls sitting at a fancy dining table with a lit candle in the center, the two owls are
Who doesn’t love a good front-end tool? In this roundup, you’ll find useful front-end tools that were popular last year and will help you speed up your development workflow. Let’s dive in! Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These t
プロンプトを元に動く文字ロゴを生成するプロジェクト「Dynamic Typography」が、香港科技大学とテルアビブ大学の研究者らにより公開されました。 🪄 animate your word! https://animate-your-word.github.io/demo/ 生成される文字ロゴはこんな感じ。 以下は「カップルが手をつないで歩いており、女の子が男の子の後ろを歩いている」というプロンプトで作成された文字。 「2人がキスをし、1人が手でもう1人のあごを押さえる」 「発砲する2人の兵士」 「砂漠をしっかり歩くラクダ」 「望遠鏡を持つ手をカメラに向ける」 「騎士が剣を抜いて前方に向け、戦いの準備をしている」 「蝶が横向きに飛んで羽をばたつかせる」 「危険な怪物が口を開き、誰かを飲み込もうとしている」 香港科技大学のリュウ・ジチェン氏らは「テキストアニメーションは感情を呼び起こ
Data Table Design PatternsData tables come in various sizes, contents, purposes, and complexities. The ability to query and manipulate data is a crucial requirement for most products that are being designed today. Enterprise software companies often serve large quantities of data to their users, prioritizing well-designed table experiences. This article is a collection of best practices to help yo
Ideogram
Ideogram v0.1 is open to everyone for free — August 29, 2023 Today, we're opening Ideogram to everyone on the planet! Ideogram enables you to turn your creative ideas into delightful images, in a matter of seconds. It's free and has no limits, and it can render text! Sign up at https://ideogram.ai and start creating images from text, and get inspired by the creativity of others. Ideogram (pronounc
Note: 👍 The CSS Working Group has resolved to adopt this proposal, and begin drafting a new specification for CSS Mixins & Functions. Author ¶ Miriam Suzanne (Based heavily on a custom-function proposal by Tab Atkins) Intro ¶ In order to reduce code repetition, ensure consistency across a project, and encourage best practice, authors have often turned to third-party CSS pre-processors (Sass, Less
If you’ve ever attempted to create responsive type that seamlessly adapts and scales between pre-determined sizes within a type scale based on viewport or container widths, you may have wrestled with JavaScript or wrangled with CSS calculators. But with the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords.
デザインシステム「Tsukuri」でテキストフィールドのコンポーネント設計に挑戦した話 - ANDPAD Tech Blog
こんにちは。株式会社アンドパッドでプロダクトデザイナーをしている @zouzei8to10 です。 私は、今年の6月入社のため、アドベントカレンダーもテックブログも初めてとなります。どうぞよろしくお願いします！ これはアンドパッドの2023年のアドベントカレンダーの13日目の記事です。 他の方の記事については下記のページからぜひご覧ください！ qiita.com 今回の記事ではANDPADで構築・運用しているデザインシステムの「Tsukuri（ツクリ）」にテキストフィールド（＝入力フォームなどで利用する1行のテキストの編集を可能にするテキスト・コンポーネント）のコンポーネントを追加するために行ったことを書きたいと思います。 ANDPADのデザインシステム「Tsukuri」 テキストフィールドを設計する テキストフィールドを理解する ANDPADのテキストフィールドはどんなユースケースで使わ
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
1.125 (v9.31.0)
3^2 / 2^3の答えである1.125を基本の比にし、様々な大きさをすべて計算しなおす。「黄金比なんて誰も設計に使っていない」というような本を読み、黄金比を使っているのがちょっと恥ずかしくなったからだ。4乗していくとなんとなく大きくなっていくようで、キリの良い数字が増え、自己満足度が上がる。結局は黄金比に近い(1.125^4 = 1.602)ので、最終的な結果は変わらない。 巨大なハイパーリンク まず、かつてTwitterとして知られていたプラットフォームへ投稿する時に使う、短めの概要を別に作るようにする。それに使うだけではもったいないので、ホームの投稿一覧をリストからセクションに変えて、そこでも使うようにする。その流れでsection要素全体をハイパーリンクにするようにし、その結果CSSが複雑になる。ここで言う「複雑」とは、やりたいことと実装に大きな乖離があり、レンダリング結果とコード
Mastodon 4.2
As Mastodon continues to grow, we’d like to make sure we’re doing all we can to help you connect with your friends and your interests. Most importantly, we want to bring you features that make it much easier to connect with people that matter to you. In this version we overhauled search. The interface for searching is completely new and inspired by the app Ivory—as you type, a popout provides you
It’s Time To Talk About “CSS5” — Smashing Magazine
Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3
The most commonly used terms in product design are User Interface (UI) and User Experience (UX). These similar-sounding terms are not new concepts but are often used interchangeably. Understanding the differences in UI and UX gives a better insight into what product design entails. This also helps clear out any generic confusion commonly associated with these concepts. UI and UX are overlapping co
週刊Railsウォッチ: 7.1でバリデーションメッセージのアポストロフィ->カーリー置き換えが取り消しほか（20230928後編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。つっつきで一同がこのコードにどよめきました。 FizzBuzz 実装はいろいろあるけど、 kazuho さんによる実装は奇妙さと美しさが同居していて今でも強く印象に残っているhttps://t.co/f208DBeRUI pic.twitter.com/G3QoReGdyw — Takuto Wada (@t_wada) September 21, 2023 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事
はじめに この記事では、受託開発において WordPress テーマを制作する時に、ハイブリッドテーマで構築するための設計・アプローチを提案するものです。 記事タイトルに「受託開発における」と含めた理由は、WordPress テーマディレクトリに公開したり、不特定多数に配布するようなテーマにおいては、この記事のアプローチが必ずしもベストな方法ではないと考えるからです。あくまでも、特定の WordPress サイト (特定のクライアント・エンドユーザー) 向けに最適化したテーマを制作するというシチュエーションにおいての話となります。 ハイブリッドテーマとは ? まず、ハイブリッドテーマ含め、どのようなテーマの形態が存在しているかを、WP Tavern の記事 (Block, FSE, Hybrid, Universal? What Do We Call These New WordPress
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable
Tailwind CSS実践入門
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
使うだけで時短になるWeb、デザイン制作の新ツール・フリー素材50選
Astro と Tailwind CSS でこの Blog をリニューアルしました
Panda CSS - The Origin Story
Front-end development’s identity crisis
ロゴデザイン作成に効く、Midjourneyプロンプトの【新常識】
ECSS — Simple Rules for efficient CSS
Explore デジタル庁デザインシステム ベータ版
The Magical Japanese Art of Luggage Forwarding
Black Forest Labs - Frontier AI Lab
Top Front-End Tools Of 2023 — Smashing Magazine
テキストをアニメーション化して生成するプロジェクト「Dynamic Typography」が誕生
Data Table Design Patterns
CSS Mixins & Functions Explainer
Responsive type scales with composable CSS utilities
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
UI and UX: Crucial Components of Product Design
受託開発におけるハイブリッドテーマ開発 – Aki Hamano