Обзор дизайн-систем созданных в Figma

Мудрость от нашего сообщества

Мы в Figma оптимистично настроены в отношении дизайн-систем… на случай, если вы не читали об этом в наших публикациях на этой неделе ?. 2018 год будет замечательным годом, поскольку мы развиваем DesignSystems.com в учебный ресурс сообщества, для обсуждения этого вопроса. Мы также хотим поддержать наших пользователей в их работе по созданию дизайн-систем при помощи Figma.

Я никогда не забуду, как Václav Vančura – дизайнер Microsoft, демонстрировал слои, расположенные на слоях и компонентах, которые он вложил и ограничил… Прямо как черепаха на другой черепахе и так далее, до бесконечности. Это было сложнее, чем все, с чем мы сталкивались прежде. Мы любим, когда люди раздвигают пределы нашей технологии.

Вслед за запуском DesignSystems.com, мы хотим показать вам публикации сообщества о создании в Figma таких систем дизайна, как показал Václav. Без широкой базы наших пользователей мы не могли бы придумать такие функции, как ограничения и Team Library. И мы будем продолжать адаптировать их к вашим разнообразным контекстам использования. Ждите больше продуктов в 2018 году!

(P.S. Мы не платили или не спонсировали эти публикации, но мы ценим время и усилия, которые были потрачены на их написание ☺️.)

Делая первый большой шаг —  Gusto

2 2 80x47 - Обзор дизайн-систем созданных в Figma
Быстрый взгляд на структуру дизайн-системы Gusto

Здесь, дизайнер Will Newton рассказывает о самом страшном вопросе, связанном с дизайн-системами: «С чего мы начинаем?»  Gusto – организация, в которой он работает, занимается расчетом заработной платы и HR-технологиями. Компания использовала простые строительные блоки для преодоления этого первого препятствия.

Построение дизайн-системы маркетинга и коммуникаций— Square

3 80x45 - Обзор дизайн-систем созданных в Figma
GIF-файл активов дизайна коммуникаций Square в Figma

В этой публикации, дизайнер коммуникаций Zach Grosser демонстрирует, как маркетинговая команда на платежном процессоре Square построила собственную внутреннюю систему дизайна с такими элементами, как цветовые палитры и логотипы.

Расширение возможностей не дизайнеров при помощи дизайн-систем – Virta Health

4 80x44 - Обзор дизайн-систем созданных в Figma
Virta позволяет просто перетаскивать компоненты для создания дизайна

Virta Health, названные восходящим стартапом Сан-Франциско, помогают бороться с диабетом и имеют удобный дизайн. В этой статье дизайнер Joey Banks рассказывает о всех этапах построения дизайн-системы – от первоначальной ревизии компонентов до финальных макетов. Он также делится секретами, как система дизайна Virta изменила способ обмена идеями между инженерами и продакт-менеджерами.

Сила вложенных компонентов —  OpenText

5 1 80x38 - Обзор дизайн-систем созданных в Figma
Руководство по объединению вложенных компонентов и кнопок состояний

Thomas Lowry – ведущий дизайнер корпоративной IT-компании OpenText, подробно расписывает использование вложенных компонентов для создания более функциональной системы дизайна. Это похоже на работу Вацлава в Microsoft.

Атомный дизайн и Figma — SetProduct.com

В этой публикации, Roman Kamushken – дизайнер сайта SetProduct.com (наборы интерфейса для создания сайтов) использует принципы атомного дизайна, как основу для создания своей дизайн-системы — от слов (заголовки, иконки и т.д.), фраз (кнопки), до предложений (карточки) и глав (экраны).

Спасибо Katie Gregorio.

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: Carmel DeAmicis

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток

Figma Tips & Tricks – сверхмощный рабочий процесс

В статье собран список самых последних и самых удобных комбинаций клавиш и техник Figma