Ограничения в использовании компонентов Figma и не только
Знакома ситуация, когда к вам приходит разработчик и говорит: «Тут дизайнер наделал что-то непонятное, иди скажи ему что-нибудь или внесите компонент в ДС». Или такая: «Я не понимаю, как мне сделать из alert’а какой-нибудь List, как сделал дизайнер». Последние — это вообще отдельная каста дизайнеров.
Поэтому я написал небольшой мануал–рекомендацию по тому, что можно делать с компонентами ДС или просто разработанных в коде, а чего нельзя, что вам грозит за это и какой будет результат в конечном счете.
Итак, начнем с того, что разберемся, что делать крайне не рекомендуется.
Что делать нельзя
Нельзя трогать руками!
Крайне не рекомендуется трогать вручную параметры дочернего компонента или внешние настройки методом изменения отступов, цветов и т.д. Но я же дизайнер, скажите вы, а я отвечу вот что.
Когда вы трогаете внутренности компонента, то:
- Нарушается связь с компонентом, параметр которого вы изменили;
- Нарушается структура компонента меняется;
- Компонент приобретает несвойственные ему признаки (другой цвет, отступы, шрифты и т.д.);
- Компонент перестает корректно обновляться;
- На выходе получается не соответствие компонента в дизайне и в коде;
Можно сказать к примеру «Ну и что, ну и ладно, не велика потеря, это же картинка»
Так говорят те, кто не разбирается в разработке и для него дизайн это просто «Веселые картинки» и не более того. Вот что в итоге будет:
- Придет разработчик и спросит у вас, почему и зачем вы изменили компонент, так как в коде это не предусмотрено и данного функционала просто нет;
- Далее разработчик либо будет создавать ваш компонент с нуля, не используя из библиотеки уже готовый компонент, тратя время команды и свое на ненужную работу, тем самым отодвигая релиз фичи;
- Вы этот компонент можете случайно потянуть в другие сценарии, распространяя его его по компании;
- Другие дизайнеры могут начать распространять этот компонент без вашего ведома, а этот процесс уже остановить сложно;
И как быть в итоге?
- Изменять можно только те параметры, которые для вас вывел в правую панель другой дизайнер (создатель компонента), это в идеальном мире, за частую приходится самому разбираться в слоях;
- Изменять вручную можно лишь тогда, когда у вас 80-й уровень в Figma, и вы полностью понимаете, что делаете и зачем;
- Когда создаете свой компонент, настраивайте ему все, что хотите, и используйте его как хотите — тут уже зависит от ваших навыков работы с Figma;
Нельзя создавать set и компоненты направо и налево
Крайне не рекомендуется создавать компоненты ради одного использования. Зачем и какой в этом смысл? Для быстрых переключений есть функция swap и разбивка по папкам. Отдавайте себе отчет, что вы создаете и зачем, и какой в этом смысл.
Нельзя создавать set направо и налево
Потому что:
- Никогда не создавайте set ради всякой мелочи, потому будет большая путаница;
- Никогда не создавайте set для того, чтобы просто переключать компоненты — лучше создайте правильный нейминг и потом делайте swap компонентов. Например, object/one component и object/two component. Тогда они будут удобно заменяться;
- Никогда не делайте set ради того, чтобы он использовался один раз, потом сложно будет удалить;
Никогда нельзя делать detach компонентов из ДС просто так
Никогда не делайте detach компонентов которые создавали не вы, даже если они необходимы для построения ваших макетов. Делать это можно только тогда, когда вы полностью осознаете, чем это чревато, и если других вариантов просто нет и вы не можете спроектировать user flow без detach компонентов .
Чем это чревато?
- Этот объект полностью открепляется от материнского компонента;
- Он перестает принимать какие-либо обновления;
- У данного объекта исчезают параметры и настройки;
- Данный объект, если он был ранее написан в коде, с большой долей вероятности будет переписан разработчиком заново, так как он не сможет его найти в репозитории / библиотеке и не поймет его принадлежность.
Что можно делать
Что можно делать с компонентом, если он из ДС:
- Не менять, не делать detach, не пытаться залезть в него ручками;
- Только то, что предусмотрел разработчик, это конечно зависит от его опыта в проектировании компонентов и уровня владения Figma, но вы всегда можете ему помочь.
Что можно делать с компонентом, если он ваш:
- Все, что угодно;
- Если он написан в коде, то в силу вступают все те ограничения, что описаны выше;
- Его возможности зависят от ваших навыков и от навыков разработчика.
Помните!
Если компонент уже разработан в коде, то менять его можно только совместно с разработчиками ДС и кода, обсуждая все желаемые изменения. Нельзя просто взять и сделать, что вам захочется — всегда есть последствия.
Коммуникация с разработчиками
Очень важно общаться с разработчиками для выявления важного функционала или ограничений.
Зачем:
- Каждый компонент, который был написан в коде один раз, может быть переиспользован другими разработчиками;
- Менять произвольно в дизайне компонент и не оповещать разработчиков — это все равно, что сделать костыль в дизайне и коде. И не факт, что ваше изменение будет учтено в разработке.
Польза от этого:
- Вы начинаете ускорять разработку за счет переиспользования компонентов как в дизайне, так и в коде;
- Меньше багов за счет тестирования компонента перед его публикацией в коде;
- Разработки продукта будут быстрее выходить на прод;
- Все будут благодарить вас и ставить лайки за проделанную работу!
Итог
Используя компоненты ДС или других дизайнеров, важно понимать их функционал и возможности. Если этого не знать и не интересоваться этим, есть вероятность изменить компонент так, что разработчик потратит свое время на разработку ненужных вещей, затягивая сроки релиза. А другие дизайнеры начнут распространять ваш костыль, и в итоге вы получите только минусы. Используйте компоненты правильно — и быстрые релизы вам будут обеспечены.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