Как построить дизайн-систему, если вы единственный дизайнер в стартапе


02.09.2021 Время чтения - 4 минуты 1372

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


Читайте нас в Telegram.


К тому же всегда нужно идти в ногу со своим ремеслом. Сейчас Figma – основной инструмент, который мы используем для всего, связанного с продуктом. Все проекты, исследования и мозговые штурмы живут там.

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

Логотип с открытым исходным кодом
Open Source лого от Pixel Perfect

Не стесняйтесь использовать доступные дизайн-системы с открытым исходным кодом

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

Когда используете чужие дизайн-системы, обращайте внимание на гибкость и правильное размещение компонентов.

Вот несколько, с которых можно начать:

БесплатноОткрытый исходный код Ant Design, Лексикон DSL

Платно: Tetrisly , Venus Design System 73 пикселя.

Основные компоненты, цвета и типографика

Если вы решите пойти дальше со своей дизайн-системой, стоит в первую очередь сосредоточиться на паре простых вещей: цветах, типографике и основных компонентах.

С этой стратегией вы создадите дизайн намного быстрее. Например, если вам нужно создать поле ввода, вы можете начать с состояния по умолчанию и добавить другие на более позднем этапе.

Или если вы не уверены, какую иконку использовать внутри поля ввода, просто создайте квадрат 16×16, залейте его серым цветом и сделайте его компонентом. Это позволит вам двигаться вперед и упростит обновление этой иконки в будущем.

Компонент Figma - ввод пароля

Всегда начинайте с компонента

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

Так вы сэкономите много времени и сможете решить, какие элементы являются наиболее важными в самом начале.

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

Figma plugin “Master”

Используйте плагин Master для Figma

Иногда, когда вы делаете что-то в спешке, вы можете забыть создать компонент. В результате вы дублируете несколько монтажных областей с одним и тем же элементом. Это утомительная работа – возвращаться и заменять все вручную. Есть отличный плагин, который может помочь преобразовать все обычные элементы в один компонент. Это плагин «Мастер», созданный Глебом Сабирзяновым.

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

Clock icon

Используйте время простоя для полировки дизайн-системы

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

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

Three UI elements: checkbox, radio button and add button

Не сосредотачивайтесь на правильном названии в начале

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

Есть несколько хороших плагинов, которые помогут вам переименовывать элементы целыми партиями. Rename ItUltra Renamer 2Regulator или даже стандартная функция в Figma.

Оригинал.

Читайте также: Дизайн-системы 101


Читайте нас в Telegram.