Мои отношения с Adobe начались десять лет назад, когда, будучи неуверенным, пятнистым подростком, я обнаружил Photoshop и волшебные чудеса инструмента клона.
Позже Photoshop стал местом, где я создал свой самый первый дизайн веб-сайта, прежде чем, кропотливо, перейти к Illustrator. У меня даже был короткий роман с Dreamweaver, в котором я написал некоторые из моих самых первых кодов. Хотя десятилетие не может показаться большим по сравнению с целой жизнью, это был период массовых изменений — также в области дизайна. Так что с выпуском Adobes дизайна Experience, также известного как” XD " (который я все еще читаю как смеющийся смайлик), я был очень взволнован и счастлив продолжить работу в Adobe Suite.
Но неделю назад или около того настал день, когда я открыл Figma .
Сначала очевидный вопрос: А как насчет эскиза?
Я почти слышу, как все люди эскиза говорят: "Sooo, почему бы вам просто не использовать эскиз? Эскиз удивительный.- И да, я согласен.
В моей предыдущей работе я должен был использовать Sketch вместо XD, который был бы моим собственным предпочтением. Но несмотря на то, чтобы узнать совершенно новый инструмент дизайна и по-прежнему доставить твердую, качественный дизайн в то же время я на самом деле пришел, как эскиз много. Я использовал символы для более быстрого и легкого проектирования новых интерфейсов и плагинов с такими функциями, как адаптивное изменение размера. У меня также был надежный генератор контента, который, вероятно, спас меня где-то около получаса каждый день. Но лучше всего, я мог структурировать свой дизайн, поэтому мне нужно было только внести изменения в одном месте, и этот вид логики-это именно то, что я так любил использовать Sass для frontend.
Но у Sketch есть один огромный недостаток: он недоступен для Windows.
В этот момент все другие дизайнеры Mac выплевывают глоток кофе: "что?! Вы используете ПК?!”
Хотя я все еще клянусь своим компьютером дома для игр, я использую Mac для своей работы.
Но реальность в том, что большинство разработчиков и другой дизайнер в моей новой команде находятся на ПК — исключив эскиз как вариант. Поэтому, когда два новых моих коллеги оба, независимо, упомянули Figma, я решил проверить его.
Figma установила довольно высокие ожидания в слогане своего веб — сайта “лучший способ дизайна” - особенно если учесть, что они не сравниваются с любыми другими инструментами дизайна специально. В то время как переход на Figma от чего-то вроде Photoshop для дизайна пользовательского интерфейса, безусловно, может быть лучшим способом проектирования, когда вы идете от Sketch или Adobe XD?
Я вернулся в XD с начала моей новой работы, но быстро обнаружил, что жажду комфорта Sketch, особенно когда наш первый проект вошел в производство, и проблемы с XD для нашей команды стали очень ясными:
- ботчики не были довольны раздачей. Обзор не был интуитивным, только позволяя увеличить до определенной точки и требуя дополнительного щелчка в каждом отдельном экране, чтобы иметь возможность проверить его.
- Мы также обнаружили , что не можем читать комментарии друг друга на макетах, только наши собственные, что побеждает весь смысл комментариев.
- Я также боролся с обеспечением обтекаемого дизайна, когда что-то столь важное, как обмен цветовыми палитрами и текстовыми стилями между всеми вашими файлами в настоящее время невозможно в XD.
- Прототипы являются публичными даже с платной версией для всех, кто имеет ссылку. Единственный способ сделать его частным - это поставить пароль на него, и мы все знаем, почему службы пытаются отойти от паролей: они отстой.
- Наконец, что-то такое простое, как библиотеки, еще не поддерживается , что делает использование символов XD (и, следовательно, дизайн на основе компонентов) совершенно бессмысленным. Файлы дизайна невозможно поддерживать и обновлять, если это не делается из другой программы, такой как Photoshop или Illustrator.
Я решил попросить подписку, чтобы попробовать Figma в течение месяца, и после недели тестирования общее впечатление довольно хорошее — вот почему.
Хороший обзор
Есть миллион способов структурировать файлы дизайна, и нет правильного или неправильного способа сделать это — есть только способ, который подходит вам и команде. Но в то время как передача и сотрудничество важны, я на самом деле немного беспокоился о том, как это Figma будет работать с моей собственной структурой — или моим отсутствием.
У меня часто есть очень хаотичные рабочие файлы, полные как наполовину испеченных UI, идей и даже целых, законченных пиксельных совершенных макетов-другими словами: полный, полный беспорядок. Но я уверен, что мои коллеги предпочтут иметь хороший, чистый обзор, и в Figma мы все видим точно такой же интерфейс и файлы, как в Google Docs.
Но если проектирование продуктов научило меня чему-то, это то, что тенденция быть беспорядочным и небрежным со структурой иногда просто из-за отсутствия (правильных) вариантов. Именно поэтому я так рад, что Figma имеет не один или два, а четыре уровня параметров структуры, чтобы помочь мне очистить мои файлы:
- Вкладки проектов в боковой панели под командой
- Файлы внутри каждого проекта (карты, которые вы видите ниже)
- Страницы внутри каждого из файлов
- Рамки внутри каждой страницы (которые являются монтажными панелями)
В настоящее время мы все еще работаем над проектами (вместо спринтов), которые хорошо сочетаются с вкладками проектов Figma в боковой панели. Я также пытаюсь иметь каждую "область" в платформе в виде отдельного файла с фреймами в качестве страниц, поэтому я могу использовать страницы внутри файла для настольных, мобильных и планшетных версий:
Более лучшая компонентная система
Мне нравится начинать новый дизайн пользовательского интерфейса с создания некоторых крутых макетов, а затем, как кошка, оставшаяся одна с рулоном туалетной бумаги, разделяя все на крошечные, маленькие кусочки.
Каждый отдельный кусок туалетной бумаги ... Хм... Дерьмо... нет, не настоящее дерьмо, я просто... действительно сожалею, что иду на кошку и метафору туалетной бумаги прямо сейчас. Я должен был полностью пойти на универсальный пример с Legos. * Вздох*
Хорошо, давайте просто попробуем туалетный рулон с ним:
Каждый кусок измельченной туалетной бумаги-это стили, такие как цвета, типографика, значки, которые, если их снова объединить... через... обращение... времени... или действительно тщательная работа с клеем, возможно?... в целом кусок туалетной бумаги будет делать из компонентов макета, как карты, заголовки и навигации. В конце концов, у меня будет много полных листов туалетной бумаги для создания ... рулонов туалетной бумаги... таких как меню и даже целые макеты страниц...
Сама наша система проектирования основана на интерфейсе Bootstrap 4.
В то время как у меня нет никаких фанатичных фетишей с Bootstrap конкретно, просто я предпочитаю использовать Frontend Framework в качестве основы для моего дизайна пользовательского интерфейса, потому что таким образом я знаю, что то, что я разрабатываю, разработчики могут воспроизвести с точностью до 99%. Кроме того, фреймворки являются довольно распространенной вещью, используемой многими различными командами разработчиков для многих различных платформ, и они часто повторно используют общие, установленные шаблоны интерфейса с хорошим юзабилити. Это также избавляет меня от необходимости снова изобретать колесо для чего — то простого (скучного), как табличные представления,-давая мне больше времени, чтобы сосредоточиться на разработке ударного, пользовательского потока создания контента, например.
Настройка системы проектирования в Figma со всеми опциями Bootstrap 4 является длительной и утомительной задачей, но как только это сделано, это не что иное, как абсолютно удивительно! Например, в файле Buttons в проекте Design System у меня есть две страницы, одна называется Buttons, а другая называется Master (не редактировать).
Мастер-файл, где я построил свои” основные " компоненты кнопки, которые находятся в трех вариантах размера с различными вариантами: только текст, значок и текст, только значок.
Но каждая кнопка Дополнительно также имеет два стиля-solid и outline, поэтому я начал создавать все мои цвета кнопок как отдельные компоненты:
Затем я использовал эти цветовые компоненты в качестве фона в моих компонентах кнопки master, чтобы легко изменить цвет-буквально просто выбрав из выпадающего списка:
Это очень помогло мне, когда дело дошло до создания всех регулярных компонентов кнопок, которые мы будем использовать при проектировании:
Я также отключил все компоненты master button из библиотеки Team Library, сделав их закрытыми только для файла Buttons. Но при такой настройке внесение изменений во всю конструкцию становится почти таким же легким (и быстрым), как щелчок пальцами. Вы выбрали новый стиль шрифта, размер или даже семейство кнопок? No problemo:
В нашем проекте системы дизайна у меня также есть файл под названием “ Prefabs”, в котором я объединяю некоторые листы туалетной бумаги (опять же, извините за эту метафору), такие как пункты меню и вкладки, чтобы создать целые, готовые макеты меню. Эти prefabs затем могут быть добавлены в новый проект или страницу с помощью одного перетаскивания, надеюсь, это будет простой способ сохранить согласованность архитектуры в платформе. Компоненты-это все еще то, с чем я играю, но я уже очень доволен тем, как они работают.
Лучший способ поделиться
Когда дело доходит до обмена проектами, я чувствую, что Figma впереди на много световых лет со своей структурой команд. Создание команды и приглашение людей в эту команду даст им доступ либо в качестве редакторов (людей, которые могут редактировать), либо только для просмотра. В Figma мы все смотрим на одно и то же — иногда даже в одно и то же время — поэтому его легко достичь общего понимания. И если я хочу поделиться проектами с кем-то, кто не в нашей команде, я просто сделаю это с их электронной почтой.
...А также подстрекатель личное пространство
Разработчики имеют свои собственные учетные записи с доступом только для просмотра ко всем командным файлам, обмениваясь общедоступными ссылками и зашифрованными паролями, которые никто не помнит для частного, безопасного пространства для всей нашей команды. Это также означает, что больше не нужно беспокоиться о том, где была опубликована ссылка, к какой версии у них был доступ, обновлена ли она или нет, или существует ли угроза безопасности, плавающая где-то в киберпространстве.
Лучшая расстановка приоритетов
В целом, самая большая разница между XD и Figma для меня — и мне не нравится говорить это, потому что я знаю, какое время, энергию и усилия уходит на создание потрясающего продукта — это то, что Figma, кажется, больше настроена на потребности современных команд продуктов и их процессов проектирования. По крайней мере, так это чувствует себя в супер гибкой, “стартовой” команде, как наша. Но я также знаю, что проектирование и разработка продуктов-хороших продуктов-это все о приоритизации и принятии правильных решений, основанных на потребностях пользователей и клиентов.
Конечно, у XD есть какая-то новая функция голосового прототипа (?) но без чего-то столь важного, как библиотеки, где я могу определить и повторно использовать свой стиль руководства по файлам— я не хватает всей основы для моих проектов.
Мне еще предстоит протестировать часть прототипирования и представить ее заинтересованным сторонам, но я надеюсь, что Figma продолжит удивлять меня, предпочтительно в позитивном ключе.
Лучший способ проектирования
С момента открытия Photoshop в первый раз прошло десятилетие. Теперь я медленно осознаю, что как только я перенесу все свои проекты в Figma, у меня не будет даже одной программы Adobe на моем рабочем компьютере. Это кажется очень определенным.
Эпоха моей жизни официально закончилась.
Но когда я оглядываюсь назад на все мои отношения с Adobe — которые колебались повсюду в спектре между счастливыми временами woohoo и адом на Земле, я знаю, что теперь прощание с ним-к лучшему.
Для лучшего способа проектирования.
Спасибо за чтение!
