Design Systems For Figma
A collection of Design Systems for Figma from all over the globe 🌎 backed by code.
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
A collection of Design Systems for Figma from all over the globe 🌎 backed by code.
GitHub - karanpratapsingh/system-design: Learn how to design systems at scale and prepare for system design interviews
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
I agree to receive emails from Figma, and that my data will be processed in accordance with Figma’s Privacy Policy.
Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma
Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design Systems for Figma ※画像は、クックパッドのデザインシステム Design Systems for Figmaには日本のサイトをはじめ、海外のサイトのデザインシステムがまとめられています。 サイトの利用は簡単で、登録など面倒なことは一切不要です。
ユーザー体験を最高にするkintone Design Systemsをつくってます - Cybozu Inside Out | サイボウズエンジニアのブログ
春ですね〜、ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。 ユーザー体験を最高にするチームとは？ kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点では分割されていますが、ユーザー視点では1つのkintoneアプリケーションであり、各チームが足並みを揃えてデザインの一貫性や品質を意識しながら開発を行う必要があります。そこで、各チームを横断してkintoneのユーザーにより良い体験を届けることを目標としたチームが「ユーザー体験を最高にするチーム」です。 ユー
Type safe CSS design systems with @propertySeptember 1, 20238 min read CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there 🙂 In case you've never seen one, here's a typed CSS variable with @property: @property --focal-size { syntax: '<length-percentage>'; initial-value: 100%; inherits: false; } Used that one so
If you’re new to creating color palettes for digital spaces, check out my previous article, Color for brand designers working with product teams, for tips on selecting your brand colors. 👉🏻 Follow along in Figma: Community File What is a color ramp?A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.
Design Systems Database: Surf among top‑notch Design Systems
Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams
デザインシステム Advent Calendar 2023 25日めの記事です。 Ubieでデザインエンジニアをしているtakanoripです。 この度UbieのデザインシステムであるUbie Vitalsのウェブサイトを公開しました。 またUbie Vitalsを構成するUIコンポーネントライブラリであるUbie UIをOSSとして公開しました。（こちらはまだWIP） ウェブサイトやコンポーネントライブラリ公開に至った過程を振り返ります。 Ubie Vitalsの出現と失敗 Ubie Vitalsはデザインに関するガイドラインなどをまとめる箱として作られました。 Ubieではデザイン生産基盤の構築を2022年から進めていましたが、当初はデザインシステムという箱をつくらず必要なツールやドキュメントを必要に応じて作っていました。 箱を作らないことで目先の課題を解決することに集中し、できるだけ
OverviewDesign systems power the frontend teams of Shopify, IBM, Salesforce, Airbnb, Twitter, and many more. This guide for professional developers examines how the smartest teams engineer design systems at scale and why they use the tools they use. We'll walk through setting up core services, libraries, and workflows to develop a design system from scratch. Table of Contents
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
GitHub - chakra-ui/ark: A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高にするチーム 」について紹介します。 ユーザー体験を最高にするチームとは？kintoneのフロントエンドリアーキテクチャのアプリケーション構成はMonorepoを採用し、チーム単位でオーナーシップを担うことを意識しています。開発者視点では分割されていますが、ユーザー視点では1つのkintoneアプリケーションであり、各チームが足並みを揃えてデザインの一貫性や品質を意識しながら開発を行う必要があります。そこで、各チームを横断してkintoneのユーザーにより良い体験を届けることを目標としたチームが「ユーザー体験を最高にするチーム」です。 ユーザー体験を最高
Naming Tokens in Design Systems
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms and outputs, design tokens — and their names — are increasingly important. Effective token
Everything I Know About Style Guides, Design Systems, and Component Libraries I've been building a component library for my company. I've learned a lot about style guides, design systems, component libraries, and their best practices. This post will be a deep-dive on everything I've learned in the past year. Table of Contents Why Should You Care? What is a Style Guide? What is a Component Library?
Design systems enable designers and developers to quickly create quality software on a massive scale. As the needs of software-driven businesses grow even larger, design systems are evolving — they are beginning to look and work like APIs. In software development, “API” stands for “Application Programming Interface.” An API is a reliable way for two or more programs to cooperate. It allows program
GitHub - radix-ui/primitives: Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - inkline/inkline: Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Design systems, code-side Backlight empowers front-end teams to build and ship great design systems. A unique, all-in-one design system solution. For developers, loved by designers.
Design Systems For FigmaはFigmaで公開されているデザインシステムをコレクションしているWebサイトです。 AWSやUber、IBMやMS、Airtable、Spotifyなどの著名な企業やサービスのデザインシステムや、Ant Design、Material Design、Chakra UIなどのデザインシステムなど、個人ではなく企業によって公開された公式Figmaキットを厳選して集めているみたいです。 ブランドとして成功しているデザインシステムを学べるように、という事でしょうか。意図の説明などは無いので分かりませんが、そもそもFigmaで公式に著名企業がアカウントを持っている事を知らなかったので驚きました。ちなみにcookpadもあったので他の日本企業で公開されているのもあるかもしれませんね。 Design Systems For Figma
Understand the basics of design systems, what they are, how they work, and how they can change the way you design. Design systems are often the unsung heroes of the products we use every day—from mobile apps and websites to the interfaces on television screens and car dashboards. They serve as the DNA for product design, encoding the principles and elements that define the very experience users in
Components AI — A new way to explore generative design systems
The open-source design tool for creativesBuild custom design tools without writing any code. Create responsive components, pages, and sites that you can use in any type of web project. Style markup templates with curated themes or your own design tokens. Get started StudioVisually design custom design tools, generative components, pages, and sites
Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma
Boost Your Figma Designs with Our Easy-to-Use Design System Generator: 🚀 Quick Design System Setup: Build design systems fast in Figma. Figr Identity helps you create and manage elements like styles and variables easily, making your design consistent and on-brand. 🔍 Seamless Figma Integration: ...
Design Systems 101
Summary: A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. As UI design has evolved over the years, the scale and speed at which UI screens must be created has also increased. Not only are there millions of applications and billions of websites (with more created each y
Evaluate patterns, components, and design systems for accessibility. Many people use component-driven development using pattern style guides, component libraries, or full design systems in their development workflow process. Even if you have not used these tools formally, it's likely you use a similar process to break up a large design for a website, app, or other digital product into manageable p
GitHub - chakra-ui/zag: Finite state machines for building accessible design systems and UI components.
Finite state machines for accessible JavaScript components Write once, use everywhere 🦄: The component interactions are modelled in a framework agnostic way. We provide adapters for JS frameworks like React, Solid, or Vue. Focus on accessibility ♿️: Zag is built with accessibility in mind. We handle many details related to keyboard interactions, focus management, aria roles and attributes. Headle
Design systems are great. Working at large companies like Adobe, it's easy to quickly build functional UIs using a robust design system and component library like React-Spectrum. # Terminology For this post, I'll be referring to the collection of icons, images, fonts, color schemes, and general guidelines as a design system and the actual collection of JavaScript, HTML, and CSS as a component libr
Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from "nice to have" to "must have". But a majority of design systems ended up imploding. According to the 2021 Design Systems Survey, only 40% of the systems were successful. Why do some design
Design systems
Features Code examplesUsage guidelinesOpen sourceTone of voice
Announcing Global Styleguides—connecting design systems to engineering
One year ago today we launched Zeplin 2.0, adding components to Styleguides and we’ve heard amazing feedback from teams around the world. Styleguides in Zeplin help your team create consistent experiences by sharing common components, text styles and colors throughout your design system. As we talked with users in this past year, we learned more about a limitation of Styleguides: each project in Z
Every year, we are surprised by what we learn from the perspectives of people who work with design systems day in and day out. This year, we took particular interest in learning from both the people building and maintaining a design system and those who use or contribute to it in addition to their other responsibilities. We shared this survey for four weeks across our social media network, in Slac
In November we introduced Encore, Spotify’s new approach to design systems. What’s cool about Encore is that it’s not just one thing: it’s actually a family of design systems, managed by distributed teams. In this post, we’ll share what motivated us to create Encore, how it’s structured, and how it’s different from what we’ve tried before. How we got here How should we do design systems at Spotify
Plugins, widgets, and tooling—the second edition of our series on the future of design systems. Previously, we talked about navigating complexity. Here, we chat with folks across the industry on how plugins, widgets, and tooling are changing the landscape, and what they hope for the future. In 2017, Benjamin Wilkins shared early explorations using design systems and machine learning to generate co
Design systems make government better—from Washington to Wellington | Amazon Web Services
AWS Public Sector Blog Design systems make government better—from Washington to Wellington Governments around the world want to accelerate their digital transformation to offer simpler access to citizen services online and earn trust with effective solutions. This includes things like being able to send notifications to users, providing a single log-in for government services, or publishing public
GitHub - maiha2/accessibility-in-design-system: list of accessibility pages in design systems
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Top Design Systems in 2023: A Must-Have Guide for UX/UI Designers! Part 1.
A list of the top 7 systems created by companies with best practices. You can use these design systems as a guide for your designs at work or as a reference to create own DS. Join the Medium membership program for only 5$ to continue learning without limits. I’ll receive a small portion of your membership fee if you use the following link, at no extra cost to you. It motivates me to write about de
Some thoughts on T-shirt sizing for spacing scales in design systems
thoughts.md Someone asked me about the spacing scale in Braid and I thought I'd share my thoughts here. For reference this is what they were referring to: https://github.com/seek-oss/braid-design-system/blob/ecdd7f3060cab2a6675cde7dd45bcd510caa268b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts#L166-L175 I could maybe have turned this into a blog post, but I'm just dropping my roug
Very rarely is exactly one design system created to serve exactly one product that expresses exactly one design language. Nearly all the design systems we’ve worked on require a high degree of flexibility in order to properly serve our clients’ needs. Some of this flexibility is achieved by variability in component structure, style, behavior, and content. But advanced aesthetic flexibility is ofte
How does your design system team notify subscribers that new features are being released, bugs are being fixed, or security holes are being patched? Patrick discusses versioning strategies and the advantages of automating that process. Imagine, if you will, that we’re part of a team working together to produce some software. Our team knows that in six months, our minimum viable product (MVP) needs
GitHub - radix-vue/radix-vue: Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Open design systems from the Figma Community
Type safe CSS design systems with @property · September 1, 2023
How to create a color ramp used in design systems
Rebooting Ubie Vitals Design Systems
Design Systems for Developers
ユーザー体験を最高にするkintone Design Systemsをつくってます｜sakito
Everything I Know About Style Guides, Design Systems, and Component Libraries
Design APIs: The Evolution of Design Systems
Backlight - Build Design Systems - Tool for front-end teams
Figmaで公開されているデザインシステムをコレクションしている・「Design Systems For Figma」
What Is a Design System | Design Systems 101 | Figma Blog
Patterns, components, and design systems
React Aria - A better approach to design systems
Why most design systems implode
The 2022 Design Systems Survey by Sparkbox
Reimagining Design Systems at Spotify
The Future of Design Systems is Automated | Figma Blog
The Many Faces of Themeable Design Systems
Version Management for Design Systems
togetter.com
www.jpx.co.jp
shopping.geocities.jp
pfboost.com
sarakura.hatenablog.com
x.com