Рейтинг в Figma: Дизайн-системы

Chakra UI Figma Kit - это набор простых, модульных и доступных компонентов для проектирования и создания ваших приложений. Он включает в себя обширные стили типографики, цвета и эффекты, варианты компонентов с учетом размера и состояния, динамические слои на базе Auto Layout, а также неявные размеры пиксельной сетки и интервалы. Все компоненты являются open source и доступны для React-приложений уровня production.

Iconly Pro предоставляет доступ к огромной библиотеке из более чем 40 000 плоских и тысяч 3D и анимированных иконок с высокой детализацией, которые постоянно обновляются. Это незаменимый ресурс для дизайнеров и разработчиков, позволяющий быстро и эффективно находить идеальные иконки для любых проектов, от веб-сайтов и приложений до презентаций и маркетинговых материалов, экономя время и улучшая визуальное восприятие контента.

Styler - это плагин Figma, позволяющий эффективно управлять стилями в ваших проектах. Он позволяет создавать, переименовывать, обновлять и удалять стили, а также применять их к слоям на основе совпадения имен. С помощью Styler можно легко обновлять цветовые палитры, клонировать стили между проектами, объединять стили из разных систем и быстро менять типографику. Плагин поддерживает пакетное создание стилей цвета и текста, упрощая создание и поддержание дизайн-систем.

Design Lint - это плагин, который помогает находить и исправлять ошибки в дизайне, такие как отсутствующие стили. Он анализирует ваш дизайн и выявляет элементы, не соответствующие установленным стандартам, что особенно полезно для поддержания консистентности дизайн-системы и подготовки макетов к передаче разработчикам. Design Lint автоматически обновляет список ошибок по мере их исправления, позволяя быстро и эффективно приводить дизайн в порядок.

Horizon UI - это передовой бесплатный шаблон административной панели с открытым исходным кодом, разработанный на основе Chakra UI и React. Он идеально подходит для создания современных и привлекательных веб-приложений и веб-сайтов, предлагая сотни готовых элементов, блоков и страниц. Horizon UI экономит время разработчиков, предоставляя быстрый, адаптивный и стильный интерфейс, включающий примеры для NFT-страниц, аутентификации и профилей.

Styles and Variables Organizer – незаменимый инструмент для управления дизайн-системой, внедрения дизайн-токенов, очистки устаревших дизайн-файлов и применения новых переменных/стилей ко всему файлу. Он позволяет легко связывать значения в вашем дизайн-файле со стилями и переменными, оценивать их использование, объединять и привязывать значения к выбранному стилю/переменной, выделять все элементы, использующие одинаковые значения, фильтровать режимы и свойства переменных и автоматически объединять все доступные стили/переменные одним щелчком мыши.

Плагин Color Kit помогает генерировать более светлые и темные оттенки выбранного цвета. Он идеально подходит для создания цветовых шкал, позволяя легко создавать гармоничные палитры для ваших проектов. С Color Kit вы можете быстро и просто получать разнообразные варианты одного цвета, экономя время и упрощая процесс подбора идеальных оттенков.

Vision UI Dashboard React - это бесплатная ReactJS панель управления, разработанная на основе Material UI, от Creative Tim и Simmmple. Она идеально подходит для тех, кто ценит современный UI и элегантные веб-сайты. С сотнями элементов, блоков и готовых страниц, она поможет вам создавать впечатляющие веб-приложения. Включает в себя примеры страниц, такие как вход в систему и профиль, с различными вариантами дизайна.

Hope UI – это бесплатный шаблон административной панели с открытым исходным кодом, построенный на Bootstrap 5. Он представляет собой тщательно разработанную и готовую к использованию систему для создания административных интерфейсов. Шаблон полностью адаптивен и удобен для пользователей, что позволяет эффективно работать над проектами, требующими визуализации данных и управления контентом. Hope UI доступен в различных вариантах: HTML, Vue JS, Laravel и React JS.

Интерактивный чекбокс – это компонент пользовательского интерфейса, который позволяет пользователям выбирать один или несколько вариантов из предложенного списка. Он наглядно отображает статус выбора (включено/выключено) и обеспечивает мгновенную обратную связь при взаимодействии, что делает его удобным инструментом для фильтрации, выбора параметров или подтверждения согласия в различных приложениях и веб-сайтах.

