intra-mart で業務アプリケーションを構築するためのデザインシステムである intra-mart Design System を公開しました。 https://document.intra-m …
intra-mart Developer Site
intra-mart で業務アプリケーションを構築するためのデザインシステムである intra-mart Design System を公開しました。 https://document.intra-m …
Have you ever wondered about the possibility of having your work as a developer made easy via frameworks and tools?. Well, here’s where your questions can be answered. In reality, there are over a hundred CSS frameworks that make it easy to build any website, application or blog with perfect interfaces. All that’s needed is the tap of a few buttons. Discussed below are such CSS frameworks. A frame
Contents x Get started Use Freehand Integrations Account administration Security Billing and plans Your New InVision Update hub Classic InVision Release notes Powered by Design System Manager (DSM) Dark LightContentsDesign System Manager (DSM) Dark LightIntro to DSM2 Articles in this category Building Design Systems3 Articles in this category Creating and Using DSM Design Systems14 Articles in thi
Google Design
Our new series explores the impact of Google’s revolutionary design system
Implementing Material Design in Your Android app
Material design is a comprehensive approach to visual, interaction and motion design for the multi-screen world. Android 5.0 Lollipop and the updated support libraries help you to create material UIs. Here’s a rundown of some of the major elements of material design and the APIs and widgets that you can use to implement them in your app. Tangible surfaces In material design, UIs are composed of pi
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay14です！ 昨日は「WebARの本質的な価値について考えてみる」のお話でした。 WebARの本質的価値を考えてみる 本記事ではAdobeのデザインシステム、spectrumから学べるデザインの基礎についてご紹介します。 今年の10月後半にAdobeのデザインシステム、Spectrumの公式サイトが発表され、話題を呼びました。 spectrumに関する記事はAdobeのブログでも発表されていますが、細かい内容を日本語で解説している記事がないため、今回は私が読んで使えると思った部分を抜粋しご紹介いたします。 注意点としては、今回の記事はあくまで私の解釈で書かせていただいております。 元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところ
We present an interactive design system that allows casual users to quickly create 3D-printable robotic creatures. Our approach automates the tedious parts of the design process while providing sample room for customization of morphology, proportions, gait and motion style. The technical core of our framework is an efficient optimization-based solution that generates stable motions for legged robo
活動終了のご報告 私たちスタンダードデザインユニットは、2020年6月末日をもって本ウェブサイトの更新を停止するとともに、チームとしての活動を終了いたします。サイトは2018年10月よりおよそ1年半にわたって運営して参りましたが、これまで続けることができたのはひとえに読者の皆さんの支持のおかげです。ありがとうございました。またどこかでお会いしましょう。 UIにおける見えるけど利用できない非活性な領域の実装とinert属性について モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 Component Driven Development for Static Deliverables: A Retrosp
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular.
React Spectrum
React Spectrum A React implementation of Spectrum, Adobe’s design system. Get started • GitHub AccessibleReact Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support. AdaptiveReact Spectrum components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a
The ultimate UI kit and design system for Figma. 10,000+ components.
Adobe Design System の React Spectrum を理解していく ~ Part 1 概要~
はじめに React を使用したコンポーネントライブラリのコードリーディングをしたいなと思い、Adobe のデザインシステムに組み込まれている React Spectrum を読んでいるので、そのメモを残していく。 1 つの記事にまとめたかったが、コードを読むのに時間がかかるのと、かなり長くなるので分割して残していく。 React Spectrum の概要 本体は Spectrum であり、この思想を生かしたコンポーネントライブラリーとして、React Spectrum がある。 Spectrum の原則は「Rational」、「Human」、「Focused」の 3 つになっており、この原則どおり、アクセシビリティや i18n などを包括的にカバーするように React Spectrum もできている。 React 以外にも CSS だけ取り出してスタイルを当てれるように spectru
InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。
InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。 寝ようとしていたらまたInVision先輩が…。今度はなんですか？え？買収？また買収したの？ InVisionがBrand.aiというデザイン管理ツールを買収したことを発表しました。 さらに、Brand.aiを元にInVision Design System Manger（DSM）を開発中であることを発表。今年の12月にリリース予定とのことです！
We have thousands of engineers committing React code every day to Meta’s largest codebases. Part of our responsibility on the Flow team is to make it as easy as possible for anyone to contribute, from design system React experts to C++ engineers making one-off internal pages to support their backend services. Over the last year, we’ve built several new language features to make it easier than ever
Filament Group, Inc. | User Interface Design & Responsive, Accessible, Resilient Web Development | Filament Group, Inc., Boston, MA
we design intuitive, accessible, resilient & beautiful websites and apps. Filament Group is a UI design studio. We love to work with clients who are committed to exceptional user experience and thoughtful consideration of accessibility to ensure universal access. We love making complex things simple and understandable. And we love helping organizations build UI design systems that are robust and s
Flutter初心者たちが3ヶ月で新規アプリをリリースした話 #Flutter - Tech Blog
ネイティブエンジニアの桐山です。 Timersでは新規事業として、毎月無料でましかくプリントを印刷できるサービスを始めました！ 新規アプリでFlutterを採用し、3ヶ月でiOS・Androidアプリをリリースした話の概要編をお届けします。 はじめに この度弊社で新しい家族向けアプリをFlutterで作りました！ https://famm.us/ja/print/top 毎月10枚がずっと無料の写真プリントアプリ Fammプリント Timers, Inc.写真／ビデオ無料apps.apple.com play.google.com おおまかなフロー Why Flutter? 弊社では元々家族アルバムアプリFammや年賀状アプリをネイティブで開発しており、写真を扱うネイティブ開発の知見も人的リソースもありました。新規アプリの開発するにあたって、ネイティブで開発した方が良いのでは？という意見が
Naming Things
There are only two hard things in computer science: cache invalidation and naming things. Phil Karlton Being a professional web developer means taking responsibility for the code you write and ensuring it is comprehensible to others. Having a documented code style is one means of achieving this, although the size and type of project you’re working on will dictate the conventions used and how rigor
Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly
コードベースのデザインツール「UXPin Merge」をNext.jsで試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近コードベースのデザインツール「UXPin Merge」を触る機会をいただいたので、実際に試したことをまとめたいと思います。 UXPin Mergeとは？ UXPin Mergeはコードベースのデザインツールです。 一般的なデザインツールでは描画したものはベクター、ラスターのイメージデータとして扱われますが、UXPinで描画したものはコード化が行われ実際に動作するコンポーネントとしてレンダリングされます。 また、UXPin Mergeでは作成したReactコンポーネントをインポートしてデザインに利用することができます。 今回試してみたこと UXPin Mergeでは「React」に対応していますが、今回は「Next.js」のプロジェクトでコンポーネントを作成し、作成したものをUXPinに取り込んで利用
Kotlinらしいコードを書こう - Convert Java File to Kotlin File のあとにやること / What to do after Convert Java File to Kotlin File
GOV.UK Vue
Build Vue apps with GOV.UK Design System components GOV.UK Vue provides Vue implementations of every component in the GOV.UK Design System. Get started Get startedLearn how to install GOV.UK Vue and start using it in your app - whether it's a government service or not. Start using GOV.UK Vue Goals of this project GOV.UK Vue aims to provide a seamless development experience for you and an outstandi
Storybook is the industry-standard UI component workshop. Thousands of application and design system teams worldwide spend most of their day working inside Storybook—building, documenting, and testing their UI components. Therefore, Storybook needs to run as fast as possible, so it does not slow down their workflow. Storybook's performance when first booting up or rebuilding a changed file largely
【2024年最新動向】日本発の「いけてる」デザインシステム事例10選｜Goodpatch Blog グッドパッチブログ
こんにちは！グッドパッチUIデザイナーのharuです。 この記事では、2024年時点の最新のリサーチをもとに、国内のデザインシステム10事例をグッドパッチの解説つきでご紹介します。 「良いデザインをサポートするための仕組み」であるデザインシステムは、ものづくりの現場において、作り手の共通認識となることで価値を発揮します。「どうすれば、チームに浸透し、ものづくりに一貫性やスピードを生み出すデザインシステムを構築できるのか？」このように悩んでいる開発組織は少なくありません。 こうした悩みに対してグッドパッチがお伝えするのは、「デザインシステムで最も重要なのは、組織とその目的にフィットしているか」ということです。 そこで今回の事例集では、単なる有名どころではなく、「組織や目的にフィットしているな」「こんなデザインシステムあるんだ！」と私が思った魅力的なデザインシステムを紹介します。 「デザインシ
Government Digital Service – GDS is leading the digital transformation of the UK government.
Design System Day 2024 will showcase the breadth of design systems work across our community. Join us as we explore "the unsung heroes of the design system.
Style Guide Best Practices
Style guides and pattern libraries are essential tools to help Web teams maintain sanity while creating experiences for our multi-device Web. The benefits of style guides are many: they establish a common language, make testing easier, save time and effort, and create a useful reference to keep coming back to. And most importantly, it lays a future-friendly foundation for your organization to modi
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
The free, ever-expanding design system & UI kit for Figma ✶ Updated every month ✶ The free, ever-expanding design system & UI kit for Figma ✶ Updated every month ✶
2020年4月に、意匠権に関わる法律「意匠法」が改正されます。 今回の意匠法改正では、UIに関わる部分が大きく変更されます。いろいろ学ぶ機会がありインプットしていく中で、特にWebやスマホアプリに関わるデザイナーに意匠法を知る、または調べるキッカケになればと思ったのと少しの願いを込めて書きました。 何が変わるのか詳しくは特許庁のサイトで自ら確認して頂きたいが、UIに関わる点では、「画像」が保護対象に加わっています。画像という単語には違和感がありますが、この「画像」は、ソフトウェアやアプリ上のネットワークを通じて利用の都度提供される画像や物品以外の場所にに投影される画像が対象となります。WebやスマホアプリのUIからプロジェクターなどで投影されるUIも対象になったことになります。 また、「画像」には、操作画像と表示画像の2つが対象となります。操作画像は「操作の用に供される画像」で、検索や登録
This article is about the API design pattern. For the user interface introduced in Microsoft Office 2007, see Microsoft Office 2007 § User interface. For Microsoft's 2017 visual design language, see Fluent Design System. In software engineering, a fluent interface is an object-oriented API whose design relies extensively on method chaining. Its goal is to increase code legibility by creating a dom
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
Microsoftの「Windows 10 Redstone 5」（RS5）の最新プレビュー版では、「Windows Defender」サービスに施される2つの中核的なアップデートが披露されている。 Microsoftが「Windows 10 Insider Preview Build 17650」（RS5）をリリースした。RS5は、間もなくリリースされる「Redstone 4」（RS4）に続くバージョンで、2018年中に登場する予定だ。この最新ビルドは、「Windows Insider」の「Fast Ring」で「Skip Ahead」オプションを選択しているユーザーに提供される。 先頃、「Windows」シェルと中核アプリ群に「Fluent Design System」によるアップデートが施されたが、Microsoftは今回の最新ビルドで、そのスキームを「Windows Defende
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Adobe XD 2020年6月アップデートリリース！デザイントークン、スタック、スクロールグループなど #AdobeXD | Adobe Blog
スクロールグループを使用すると、プロトタイプを実際のWebサイトやアプリのように動作させることができます。画面の一部の領域がスクロールするような、フィード、リスト、カルーセル、ギャラリーなどをデザインできるようになりました。これは、Adobe XDのUserVoiceフォーラム（英語）に寄せられたなかでも最も要望が多かった機能の一つ（英語）です。 デザイン上の任意の領域をスクロールグループとして指定し、縦、横、または両方向にスクロールするように設定できます。カンバス上では、スクロールグループを作成した領域に青いハンドルが表示されます。デスクトップでプロトタイプをプレビュー、あるいはプロトタイプのリンクとして共有すると、指定した領域を実際にスクロールすることができます。 Let’s XDでスタック（英語）とスクロールグループ（英語）の使い方を学ぶことができます。さらに、ベイエリアのUI/UX
Microsoftの新デザイン言語「Microsoft Fluent Design System」はWindows 10 Insider Previewで導入が進められているが、Insiderビルドではない通常のWindows 10でも標準アプリでの導入が始まったようだ(On MSFTの記事、 Sihmarの記事)。 手元のCreators Update環境では23日、「電卓」と「アラーム ＆ クロック」がそれぞれバージョン10.1705.1302.0とバージョン10.1705.1304.0にアップデートされ、すりガラスのような半透明効果が画面に適用されるようになった。一方、Anniversary Update環境では同日にアプリが更新されているが、バージョンはそれぞれ10.1705.1301.0と10.1705.1303.0で、半透明効果は適用されていないようだ。 半透明効果はアクティブ
VS Codeのエディタ部分をPWAにしてAzureにDeployして、モバイルで使う - backstage
普段は開発にもメモにもVS Codeを使っているのですが、VS CodeはChromebook等では使えません。そこでVS CodeのエディタエンジンであるMonaco Editorを、Azure Web Appsにデプロイして、PWAとして使ってみました。 PWAにすることで、ブラウザさえあればオフラインでも動作するようになり、エディタアプリのように利用できます。 Monaco Editor on Cloud https://monaco-on-cloud.azurewebsites.net 実際に、この記事もこのエディタで書きました。 以下に、今回使ってみた技術を列挙します。なお本件はGlobal Azure Bootcamp 2018@TokyoでLTをしたのですが、思ったよりもAzure関係ない技術が多かったので、こうして改めてまとめてみました。 Visual Studio Cod
The 2019 Design Systems Survey by Sparkbox
The 2019 Design Systems Survey is intended to illuminate how design systems are created, used, and maintained. Design systems have the ability to solve real-life problems by establishing consistency in design and code, promoting efficiency when creating products, communicating usage guidance, encouraging reuse instead of rework, increasing the accessibility and usability of digital properties, and
Microsoftは米国時間5月11日、「Build 2017」2日目の基調講演で、2017年秋の「Windows 10」アップデートでリリース予定の新機能の一部を明らかにした。Windows 10の次期アップデートは、「Fall Creators Update」となる。Fall Creators Updateはこれまで、「Redstone 3」という開発コード名で呼ばれていた。 Windows 10のアップデートは年2回のペースでリリースされるが、この新しいアップデートはバージョン1709となることがほぼ確実だ。9月に完成し、10月から「Windows Update」を通して配布される見通しだ。ただしMicrosoftはこの日程をまだ正式に認めておらず、Fall Creators Updateは「2017年中」にリリース予定とのみ述べている。 まず、新しいデザインシステム「Microso
CO. – Co. Design Company
A design studio. We work with communication through graphic design. A creative studio with a collaborative approach, we focus on identity, interaction, and information design. Our work for Ericsson has recently been awarded the 2018 Red Dot Award and the 2019 iF Design Award. Winning both in Brand Design and the Design System categories.
デザインシステムは最優先にはならないです
どちらかというと優先順位は低めですデザインシステムの必要性を説く時代は終わりましたが、その利用促進や運用継続は容易ではありません。デザインシステムの構築者とプロダクト設計者が同じ人物であるような小規模組織では、ガバナンスの課題は些細なものばかりです。また、コミュニケーションが活発な小さな開発チームなら、メンバーのモチベーションが続く限り、維持・管理は比較的容易です。 組織が大きくなり、様々な体制やプロセスを持つ複数のプロダクトが存在する場合、全員一丸となってデザインシステムを取り組むのは難しくなります。その結果、「作る側」と「使う側」に分かれがちです。この問題を解決するため、各プロダクトから代表者を集めて議論する連邦制のような体制が考えられます。しかし、デザインシステムへのコミットメントを本業と両立させるのは容易ではありません。 プロダクトの開発と改善に集中しているチームにとって、デザイン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
100+ Best CSS Frameworks For Responsive Design
Sketch plugin | Brand.ai
Adobeのデザインシステム、spectrumから学べるデザインの基礎 - bagelee（ベーグリー）
Interactive Design of 3D Printable Robotic Creatures
鎌倉のクリエイティブエージェンシー （グリュック） Planning + Design + System
シフトブレイン／スタンダードデザインユニット
Untitled UI Icons — The Ultimate Figma Icon Library
New Flow Language Features for React
A complete guide to iconography
Material 3 やめました / Good-bye M3 design system
Storybook Performance: Vite vs Webpack
Free Resources for Designers | Premium Pixels
意匠法改正でデザイナーは何に気をつけたらいいのか｜たけてつ
Fluent interface - Wikipedia
「Windows 10 Redstone 5」最新ビルド、「Windows Defender」に新機能
News from WWDC24: WebKit in Safari 18 beta
Insiderビルド以外のWindows 10標準アプリにもFluent Designの導入が始まる | スラド IT
Windows 10次期大型更新は「Fall Creators Update」--新デザインなど