Adobe XDとBootstrapで作業を効率化 第3回: デザイントークンでつなぐAdobe XDとBootstrap | Adobe Blog
前回の記事では、Adobe XDを使ってデザインガイドを作成し、登録したカラーやコンポーネントには「デザイントークン」として名前を付けました。今回は、デザイントークンを使って、デザインガイドとBootstrapを連携させる方法を紹介します。 連携方法はシンプルです。ただ、Bootstrapの構成を理解をしていないことには始まりません。最初に、連携方法を理解するのに必要なBootstrapの基本を説明しておきます。 Bootstrapの基本構成 Bootstrapは、CSSメタ言語であるSCSSを用いて管理されています（2020年1月時点）。SCSSは、少ない修正で多くの箇所の変更ができるシステムを構築できます。BootstrapもCSSの記述量は膨大ですが、SCSSを修正すれば簡単に様々な箇所の変更が行えるようになっています。この記事も、紹介する実例はSCSSの修正によるBootstrap
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以上にものぼり、その多くはラテン文字を中心にした、いわゆる“欧文書体”が占めています。 デザインワークでは、使えるフォントの数が多いほど、文字表現の選択肢は増えていきます。さまざまな書体が使えることはデザイナーにとって歓迎すべきことなのは間違いありません。 しかし一方で、その膨大な書体を前に、“数が多すぎて、探すのが大変”、“どれがい
lecture.nakayasu.com
2Dアニメーションソフトウェア コマ撮りとアニメーション Lightning Doodle Deepmotion Animate 3D Matterport Proカメラ Matterport Sketchfab Deleting faces in Blender Metashape Turntable Based 3D Scan System 3D Body Scan RealityCapture 3D Scanning Overview Adobe Media Encoder Image Morphing Morphing Part 3 Morphing Part 2 Morphing Part 1 Kinetic Typography Part 3 Kinetic Typography Part 2 Kinetic Typography Part 1 Time Remapping P
The organization of space is key to every great design. Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned. This foundational scaffolding is a requirement for all design systems. In this guide, we’ll walk through the basics of defining spatial base units, creating relationship rules with grids, and br
タイポグラフィの定義は、一貫性のあるユーザー体験を作り上げる上で極めて重要な役割を果たし、ウェブサイトの全体的な視覚的アイデンティティ、読みやすさ、ユーザー体験等に大きな影響を与えます。
The evolution of scalable CSSA deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices. IntroductionHow we write and think about CSS has changed significantly since the web’s beginning. We’ve come a long way from table-based layouts, to responsive web design, and now into a new era of adaptive layouts powered by modern CSS features. Managing a
Material-UI ではアプリ全体の見た目や動作をThemeで設定することができます。 過去に数回のフロントエンド開発で Material-UI を使ってきたのですが、その中に必ずと言っていいほど設定するTheme項目があります。 そんな必ず設定するようなTheme項目をまとめました。 対象バージョンは4.0.0以降です。 尚、ここで紹介した設定項目を全て適用したThemeとデフォルトのThemeを比較できるサンプルを作成したので参考にしてください。 ボタンのラベルが大文字になるのを防ぐ - typography.button.textTransform="none" TextField のバリエーションを変更する - props.MuiTextField.variant テーマカラーの設定 - palette.primary 入力コントロールの色を統一する - props.{MuiC
Inhouse - Pepabo Design
About Inhouseとは、GMOペパボ株式会社の共通基盤デザインシステムです。コンセプトや仕組み、プリンシプルを紹介します。 Flavors Color、Sizing、Icon、Typography、Elevationなどのブランドごとに置き換え可能なデザイントークンをFlavorと呼んでいます。
Animation illustrating how changes to Diez source code trigger visual updates to web, iOS, and Android apps. The Design Token Framework Diez radically reduces the cost of delivering a consistent visual identity across your company’s apps & websites. Get Started What is Diez? Diez is a free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native plat
ということで、おはようございます！ デザイン講師ブロガーのセッジです！ 人は基本的に何にでも意味を感じるので、当然文字の形にもあります！ 色に意味があるように、実は文字の形にも意味があります。 文字の形にも「力強さ」だったり「上品」だったり、面白いところでは「明るい」などといったイメージがあるのです。 文字の形を選ぶという行為そのものも、実はデザインの範疇に入ります。 こうして、文字の形や太さを選び、サイズを決め、字間・行間、位置関係などを組み合わせ、可読性・判読性・視認性、そして美しさを意識しデザインする事を「タイポグラフィ」といいます。 デザインとは課題を解決する事です。 そして、その課題を解決するにあたっては「選ぶ事」も重要です。 「なぜそのフォントを選ぶのか」を考えましょう。 書体とフォント 書体とフォントというそれぞれの言葉は、一般的には同じ意味として捉えられているようですが、厳
How we built our multi-platform design system at Booking.com
Building a design system that works is a challenge at any scale. Building a design system for 150+ product teams, used by 200+ designers and 800+ developers, and serving 4 different platforms? That’s a challenge requiring lots of special considerations. When building a design system for such a large scale, many questions come to mind: How can we make it strong and scalable to multiple themes and b
Figma Config 2022 感想まとめ - Goodpatch Tech Blog
2022年5月10日から2日間かけて行われた「Figma Config 2022」のアーカイブ動画が先日公開されましたね！ 本記事では、有志のGoodpatchエンジニアが興味を持ったセッションをピックアップし、セッションの概要や感想をご紹介します！ すべてのアーカイブ動画はこちら👉 Config 2022 - YouTube ピックアップセッション💙 Figma tutorial: What’s new in Auto layout negative spacing absolute position text baseline alignment How design tokens can make us better collaborators - Jan Six (Config 2022) Figma Hacks and Workflow Enhancements with P
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
Facebook started as a single app. Now, 15 years later, we offer a suite of products that help people connect to their friends and family, find communities and grow businesses. Today, we’re updating our company branding to be clearer about the products that come from Facebook. We’re introducing a new company logo and further distinguishing the Facebook company from the Facebook app, which will keep
Tailwind CSS 3.0 alpha1〜2の注目の新機能（５選！）をご紹介！ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう！ でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を５つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan
ロゴデザイン案の作り方-ChatGPT×画像生成-｜しょーてぃー/ Experience & Prompt Designer
※おまけ枠以外は、全文無料で読める記事です 下記のツイートをRT応援すると今は50%OFFになります(noteのSNS*プロモ機能利用） ※SNSプロモーション機能って？ →https://note.jp/n/n1878ea0f7824 🎉AIと共同制作したロゴ完成を祝い.... 無料公開の8,000文字に追加で、 10,000文字の有料おまけ枠を”75%OFF”で読めるようにしておいたで〜。 条件：このツイートをRT応援(noteのSNSプロモ機能利用） 期間：5月中？ 【ロゴデザイン案の作り方-ChatGPT×画像生成- 】 https://t.co/WCgcux5Qht@shoty_k2 — しょーてぃー / Experience Designer & Prompt Designer (@shoty_k2) May 28, 2023 ------Prompt to me------
Jun 6, 2023 by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brando
How to build a GPT-3 App with Nextjs, React, and GitHub Copilot
EngineeringHow to build a GPT-3 App with Nextjs, React, and GitHub CopilotIn this step-by-step tutorial, you will learn how to use GitHub Copilot to build an application with OpenAI’s gpt-3.5-turbo model. At the beginning of the year, I started working out with a trainer who wanted me to start tracking my food, but I’ve always been super against tracking my meals because it just doesn’t work for m
Building a tooltip component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color-adaptive and accessible tooltip custom element. In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a va
Recursive Sans & Mono
## Maximum utility. Maximum fun. Built to maximize versatility, control, and performance, Recursive is a five-axis variable font. This enables you to choose from a wide range of predefined styles, or dial in exactly what you want for each of its axes: *Monospace, Casual, Weight, Slant, and Cursive*. Taking full advantage of variable font technology, Recursive offers an unprecedented level of flexi
数字で見るGoogleフォントベスト15 2024年版（使い方のヒント付き） 本稿執筆時点で1,052種類のGoogleフォントファミリーが、無料で利用できます。これは膨大な数の中からベストなGoogleフォントのリストを見つけるのは、干し草の中から針を見つけるようなもので、誰かの手助けが必要でしょう。 そこで、私たちはベストなGoogleフォントのリストを選出しました。あわせて、WordPressでGoogleフォントを使用する際のベストプラクティスもご紹介します。 フォントの選択は、単なるデザインの問題ではありません。サイトの直帰率やコンバージョン率に大きな影響を与える可能性があります。そのため、最初に見つけたフォントをそのまま使うのではなく、少し時間をかけて、自分のウェブサイトに最適なGoogleフォントファミリーを選択することが大切です。 もっと多くのフォントが必要な場合は、こちら
Material-UIでダークモードを設定 React Material-UIではThemeProviderにテーマオブジェクトを渡すことでフォントやテーマの色を変更することが出来ます。テーマオブジェクトはcreateMuiThemeで作成します。 テーマをダークモードに変更する場合は、テーマオブジェクトのpalette.typeプロパティでdarkを指定するだけです。 SampleTemplate.tsx import React from "react"; import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; import * as colors from "@material-ui/core/colors"; import CssBaseline from "@material-ui/cor
Noto Sans Hinted と font-feature-settings: 'palt' | blog.jxck.io
Intro Noto Sans のサブセット生成を見なおし、 Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。 作業と検証の記録を兼ねて、実施結果を記す。 fonttools これまで、フォントのサブセットの生成には以下の 2 つのツールを使用していた。 サブセットフォントメーカー WOFF コンバータ しかし、 macOS を Catalina にあげたところ、これらが起動できなくなり、フォントが生成できなくなった。 これまで GUI で行なっていたが、せっかくなので自動化するために、代替コマンドを探し、プロセスを組んだ。 いくつかツールがあるが、今回は fonttools に同梱された pyftsubset を採用することとした。 fonttools/fonttools pyftsubset こ
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
CSS size-adjust for @font-face Stay organized with collections Save and categorize content based on your preferences. As a web font loads, you can now adjust its scale, to normalize the document font sizes and prevent layout shift when switching between fonts Consider the following demo where the font-size is a consistent 64px, and the only difference between each of these headers is the font-fami
CSS min(), max(), and clamp() Stay organized with collections Save and categorize content based on your preferences. Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions. As responsive design becomes more nuanced, CSS is constantly evolving to give authors increased control. The min(), max(), and clamp() functions, no
この記事はテックタッチアドベントカレンダー24 日目の記事です。 テックタッチのフロントエンドエンジニアの taka です。 クリスマス・イブを満喫してしまったため投稿するのが遅れてしまいました（嘘） 今回は最もメジャーな React の UI ライブラリの一つであるMaterial-UIの次期バージョンである v5 を先取りしてみようと思います。 v5 は 来年 2021 年 4 月頃リリースされるようで、特にスタイリングに関して大きな変更があるようでした。 注）v5 はまだ α 版であるため、実際のリリース時には本記事の内容とは異なる可能性があることをご理解ください。 Material-UI とは material-ui.com Material-UIとは、Material Designをベースとした React の UI ライブラリです。 Ant Designと肩を並べる、React
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と整理されたようです。 下記のガイドラインの用語集の中に詳細が記載されていま
More. Helvetica. Now.
Helvetica® Now Variable builds on the groundbreaking work of 2019’s Helvetica Now release—all of the clarity, simplicity and neutrality of classic Helvetica with everything 21st-century designers need (optical sizing, stylistic alternates, and extended character set). Helvetica Now Variable offers designers more of everything: more creative freedom; more typographic expression; and more power. He
Web、タイポグラフィ、「伝える」ということ。「OnScreen Typography Day 2019」を振り返る - デザイン情報サイト[JDN]
6月9日、“オンスクリーン”におけるタイポグラフィについて、7人の登壇者たちがそれぞれの考えを発表したイベント「OnScreen Typography Day 2019」が渋谷Abema Towersにて開催されました。中心となったのは、日本デザインセンターのクリエイティブディレクター／デザイナーの関口裕さんと、POLAAR代表を務めるコンセプター／デザイナーのカワセタケヒロさんの2人。当日は、なにか答えを提示するようなセミナーでもなければ、Tipsを紹介するレクチャーでもない、 “オンスクリーン”という言葉をめぐって、さまざまな考えが交わされる1日となりました。 7月終わりの某所、ふたたびイベントに登壇した7人が集まりました。なぜ、オンスクリーンについて語り合うイベントを実施したのか。そして、そもそも“オンスクリーン”とはどういう意味なのか。主催の2人が感じていた、Webにおけるタイポグ
![Web、タイポグラフィ、「伝える」ということ。「OnScreen Typography Day 2019」を振り返る - デザイン情報サイト[JDN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa3054481ff9502044a2aba7c71c853574be1724/height=288;version=1;width=512/https%3A%2F%2Fwww.japandesign.ne.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F09%2F190730_JDN-0365R-1.jpg)
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
Structuring your Storybook
The more information you have, the harder it is to find what you're looking for. At first, your Storybook has a handful of components, so it's easy to keep track of things. But as the number of components grows, so does the organizational complexity. You end up with questions like “Where did we put that component again?” and “Is there a story for this state?” That leads to confusion, or worse, dup
Interop 2022: browsers working together to improve the web for developers Stay organized with collections Save and categorize content based on your preferences. For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web
Font size is useless; let’s fix it Translations: Chinese Japanese Russian What happens when you set "font_size": 32 in your favorite editor? I would’ve told you anyway, but I’m glad that you asked. Let’s try to guess. I am using Sublime Text 4 on macOS: If we measure letters themselves, number 32 is nowhere to be seen: 32 is not the width or height of a letter, neither is it a capital letter heigh
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
ピクセルへの愛を確かめろ！ ガジェットDITOOとゲームフォント本Arcade Game Typography いつも机の上にピクセルを 最初にDivoomの製品を意識したのは香港の警察宿舎の建物を改築したアート施設PMQの「ご当地メーカー品コーナー」だった。「TIME BOX」という8ビットコンピューター時代のピクセル画を表示できるデジタルガジェットや「TIVOO」というテレビ型ガジェットで、日本でも話題になったのでご存じの方も多いでしょう。 同社の公式サイトを見ると「9%の愛、17%の美、13%のファッション、5%の狂気、17%のパワー、8%の土壇場のゴール（！）、6%のアドレナリン、25%のハートとソウル」が、すなわちDivoomだと書かれている。いまデジタルの世界を楽しくしてくれている会社の１つだが、今回、発売した「DITOO」は、そのものコンピューター心をくすぐってくれる製品だ。
はじめに 本稿では、イギリスのタイポグラフィ専門雑誌『フラーロン（The Fleuron）』誌を探ってみる。その活動期間は、1923年に発行開始し1930年までと短く、ほぼ1年に1号発刊という計画で、7号目で幕を下ろした。その発刊の経緯と編集方針、同時代へのタイポグラフィを巡る視点を調べ、その後の雑誌類への影響を比較し、現代に残したその意義を考えてみる。 なお、本稿をまとめる前に、筆者はこの雑誌の体裁上の解剖を試みた。つまり、印刷部数、判型、本文組版、扉と目次、ノンブルと柱、内容構成、執筆者とその特徴、広告主、資金調達、定価設定、編集者による執筆者の選択、内容構成上の差異などを調べたが※1、ここではそれを踏まえている。 日本でいえば大正12年から昭和5年までの間に、ロンドンで発行された『フラーロン』は注目されることが少ない。この雑誌に掲載された論文内容と発行を支えた人物の行動は専門的かつ地
Modern CSS Techniques To Improve Legibility — Smashing Magazine
In this article, we cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and putting into practise what we learned from doing scientific researches. We can read in many ways, and there are many different types of readers, each with their own needs, skills, language, and, above all, habits. Reading a novel at home is different fro
【Premiere Pro】モーショングラフィックステンプレート39選 - Workship MAGAZINE(ワークシップマガジン)
動画コンテンツは、個性的な雰囲気の演出や製品紹介にぴったりのツールです。トランジションを追加したり、テロップにモーションがついたローワーサードを使ったりすれば、頭ひとつ抜き出た映像が作れます。 本記事では、Adobe Premiere Pro 用のモーショングラフックステンプレートを、無料31選 / 有料8選に分けてご紹介します。プロモーション / 教育 / 広告 / プレゼンテーションなどにおすすめです。 無料のテンプレート31選 1. 21 Motion Graphics templates for Premiere Pro 8種類のタイトル用テンプレートと、13種類の現代的でクリーンなトランジションを提供しています。色やフォントがカスタマイズでき、個人および商用利用が可能です。 21 Motion Graphics templates for Premiere Pro 2. Inst
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spacing, grids, and layouts
タイポグラフィ（概要）｜デジタル庁デザインシステムβ版
The evolution of scalable CSS
【Material-UI】必ず設定しておきたいTheme項目 - Qiita
Diez — The Design Token Framework
文字にはイメージがある!? フォントの選び方 タイポグラフィの基本
https://hataraku.vivivit.com/column/typography_1909
Front-end development’s identity crisis
Introducing Our New Company Brand | Meta
News from WWDC23: WebKit Features in Safari 17 beta
Building a tooltip component | Articles | web.dev
数字で見るGoogleフォントベスト15 2024年版（使い方のヒント付き）
React + Material-UIでダークモードを実装してみた | DevelopersIO
CSS size-adjust for @font-face | Articles | web.dev
CSS min(), max(), and clamp() | Articles | web.dev
Material-UI v5を先取りする - Techtouch Developers Blog
Material Design 3ガイドライン概要 - Qiita
Interop 2022: browsers working together to improve the web for developers | Blog | web.dev
Font size is useless; let’s fix it
ECSS — Simple Rules for efficient CSS
ピクセルへの愛を確かめろ！ ガジェットDITOOとゲームフォント本Arcade Game Typography
河野三男「タイポグラフィ雑誌『フラーロン』とその影響」 | ÉKRITS / エクリ