Microsoft Fluent 2 iOS – это новый UI-кит от Microsoft, представляющий собой эволюцию дизайн-системы Fluent для мобильных устройств на iOS. Он находится в стадии разработки и постоянно пополняется новыми компонентами. В нем используется переменная библиотека для управления цветами и темами, что значительно уменьшает использование памяти. Файл организации был изменен, чтобы упростить навигацию по системе.

UI Kit TapTap Design System предназначен для повышения удобства пользователей и эффективности рабочего процесса разработчиков. Он включает в себя набор UI-компонентов, примеров и руководств по дизайну, что позволяет повысить согласованность дизайна в ваших проектах. Система предоставляет готовые решения и рекомендации, облегчая создание единообразного и качественного пользовательского интерфейса.

Генератор оттенков и теней позволяет получить более светлые и темные вариации любого цвета. Это идеальный инструмент для создания состояний элементов интерфейса или добавления в вашу дизайн-систему. Он помогает легко подобрать гармоничные цвета, обеспечивая согласованность и визуальную привлекательность вашего дизайна.

Arco Design Pro 2.0 – это обновленная версия дизайн-системы от ByteDance, предназначенная для создания корпоративных веб-приложений. Она включает в себя готовые шаблоны для типичных страниц админ-панелей, таких как рабочие столы, списки, дашборды и страницы деталей. Обновленный дизайн и поддержка React и Vue позволяют быстро и эффективно разрабатывать современные интерфейсы. Используйте Arco Design Pro 2.0 для оптимизации разработки и создания профессиональных веб-приложений.

TailAdmin – это бесплатный, мощный и универсальный шаблон панели администратора, разработанный в Figma на основе Tailwind CSS. Он предлагает комплексное решение для разработчиков и дизайнеров, позволяя быстро создавать функциональные и настраиваемые панели управления и бэкенды для веб-проектов. TailAdmin предоставляет широкий набор UI компонентов, элементов и страниц, необходимых для построения многофункциональных дашбордов, и является отличным стартовым набором для создания мощных админ-панелей.

VKUI Web Library · Beta - это библиотека компонентов, разрабатываемая для интеграции с vk.com. Она предоставляет готовые элементы интерфейса, адаптированные под стиль и стандарты VK, что позволяет разработчикам быстро и эффективно создавать веб-приложения, соответствующие экосистеме VK. Библиотека находится в стадии бета-тестирования.

Accessible Palettes предлагает более 50 уникальных, полностью доступных (AAA) цветовых палитр, вдохновленных лондонскими и манчестерскими футбольными командами, а также городскими пейзажами. Эти палитры соответствуют веб-стандартам доступности w3C, опровергая миф о том, что AAA-цвета не могут быть интересными. Созданные для того, чтобы сделать веб более инклюзивным, Accessible Palettes предоставляет дизайнерам широкий выбор цветовых решений, отвечающих требованиям доступности.

Design Tokens - это Figma плагин, который позволяет экспортировать стили и пользовательские токены в формат Style Dictionary JSON или синхронизировать их с репозиторием Github. Плагин поддерживает создание токенов для различных свойств дизайна, включая цвета, типографику, сетки, эффекты, размеры, отступы, радиусы, границы, анимацию, прозрачность и переменные. Это упрощает управление и распространение дизайн-системы, обеспечивая консистентность и автоматизацию процессов разработки.

Vuetify Components v.2.2.12, опубликованные 12 февраля 2020 года, представляют собой библиотеку компонентов пользовательского интерфейса, разработанную для Figma. Она предоставляет готовые к использованию элементы, соответствующие дизайн-системе Vuetify, что позволяет дизайнерам быстро создавать прототипы и макеты веб-приложений, придерживаясь единообразного стиля и ускоряя процесс разработки. Эти компоненты упрощают процесс проектирования интерфейса, обеспечивая согласованность и профессиональный вид конечного продукта.

