tl; dr: Создание собственной дизайн-системы. Ознакомьтесь с моей работой над Github и Figma !

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

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

Поэтому я решил начать «с малого» и построить свою собственную дизайн-систему с нуля. Как человек, который должен помочь «преодолеть разрыв», я не хочу ограничиваться знанием только аспектов дизайна. Я также хочу понимать технологию.

Фонд

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

Привет людям через канал Design System Slack, который предоставил мне несколько полезных примеров и объяснений архитектуры системы дизайна их команды!

Вот некоторые ключевые принципы, на которых я остановился:

Возможность повторного использования: мне уже нравится создавать компоненты в Figma, и мне всегда нравилось играть с кодом. Я хотел бы использовать эту возможность для развития своих возможностей Javascript, создавая повторно используемые компоненты в React . Я также планирую интегрировать Storybook для создания этих компонентов.

Последовательность: чтобы сохранить стили и другие элементы, я хочу убедиться, что могу реализовать маркеры дизайна. Я планирую использовать для этого Style-Dictionary , так как раньше я уже работал с платформой.

Сильная документация: наконец, я хочу убедиться, что могу создавать и поддерживать отличную документацию. Я планирую использовать Zeroheight для документирования системы. Я могу подключить Zeroheight к Figma и Storybook для четкой связи для обоих дизайнеров и разработчиков.

Простота использования : проблема, которую я часто читал о том, какие трудности возникают в связи между дизайнером и разработчиками. Не имея текущего плана, я хотел бы убедиться, что все ресурсы доступны и управляемы обеими сторонами. Будь то надстройки Figma, документация или другие технологии, я хотел бы создать более упорядоченный процесс.

Это не единственные планы, планы всегда могут измениться, но приятно придерживаться одного!

Я надеюсь, что этот опыт поможет мне лучше понять, как система дизайна работает не только с точки зрения дизайна, но и с технической точки зрения. Я хотел бы услышать любую критику или рекомендации по пути!

Преодолеваю себя!

Чтобы не тратить время на попытки сделать все идеально, я планирую разместить систему на GitHub и сделать свой Zeroheight общедоступным. Важно, чтобы я показывал путь туда, а не только конечный продукт.

Ознакомьтесь с репозиторием на github squilpSystem здесь

Ознакомьтесь с файлом Figma squilpSystem здесь

В текущем состоянии проект довольно скудный. В Figma у меня есть токены, которые создаются для каждого стиля, а также есть несколько вложенных стилей. Эти токены обрабатываются Словарём стилей для создания файла .scss для проекта. Однако в настоящее время эти токены плохо организованы. У меня также есть Storybook, чтобы начать работу над своими компонентами.

Движение вперед

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