Design, prototype, collaborate, publish.
Design, prototype, collaborate, publish.
Core A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 24Kb. Static A smart optimizer that makes your app fast with partial analysis, extracts CSS, flattens your tree, and removes code. Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other.
200+ DESIGN behindsCocodaは、デザインの裏側をまとめた事例集です。 日本を代表するデザイン組織から、200以上の事例が公開されています。 CONTENTS デザインの裏側をまとめた 200以上の事例ブランドから、プロダクト設計、デザイン組織の立ち上げ...。様々なデザイン領域の深い事例が、日本で最高峰のデザイン組織によって掲載されています。 RECOMMEND あなたの興味に合わせて デザイン事例をおすすめあなたの興味に合わせて、豊富なデザイン事例の中から ピッタリなコンテンツをおすすめします。 MY LIST 自分好みのリストに まとめるコンテンツの中でぴったりなものを見つけたら、あなただけのリストを作って、いつでも見返すことができます。 GET STARTED さっそくはじめる
Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat
Improve Customer Engagement. Increase New Feature Adoption. Build a Shipping Cadence. Build Credibility... The changelog has been a great way to allow our most passionate customers get regular updates on new features and fixes, they also provide a rallying point for development that keeps us shipping on a regular cadence. Tom, Founder, Outline Our public changelog is integrated into the product wi
About Button Generator CSS button generator is a free online tool you can use to create CSS button styles in one click. How do I create a button? Just find a CSS button you like the most and click on it. That’s it! The CSS code for that button is now in your clipboard. Is JavaScript or jQuery required for these buttons to work? Absolutely not. The generated code is CSS-only. Can I use these button
Responsivize is an open-source, cross-platform, desktop app that is used to develop responsive websites! With Responsivize, you can test your web apps on popular devices like iPhones, Android phones, iPads, MacBooks, and you can even set custom dimension devices, that you set the dimensions for! This gives you the ability to test your apps on everything from widescreen monitors to smart fridge scr
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview Tabs are a common component of design systems but can take many shapes and forms. First there were desktop tabs built on <frame> element, and now we have
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまとめた方法論です。 それを真似て、自身の経験からデザインシステムとしてあるべき姿を12個にまとめてみました。 無理やりなところやコンテキストによるところがあると思いますが、半分ネタ半分本気で作りました。 文章の構成などもあえて真似て書いています。 何かの参考になればと思います。 はじめに デザインシステムは次のようなWebサービスやアプリを作り上げるための方法論です。 宣言的なフォーマットを使い、プロジェクトに新しく加わったメンバーが要する時間とコストを最小化する。 UIパーツの依存関係を
HeyDesigner is the go-to newsletter for product people, UXers, PMs and design engineers. Join thousands of designers and developers to receive a weekly roundup every Monday around 8 am (EST), packed with the latest design and frontend articles and resources. What’s inside Highlights of the week → A roundup of top articles along with a relevant sponsored product or service (clearly marked as sponso
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く