Официальные ресурсы Apple для проектирования iOS включают UI-элементы, шаблоны и руководства, охватывающие полный спектр контролов, видов и глифов, доступных разработчикам iOS SDK. Они помогают создавать приложения, соответствующие дизайн-языку iOS. Ресурсы включают в себя файлы для автоматизации создания графики (например, иконок) в Figma, а также палитры цветов, таблицы динамического шрифта и сами шрифты. Это позволяет разработчикам быстро и эффективно проектировать интерфейсы, визуально соответствующие iOS.

Ant Icons - это набор иконок для Ant Design UI, популярной библиотеки React компонентов. Плагин позволяет искать и добавлять иконки прямо в Figma, упрощая процесс проектирования интерфейсов. Иконки автоматически получают названия в фреймах, а функция поиска ускоряет нахождение нужной иконки. В будущем планируется добавить возможность перетаскивания иконок прямо на холст.

Эта бесплатная и доступная дизайн-система – самый быстрый способ начать новый дизайн-проект. Просто скопируйте файл и настройте его под свои нужды. Она основана на Tailwind CSS и имеет технические спецификации, упрощающие внедрение для разработчиков. Система разработана с учетом доступности и соответствует уровню AA руководства по обеспечению доступности веб-контента (WCAG).

Roller - это первый в своем роде инструмент для проверки дизайна, позволяющий автоматически находить и устранять несоответствия стилей в ваших файлах. Убедитесь, что каждый дизайн, который вы передаете, на 100% соответствует вашему руководству по стилю или дизайн-системе. Roller автоматически находит любые несоответствия (ошибки) на странице, которые не соответствуют вашей библиотеке стилей, и позволяет заменять ошибки стилями из вашей библиотеки, обеспечивая единообразие в цветах, текстах, границах, тенях и радиусах.

Elastic UI (EUI) – это библиотека дизайна, используемая в Elastic для разработки внутренних продуктов, которым необходимо соответствовать единому стилю компании. Она предоставляет готовые компоненты и стили, обеспечивая согласованность и удобство использования в различных приложениях Elastic. EUI помогает разработчикам быстро создавать пользовательские интерфейсы, придерживаясь установленных стандартов дизайна Elastic.

Interplay позволяет импортировать репозиторий кода вашей дизайн-системы и проектировать в Figma, используя код-компоненты и дизайн-токены. С помощью плагина Interplay можно просматривать все код-компоненты, добавлять их в Figma, редактировать их содержимое и свойства. Interplay генерирует компонент Figma "на лету" и поддерживает его связь с код-компонентом, обеспечивая синхронизацию дизайна и кода. Также можно использовать все дизайн-токены непосредственно в Figma, включая токены для радиуса границы, отступов и интервалов.

Kleros Design System - это набор атомарных компонентов дизайна, созданный для обеспечения единообразия, согласованности и удобства использования всех продуктов в экосистеме Kleros. Он включает в себя более 120 компонентов, основанных на базовой системе интервалов в 8 пикселей, а также настраиваемые цвета и стили типографики. Система призвана упростить разработку и интеграцию, а также отражать ключевые принципы и индивидуальность Kleros.

Figma Manager – это самый быстрый и простой способ организации дизайн-систем и документов Figma. Он упрощает создание, переименование, удаление и дублирование элементов, позволяя легко структурировать файлы и компоненты. Забудьте о долгих часах, потраченных на переименование сотен элементов из-за опечаток или сложной структуры – с Figma Manager ваша работа станет проще и эффективнее. Также можно перетаскивать компоненты в рабочую область.

Prism Light Gradients – это набор из 100 кастомных, светлых градиентов в формате PNG. Он является частью большого бандла Prism +600 Gradients, включающего 5 категорий и 16 тем. Эти градиенты идеально подходят для добавления мягких, светящихся переходов и глубины в ваши проекты, делая их более привлекательными и современными. Они могут быть использованы в веб-дизайне, графическом дизайне, иллюстрациях и многих других областях.

Radix & TailwindCSS UI Components - это библиотека UI-компонентов, построенная на основе Radix UI и стилизованная с использованием цветов, типографики и отступов Tailwind CSS. Она предоставляет готовые к использованию, современные компоненты пользовательского интерфейса с поддержкой светлой и тёмной тем оформления, позволяя быстро создавать стильные и функциональные веб-приложения.

