компоненты в фигме что это
Компоненты в Фигме
Dec 9, 2016 · 4 min read
Сегодня мы рады представить вам наши Компоненты. Они созданы на основе концепций, заимствованных из разработки: композиция объектов, наследование, неограниченная возможность переопределять свойства экземпляров. Таким образом, Компоненты Фигмы еще больше приближают нас к миру, где проще конструировать дизайн-системы, с которыми мы сталкиваемся в повседневной работе.
Мы начали разработку Компонентов год назад, ко г да я отработал в Фигме первые две недели. Как человек с бэкграундом и в дизайне и в программировании, я всегда видел, что подходы к интерфейсам в этих двух сферах не совпадают. Всем нам приходится создавать сложные системы интерфейсов, части которых непрерывно меняются и должны быть согласованы между собой. Как с этим справляются дизайнеры? Программисты уже справились.
В разработке компонентный подход используется везде, начиная с iOS, Android, macOS, Windows, Unity, HTML и заканчивая технологиями для создания веб-интерфейсов и игр. Например, с React проще создавать сложную UI-систему за счет возможности компоновать примитивные куски в более и более сложное поведение.
Как применить эту парадигму в дизайн-инструментах?
Дизайн на основе Компонентов
Композиция — это базовое понятие дизайна. Благодаря ей мы умеем раскладывать сложные вещи на простые и переиспользовать повторяющиеся элементы, избегая рутину и трату времени. Дизайн-инструменты, поддерживающие компоненты, позволят сделать сложный дизайн более консистентным, а работу менее трудоемкой.
Например, приложение адресной книги выглядит как список. Дизайн хорошего списка подразумевает поиск подходящего кегля, отступов, иконок и так далее. Этот компонент может отображаться и в других местах, причем в другом размере и с некоторыми доработками.
Здесь компоненты не только ускоряют переиспользование, но и способствуют единообразию. И так как все переиспользованные компоненты не копии, а экземпляры исходного компонента, то любые изменения мгновенно применяются во всем дизайне.
Наш подход к компонентам
В Фигме мы верим, что дизайн-инструмент не должен стоять на пути творческого поиска. Многие инструменты пытаются решить проблему переиспользования элементов дизайна, но мы верим, что наша реализации отличается.
При работе над Компонентами, мы поставили цель сделать их:
Систематизация дизайна не должна замедлять работу. Вы не должны платить за преимущества инструмента ограничением творческой свободы.
Как это работает
Компоненты в Фигме работают как Frames — при копировании элементов создаются скорее экземпляры, чем копии. Мы выбираем то, что хотим сделать компонентом, и кликаем Create Component в тулбаре:
На этом этапе мы получаем просто Frame. До тех пора, пока мы не создали экземпляры.
Чтобы создать экземпляр, удерживайте Alt при перетаскивании, либо используйте команду Dublicate, либо обычный copy-paste:
Вместе с этими двумя экземплярами у нас получается три одинаковых штуки. У каждой свое положение на холсте, но в то же время они идентичны.
Любое изменение внутри главного Компонента мгновенно отражается на экземплярах:
Здесь есть один важный аспект, который делает экземпляры особенными: вы можете переопределять любые их свойства, не затрагивая остальных экземпляров.
А изменения главного Компонента отражаются на каждом экземпляре, но при этом не трогают тех свойств, которые вы переопределили.
Переопределение стилей и свойств
Изменения экземпляров можно считать переопределением стилей и свойств исходного Компонента. Давайте посмотрим, что будет, если сначала изменить цвет и обводку у экземпляров, а затем изменить исходный Компонент:
Если же в процессе мы передумали и хотим отменить все переопределения экземпляра, то просто выделяем элемент и нажимаем Reset Instance.
Составные компоненты
Выше в статье мы говорили о создании систем из легко компонуемых компонентов и о том, что компоненты могут содержать в себе другие экземпляры, чтобы создавать более сложное поведение. Такие «вложенные компоненты» также просто создавать в Фигме, как и все остальное. Просто добавьте экземпляр внутрь компонента либо создайте компонент из выделенного экземпляра:
Constraints
Фигма — это мощный инструмент, в котором все фичи можно использовать совместно. Constrains — одна из фичей, открывающая новое измерение для творческой работы, особенно когда вы хотите сделать элементы интерфейса, реагирующие на различные размеры и координаты:
Как сделать прототип в Figma: интерактивные компоненты
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Обложка: Оля Ежак для Skillbox Media
Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.
С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.
Рассказываем, как анимировать ваши компоненты для прототипа.
Это руководство по продвинутой работе с прототипами и вариантами в Figma. Если вы впервые о них слышите, советуем сначала прочитать предыдущие статьи об этих инструментах:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Базовые интерактивные элементы
Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.
Каждый интерактивный компонент можно в любой момент изменить в комбайне, и они будут одинаково работать на всех экранах вашего прототипа:
Всплывающее меню с умной анимацией
Внутри одного интерактивного компонента может быть сразу несколько. Это позволяет делать сложные элементы интерфейса и быстро их менять, если вам в них что-то не нравится. Для примера сделайте всплывающее меню, в котором все пункты меняют цвет по наведению курсора.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
Библиотеки компонентов в Figma: что это, зачем нужно и как работает
Редактируете одну кнопку — меняются все. Разбираемся с главной фишкой Figma, за которую её любят веб-дизайнеры.
Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.
Что такое компонент Figma
Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню. Исходный компонент называется основным (main component), его копии — экземплярами (instances).
Допустим, мы создали основной компонент — чёрный квадрат. Затем добавили два его экземпляра.
Перекрасим первый в красный цвет. Все три тоже станут красными — экземпляры наследуют параметры основного компонента.
Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть.
Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Если уменьшить и перекрасить «родителя» в жёлтый цвет, один из его «потомков» всё равно останется фиолетовым, а другой — прямоугольником, потому что эти свойства были приобретены самостоятельно, а не от основного компонента.
Основной компонент — шаблон для будущих элементов дизайна. Например, для кнопки он состоит из прямоугольника, текста и иконки. А их размер и содержание зависят от экземпляра.
Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию.
Что такое библиотека компонентов
Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Для библиотек нет строгих стандартов оформления. Обычно компоненты структурируют и снабжают заголовками. Их удобно группировать по фреймам — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
Зачем нужны библиотеки компонентов
Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:
Как создать библиотеку компонентов
Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.
Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.
С библиотеками проще работать, если соблюдать несколько правил:
Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.
Как правильно использовать библиотеки
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. После этого участники могут их использовать.
Поместить экземпляр компонента в дизайн можно тремя способами:
Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:
Что в итоге
Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром. Сохраняйте в них всё, что будет использоваться многократно. Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать самостоятельным компонентом.
Как рисовать универсальные компоненты, которые адаптируются к размеру экрана, создавать команды, взаимодействовать с разработчиками и не только — вы узнаете на нашем курсе. Прокачайте знание Figma и станьте настоящим профессионалом веб-дизайна!
англ. frame — рамка. Основное рабочее пространство в Figma, обычно соответствующее одному экрану интерфейса. Здесь используется как пространство для размещения компонентов одного типа.
Подход, в котором дизайн начинается с создания неделимых элементов, которые используются повторно и комбинируются между собой.
Компоненты в фигме: как сделать, убрать, отменить, разломать
В этом видео уроке и статье вы узнаете про компоненты в фигме. Разбираемся что это такое, зачем они нужны, как сделать, убрать, отменить и разломать компоненты в Figma. Это поможет вам работать намного быстрее и упростить вашу работу.
Что такое компоненты в Figma и зачем они нужны?
Компоненты в figma — это элементы, которые можно редактировать массово.
Например если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера, текста у главного компонента копии также будут меняться.
Как сделать компонент в фигме?
Чтобы сделать компонент в фигме выберите любой элемент и сверху по центру нажмите на иконку для создания компонента «Create component». Также можно нажать на комбинацию горячих клавиш «Ctrl + Alt + K». На примере выше показано, как сделать компонент из кнопки.
Если перейдете во вкладку «Accets», то увидите созданные вами ранее компоненты. Их можно перетаскивать в ваш проект и использовать повторно.
Главный компонент в слоях отображается иконкой с 4 ромбами. Дочерние компоненты (копии) обозначены одним ромбом.
Как работать с компонентами в фигме?
Если вы скопируете компонент, а затем измените что-то в копии (например зададите обводку, измените надпись, цвет, размер и т.д.), то при изменении этих параметров в главном компоненте, они не будут изменяться в копии.
Изменяю размер главного компонента, как показано на примере выше. Нижний компонент (копия) не изменяет свои размеры, потому, что ранее я уменьшил эту кнопку.
Чтобы размер дочернего компонента снова изменялся, нужно нажать на 3 иконки справа и выбрать «Reset size».
Теперь при изменении главного компонента копия тоже будет менять размер.
Чтобы убрать обводку у дочернего компонента, выбрите его и нажмите на иконку с 3 точками справа. Выберите из списка «Reset stroke».
Чтобы убрать все изменения в дочернем компоненте (для того, чтобы к нему применялись изменения главного компонента), нажмите на иконку с 3 точками справа и выберите пункт «Reset all overrides».
Как убрать компонент в фигме?
Чтобы убрать (отменить, разгруппировать, разломать) компонент в фигме, выберите копию компонента и нажмите на иконку с тремя точками в правой панели. Выберите пункт «Detach instance» или нажмите на горячие клавиши «Alt + Ctrl + B». В этом случае вы сделаете из компонента простой элемент. Это сработает только для дочерних элементов (копий). Разломать главный компонент обычным способом в фигме нельзя.
Как применить стиль дочернего компонента к главному
Представим ситуацию, что у вас есть несколько кнопок в формате компонентов. Вы выбрали дочерний компонент и изменили в нём цвет с оранжевого на синий. Если нажать справа на иконку с тремя точками и выбрать пункт «Push overrides to main component», то главный компонент примет стиль дочернего и все копии также изменят свой стиль.
Как найти главный компонент в фигме?
Найти главный компонент в фигме можно с помощью дочернего. Выберите копию компонента и в правой панели нажмите на иконку с четырьмя ромбами «Go to main component». Вас перенаправит к главному компоненту.
Как создать компоненты в фигме массово?
Если вам потребовалось создать сразу несколько компонентов, то выделите нужные элементы и сверху по центру (напротив иконки создания компонентов) нажмите на стрелку и выберите пункт «Create multiple components», что переводится как «Создать несколько компонентов».
На примере выше я выбрали 4 кнопки и создал из них компоненты.
Создадим фрейм вокруг этих кнопок и назовем этот фрейм например «Buttons». Если сделаю копию какой-то кнопки, то справа появится возможность менять стиль этой кнопки на другой компонент.
Заключение
Итак, вы этой инструкции вы узнали о том, как работать с компонентами в фигме. Это поможет вам работать быстрее, поскольку не нужно будет менять несколько элементов.
Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma
В этой статье я покажу, как организую структуру интерфейса, которая позволит легко создавать новые разделы продукта и менять их дизайн в будущем.
Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.
Эти принципы теперь называют дизайн-языком или дизайн-системой. Мы закладываем алгоритм разработки всех графических модулей и можем бесконечно масштабировать проект на все типы устройств и разрешения экранов.
По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.
Итак, современный инструментарий превращает работу дизайнера уже в полноценную разработку. Понятие дизайн-системы не означает лишь только набор ui kit с концептуальными правилами и красивыми иллюстрациями. Это прежде всего система визуальной архитектуры, упорядоченная определенным образом. С ней тесно коррелирует понятие продуктового дизайна, т.к. дизайн-система может охватывать несколько продуктов внутри одной организации, подавая их конечному потребителю с помощью фирменного “дизайн-языка”. Буду считать, что грамотному читателю о плюсах такого подхода давно известно.
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Раз существует понятие “дизайн-язык”, значит на нём можно “говорить”. А еще лучше — писать. Слова образуют фразы. Из фраз состоит предложение. А из предложений уже строится целая глава. Это иная метафора Atomic design’a и она мне нравится больше. Когда в июле этого года вышла Figma 2.0, буквально сразу стало ясно, что этот инструмент идеален для написания такого языка. Или системы, если хотите. У небольших компаний появилась возможность организовать грамотный дизайн-менеджмент для нескольких продуктов и не выходить за рамки одного графического редактора, не прибегая к дополнительным надстройкам/плагинам. Впрочем, и у больших компаний тоже, просто они так погрязли в дебрях мультинструментализма, что им теперь крайне сложно перестроиться. Это я про то, что только Sketch’ем им уже не обойтись для командной игры. Тут и Craft, и InvisionApp, и Marvel, и Zepplin и еще множество других ругательств, о которых вероятно вы и не слышали.
Вторая версия Фигмы меня подкупила близостью к Sketch, работой под маздаем Win и особый интерес вызывал Developer’s handoff. Это расширение редактора специально для разработчиков. Девелоперы теперь открывают исходник в браузере, видят все отступы и могут забирать код любого элемента в CSS, Swift или Android XML. Коллаборация дизайнеров и разработчиков стала еще немного эффективнее. Производительность интеграции любого дизайна ускоряется в 2-4 раза. Проверено лично. Правок минимум; багов с отступами, шрифтами и размерностями нет. Всё генерирует программа. Необходимость писать какие-то спексы в документах — в прошлом. А если вы независимый дизайнер, работаете с несколькими клиентами, то теперь гораздо проще установить эффективную связь с отделом разработки в штате вашего заказчика.
Давайте перейдем к практике. Суть данной публикации в том, чтобы продемонстрировать конкретный алгоритм визуальной разработки. Говоря проще, разработать дизайн интерфейса таким образом, чтобы его можно было кастомизировать/редактировать за минимальное число действий. В результате создается библиотека компонентов, свойства которой распространяются на связанные с ней элементы. Поменяли там — поменялось везде. А разработчикам даже не нужно нажимать “refresh” — они видят изменения в реальном времени на своих экранах. Как я сказал выше, любом дизайн-языке из “слов” образуются “фразы”, из “фраз” строится “предложение”, а из них состоит целая глава. Абстрактно говоря, нам нужна возможность быстро заменить в одной главе любое “слово” на другое.
Слова. Базовые элементы
Я начну с самых простых элементов. К “словам” можно относить заголовки H1, H2, H3 и далее, параграф текста, иконки. Любые простейшие элементы, которые входят в состав любого ui kit и из которых можно будет в дальнейшем составить “фразу”. Я стараюсь приучать себя к порядку, поэтому буду следить за неймингом элементов. Это особенно важно, если библиотекой будут пользоваться другие дизайнеры и разработчики. Хороший дизайнер начинает делать удобно не только пользователям, но и коллегам.
Далее из каждого элемента я создаю так называемый “component” (Ctrl-Alt-K). Компонент в Figma — это возможность создавать связи между однотипными единицами интерфейса или целыми разделами. Если я наделяю таким свойством, например параграф текста и использую его на определенных экранах интерфейса (copy > paste), то мне достаточно редактировать мастер-компонент, чтобы изменения распространились на все экраны. В использовании подобной иерархии вся суть этой статьи. Фигма подкрашивает фиолетовым все “components” в левой колонке:
Фразы. Многосоставные компоненты
“Фраза” — это метафора более сложных модулей, которые могут состоять из двух или более простейших элементов. Например, кнопка. Как минимум она состоит из фона (чаще всего это прямоугольник) и надписи (label). Или форма для ввода текста (input). В её составе и фон, и заголовок, и плэйсхолдер. Я сейчас ограничусь одной лишь “призрачной” кнопкой. Она будет состоять из прямоугольника без заливки и компонента H3 Header.
Почему так? Если в продукте используется несколько различных кнопок или состояний (primary, secondary, alternative, disabled и т.д), они расставлены по множеству экранов и появилась необходимость поменять шрифт, мне достаточно внести изменения всего в одном месте. Поменяв шрифт для компонента-«слова» H3 Header я автоматически распространю эти изменения и на всю библиотеку, и на все экраны интерфейса. Вот почему важно заложить корректный алгоритм визуальной разработки еще в самом начале.
Для визуализации иерархии более сложные модули я буду отрисовывать правее. В результате окажется, что двигаясь слева направо мы переходим от простых к более сложным. От “слов” к целой “главе”.
Как вы уже заметили на снимке выше, кнопка выделена, превращена в component; а в развороте слева виден её состав. Фигма позволяет вкладывать компонент внутрь другого, создавая несколько уровней иерархии, причем каждый уровень может иметь свои ответвления. Всё зависит только от сложности дизайн-модулей для создаваемого продукта. К примеру, если в библиотеке вы используете 5 различных типов кнопок с одинаковым компонентом H3 Header, то вносить изменения можно как глобально так и локально. Для глобальных изменений редактируется H3 на 1-м уровне, а для локальных редактируем вложенный компонент уже внутри конкретной кнопки и получаем изменения только для тех экранов, где такая кнопка присутствует. Для большей ясности я записал видео: сначала я изменяю глобально надписи у кнопок, а потом локально у определенных типов.
И вот тут всплывает некоторая спорная специфика инструмента, если вы вносите изменения локально в нужную категорию кнопок, то Фигма считает их приоритетными. И попытавшись изменить компонент глобально следующим шагом, не получите результата.
Предложения. От фраз к делу.
Настало время собрать что-то посложнее из “фраз” и “слов”. Я буду использовать компоненты 1-го и 2-го уровней, чтобы составить “предложение” — следующий 3-й уровень. Последнее время у меня много наработок по e-commerce, поэтому рассмотрим этот шаг на примере мини-карточки для витрины мобильного интернет-магазина.
Мини карточка состоит из компонентов: H2 (стоимость), H3 (название товара), Paragraph (краткое описание), BTN Ghost (кнопка добавления), иконки, фона и фотографии. Весь состав перечислен слева на экране выше. Ширина карточки выбрана таким образом, чтобы на экране смартфона уместилось две в ряду. По аналогии её следует превратить в компонент, чтобы написать нашу первую “главу”.
Такую карточку можно назвать модульной, т.к. она содержит компоненты первых двух уровней. Весь дизайн продукта может иметь модульную структуру, т.к. собирается из схожих по структуре компонентов. Модульность способствует порядку и радует разработчиков, т.к. действуя по системе лучше взять из библиотеки готовую мини-карточку и замостить ей экран. Можно изменить соотношение сторон, высоту, ширину, шрифты наконец. Говоря проще: не нужно в библиотеке клонировать много разных мастер-карточек, в которых вы потеряетесь по мере развития вашего продукта. Фигма позволяет вносить небольшие изменения и сохранить эту мастер-связь для быстрого редактирования.
Глава, состоящая из предложений
Мы приблизились к самому интересному. В метафоре, с которой я начал, “глава” является тем уровнем, где подаются уже самостоятельные и полноценные экраны приложения.
В “главу” можно обобщить множество однотипных экранов, например разных форм-факторов. Фигма позволяет быстро расставить constraints (настроить адаптивность), благодаря чему мини-карточку можно увеличить для планшетной или десктоп версии, не потеряв связь с мастер-компонентом. Плюс ко всему разработчикам становится понятна адаптивность любого модуля. Вопросов просто не возникает.
Таким образом получаем еще больше — трансляцию изменений под все устройства. Кстати, буквально недавно все компоненты удобно вынесли в отдельный раздел слева, попасть в который можно через табы снизу. Добавлять модули можно через drag’n’drop. До этого приходилось сильно мучаться в поиске разбросанных по холсту компонентов, когда экранов много.
Результат
В результате применения подобного дизайн-менеджмента мы получаем возможность быстро и оперативно внедрять изменения в набор экранов:
Стоит сказать, что использование только этих фич не сделает вас хорошим дизайнером, но уже продемонстрирует ваш грамотный подход к дизайн-менеджементу. Решать повседневные задачи теперь удастся эффективнее, а значит разработка продукта определенно ускорится. В Фигме крайне умный mass-select, практически идеальный snap и один из самых продвинутых pen tool. И для оптимальной командной игры использование подобной архитектуры уже необходимость.
Я уверен, что среди читателей найдутся те, для которых такой подход уже стандартный. Сегодня многие концепции и принципы кажутся вполне естественными, хотя еще вчера мы говорили “Wow!”. Я думаю, что окончательный wow-фактор в случае с Figma, это возможность использования созданной по вышеописанным принципам библиотеки внутри организации без дополнительных инструментов, плагинов или надстроек. Всё, что нужно сделать, это добавить все ваши компоненты в “Team library” и раздать ссылку всем дизайнерам и разработчикам в команде. Дизайнеры собирают новые модули и целые экраны из компонентов такой командной дизайн-библиотеки, а разработчики мгновенно получают апдейты, экспортируют все элементы в код и внедряют на продакшн. Success!
Заключение
Последние годы сильно поменялось представление о командном подходе в разработке интерфейсов. Хайп вокруг дизайн-систем сыграл свою роль. Когда буквально каждую неделю очередной западный IT-гигант выпускает свой дизайн-язык, свои правила и принципы, совершенно очевидно, что дизайнерский инструмент неизбежно встанет на те же рельсы.
Теперь к разработчикам можно отнести и дизайнеров тоже. Потому как теперь у них есть более эффективная среда, в которой им уже комфортно действовать системно и алгоритмично, закладывать нужную архитектуру, подчинять свою визуальную разработку определенным принципам. Хотя, мы еще далеки от того, чтобы вовлечь каждого дизайнера в кодинг.
“Дизайнеры должны кодить, но они не хотят”. Это абсолютно нормально, что дизайнер не любит писать код руками. В основном мы визуалы. Технарей среди дизайнеров очень мало. И всё что требуется, чтобы подтолкнуть нас к кодингу — предоставить иной подход к программированию. Нам нужна визуальная среда, в которой циклы, условия, подсчеты и анимация создавались бы простым перетаскиванием объектов в нужной последовательности.
Бьюсь об заклад, что рынок взорвет тот, кто первый выпустит в едином инструменте комбинацию Webflow + Sketch. Проблема еще не решена: дизайнер должен видеть типографику такой как в браузере, а не идеально отрендеренную в любом графическом редакторе. Особенно, когда балом правит шрифтовой дизайн.
Кстати, а какой ваш идеальный дизайнерский инструмент?
PS: Исходник прототипа БЫЛО // СТАЛО. Спасибо хабрадизайнерам, продолжайте креативить прямо в браузере (потребуется логин)