ToggleButton – это элемент управления, который позволяет пользователю выбирать между двумя состояниями, например, "включено" и "выключено". Он визуально представляет собой кнопку, изменяющую свой вид при переключении состояния, предоставляя наглядную индикацию текущего выбора. ToggleButton часто используется в интерфейсах для управления настройками, включения/выключения функций или переключения между различными режимами работы.

OutSystems UI v1.1.3 - это полный набор стилей, UI-паттернов, виджетов и макетов, основанных на фреймворке OutSystems UI. Он предназначен для быстрой стилизации ваших OutSystems приложений, особенно при использовании с плагином OutSystems UI Figma. В этой версии добавлены новые паттерны, такие как Time Picker и Month Picker, для расширения возможностей создания пользовательского интерфейса.

CORE Lite v5.0 - это хорошо продуманный стартовый набор, использующий лучшие практики дизайн-систем и гарантирующий перспективность, что позволит вам всегда быть на шаг впереди. Обновлен в феврале 2025 года. Смотрите журнал изменений.

Junte UI Components kit – это коллекция качественных UI-компонентов для Angular с дизайн-системой в Figma, позволяющая создавать согласованный дизайн и прототипы приложений. Включает более 50 готовых к использованию, настраиваемых компонентов с вариантами и автолейаутом, облегчая переход от дизайна к коду. Предоставляет инструменты для управления темами, типографикой и стилями, а также обширный набор иконок, делая разработку интерфейса быстрой и эффективной.

Airframe Material-UI 1.1 Open Source - это полнофункциональная бесплатная дизайн-система, основанная на официальном Material-UI. Она предлагает широкий набор готовых к использованию компонентов и вариантов, включая различные макеты, боковые панели, временные шкалы, кнопки, поля ввода и многое другое. Airframe позволяет быстро создавать современные и стильные пользовательские интерфейсы, экономя время и усилия при разработке веб-приложений.

NativeBase Startup+ Design Trial Kit – это коллекция готовых экранов для Figma, предназначенная для ускорения разработки React и React Native приложений. С помощью этого набора вы можете настроить дизайн под ваш бренд и использовать его в веб- и мобильных приложениях, созданных на NativeBase Startup+. Включены 5 бесплатных экранов для ознакомления, галерея из 100+ экранов из полной версии, динамические слои с Auto Layout, адаптивный дизайн и поддержка светлой/темной темы.

Design System Hub - это ресурс, где собраны UX дизайн-системы со всего мира. Здесь легко найти необходимую информацию, включая официальные веб-сайты и файлы компонентных библиотек для Figma. Идеально для дизайнеров, стремящихся найти вдохновение, полезные инструменты и быть в курсе последних тенденций в мире дизайн-систем. Присоединяйтесь к сообществу в Discord для обсуждений и обмена опытом.

Selection Variants позволяет просматривать и контролировать все вложенные варианты и свойства компонентов в выделенном элементе. Переключайтесь между вариантами, не тратя время на поиск вложенных экземпляров. Упрощайте сложные дизайн-системы, создавая вложенные варианты, или используйте инструмент для массового переключения вариантов, выбирая несколько объектов – это особенно полезно при работе со списками и таблицами.

Twilio CRM Template, разработанный на основе дизайн-системы Twilio Paste, упрощает создание и настройку CRM-систем для call-центров. Он фокусируется на ключевых задачах агентов, таких как управление разными каналами связи и информацией о клиентах, минимизируя сложность и обеспечивая быстрый доступ к необходимым данным. Этот шаблон позволяет агентам оперативно получать нужную информацию и эффективно взаимодействовать с клиентами.

Toolabs Design System Manager позволяет создавать и управлять дизайн-токенами непосредственно в Figma, мгновенно применяя изменения ко всему дизайну. Плагин упрощает управление стилями Figma, создание реального контента и документирование дизайн-системы с помощью удобного редактора. Кроме того, он обеспечивает программный доступ к дизайн-токенам через GraphQL API и экспорт в различных форматах (CSS, JSON и т.д.) для интеграции с кодом.

Figma Variables REST API позволяет автоматизировать синхронизацию между файлами Figma и кодом, что значительно упрощает поддержку актуальности дизайн-системы. С его помощью можно создать workflow, который будет автоматически переносить изменения переменных из Figma в код (и наоборот), обеспечивая единый источник правды и согласованность между дизайном и разработкой.

VKUI Common [Beta] - это библиотека компонентов для Android и Web (iOS в разработке), позволяющая создавать интерфейсы, адаптированные под разные размеры экранов. Благодаря параметру Size Class компоненты автоматически подстраиваются: Regular для мобильных Android и Compact для Web/Tablet. Библиотека активно развивается, в ней добавлены различные варианты, свойства, авто-макеты и подсказки. Разработчики приглашают к изучению и тестированию библиотеки, а также к предоставлению обратной связи.

Figma Format позволяет упорядочивать ваш макет, группируя слои по именам. Плагин анализирует имена слоев, выделяет текст до разделителя (по умолчанию "/"), группирует элементы и аккуратно выстраивает группы. Вы можете настраивать параметры форматирования, такие как отступы по осям X и Y, символ разделителя для группировки и направление (вертикальное или горизонтальное) расположения групп, что упрощает организацию и структурирование ваших Figma-проектов.

Mantine UI Design System - v5.10 – это библиотека React компонентов, вдохновленная популярной библиотекой mantine.dev, но разработанная независимой командой. Она предоставляет готовые к использованию, стильные и настраиваемые элементы интерфейса, позволяя разработчикам быстро создавать современные и функциональные веб-приложения, экономя время и усилия на разработку пользовательского интерфейса с нуля.

На сессии "Auditing design systems for accessibility - Config 2021" вы узнаете, как выявлять проблемы доступности компонентов от этапа проектирования до написания кода, используя плагины, лучшие практики и инструменты тестирования. Цель – дать вам возможность сделать ваши дизайн-системы доступными на ранних этапах разработки. Вы научитесь проводить аудит компонентов на предмет проблем доступности, что позволит вам создавать более инклюзивные и удобные для всех пользователей интерфейсы.

Преобразите любое изображение в потрясающий эффект волнистых линий за секунды. Создавайте привлекательные векторные искажения для добавления глубины и текстуры вашим дизайнам. Идеально подходит для создания уникальных паттернов, текстур, иконок и обложек с современным видом. Этот стиль часто используют такие компании, как OpenAI и Sketch.

Этот плагин позволяет быстро создавать стили цвета и текста в Figma на основе вашей конфигурации Theme UI. Он импортирует ваш Theme UI config, преобразуя его в согласованные и тематические стили для использования в Figma. Это обеспечивает единый подход к дизайну, применяя принципы констрейнтов из вашей кодовой базы непосредственно в ваших дизайн-макетах.

Этот набор инструментов предназначен для предоставления рекомендаций по доступности и удобству использования ваших интерфейсов. Он включает в себя чек-листы по основным принципам доступности и удобства, карточки с рекомендациями, заметки для компонентов, заголовков и ориентиров, а также таблицу обозначений. Кроме того, он предлагает рекомендации по подготовке вашей библиотеки компонентов к работе с последней версией плагина A11y - Focus Order.

Процесс управления дизайн-системой (Design System Governance Process) необходим для поддержания её актуальности и эффективности. Он формализует порядок внесения изменений и дополнений, обеспечивая соответствие системы потребностям пользователей и бизнеса. Процесс включает в себя сбор предложений, их оценку, разработку и внедрение изменений, а также их документирование и распространение. Это живой и развивающийся процесс, требующий адаптации к конкретным условиям.

Руководство по дизайну расширений для собраний Microsoft Teams предоставляет инструменты, примеры и компоненты, помогающие разработчикам создавать удобные и эффективные расширения для собраний Teams. Оно охватывает лучшие практики проектирования пользовательского опыта, потоки взаимодействия и общие элементы интерфейса, обеспечивая согласованность и простоту использования. Это руководство необходимо для создания расширений, которые легко интегрируются в рабочий процесс собраний Teams и улучшают опыт пользователей.

Windows 10 UI Kit Light (19H1) предоставляет дизайнерам и разработчикам набор готовых элементов и компонентов пользовательского интерфейса, выполненных в светлой теме оформления Windows 10 версии 19H1. Он позволяет быстро прототипировать и создавать приложения, соответствующие визуальному стилю и стандартам платформы Windows 10, экономя время и обеспечивая единообразный пользовательский опыт.