Figma что это – Обзор программы Figma

Обзор программы Figma

Figma это программа нового поколения для разработки интерфейсов программ, веб-сайтов и мобильных приложений.

Не совсем разумно сравнивать Figma с другими программами для разработки интерфейсов. Прежде всего потому, что Figma является облачным веб-сервисом предоставляющим нативные программы для установки на Mac и Windows. Т.е. вы можете даже ничего не устанавливать, а работать через браузер. Если кратко, то Figma это как Sketch, только без плагинов и с немного другой системой реализации Символов и некоторых других функций в лучшую сторону.

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

Давайте перечислим все особенности.

Условная бесплатность

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

Вы можете заплатить за Figma, только при добавлении дополнительных дизайнеров к проекту или при необходимости дополнительных возможностей, таких как библиотека компонентов или бесконечная история версий файлов.

Многопользовательский режим редактирования

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

Теперь редактировать один Исходный файл может любое количество пользователей одновременно.

Хранение файлов

Забудьте про Dropbox, Google Drive и другие сервисы, в которых раньше вы хранили файлы проекта. Все ваши файлы хранятся в облаке Figma. Пора забыть про сочетание клавиш CTRL + S (CMD + S для Mac), чтобы сохранить измения, потому что в Figma это происходит автоматически.

Сохранение превью изображений

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

Комментирование макетов

Раньше это был затруднительный процесс. Давайте вспомним как это было:

• Получали текстовый список комментариев из которого было не всегда понятно о каком месте идет речь.
• Делали скриншот через сервис и сверху писали комментарий.
• Оборачивали макеты в PDF и там писали комментарии.
• Использовали Dropbox или Invision в качестве сервиса комментирования.

Теперь в Figma любой пользователь, которому вы предоставили доступ может оставить комментарий к нужному месту.

Прототипирование

Invision, Marvel и другие сервисы, которые мы использовали раньше больше не нужны. Т.к. функция прототипирования встроена в Figma по умолчанию.

Режим презентации

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

Символы

Гораздо более удобная система работы Символов по сравнению со Sketch. Позволяет в очень наглядной форме на панели слоев наследовать символы. А также изменять любые свойства экземпляра: текст, включать и отключать видимость слоев, изменять размер и главное стили.

Панель символов

Теперь нет необходимости в странице Symbols как в Sketch. В Figma есть панель, находящаяся в одном ряду с панелью слоев, которая отображает все символы проекта и предоставляет удобный поиск по имени символа.

Библиотека компонентов

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

Производительность

Заявляю, как человек, который проработал 7 лет в Photoshop, 3 года в Fireworks и 3 года в Sketch, что Figma работает гораздо быстрее Sketch, который как известно в плане производительности оставляет далеко позади Photoshop.

Режим просмотра

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

Панель Сode

Для верстальщиков и программистов в Figma есть специальная панель Code, на которой можно скопировать CSS-стили для Web, а также код-разметки расположения и стилей для Android и iOS.

Интеграция

Figma интегрируется с Zeplin. А также файлы Figma можно встраивать в файлы Dropbox Paper.

Сетки

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

Вы можете:

• Создать неограниченое количество сеток на одном макете.
• Cделать сетки резиновыми или статичными.
• Раскрасить каждую сетку в отдельным цвет.

Фреймы

Фреймы новая концепция пространства для макетов нежели простые Артборды. Фреймы можно вставлять друг в друга. Таким образом в одном макете вы можете использовать несколько вложенных друг в друга сеток.

Это не законченая статья. Продолжение следует.

figmadesign.ru

Вышел графический редактор Figma, работающий по принципу Google Docs

Figma — кросс-платформенный сервис для дизайнеров, который позволяет нескольким людям в режиме реального времени работать над одним и тем же проектом.

В последнее время расплодилось бесчисленное множество графических онлайн-редакторов. Но все они в той или иной степени копировали идеи своих больших братьев, таких как Photoshop или Illustrator. Figma пошёл по совершенно иному пути. Это не только первый сервис для совместного редактирования графики, но и крайне простой в освоении дизайнерский инструмент.

Особенно понравится Figma веб-разработчикам. Верстать графический интерфейс для мобильного приложения здесь одно удовольствие. В Figma есть возможность сразу выбрать шаблон экрана практически любого гаджета. Так что о размерах думать не придётся. Более того, готовый дизайн, скажем, для iPhone 7 можно автоматически адаптировать под размеры других устройств.

Также новинка отлично подойдёт в том случае, если нужно согласовать проект с кем-то из коллег-недизайнеров. Им больше не придётся объяснять дизайнеру на пальцах, что от него требуется. Благодаря интуитивной функциональности Figma изменения в проект может внести даже тот, кто имеет очень смутное представление о графических редакторах. Кроме того, здесь, как и в Google Docs, есть возможность оставлять комментарии непосредственно на рабочем поле.

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

До конца года Figma можно будет использовать совершенно бесплатно. Чтобы оценить сервис, необходимо просто зарегистрироваться на сайте.

lifehacker.ru

Figma — делаем дизайн системно / Хабр

Приветствую вас коллеги! Меня зовут Дмитрий Волков и я работаю в профессии больше десяти лет. Решил написать статью для тех, кто создает web и mobile дизайн в современных программах.

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

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

О Figma рассказывать не буду, так как есть уже много статей на эту тему. Хочу только обратить ваше внимание на то, что она стоит на одном уровне со Sketch и Adobe XD. Так что мой подход можно с легкостью перенести и на эти редакторы.

С чего начинается дизайн интерфейса. Разумеется, с получения задания, которое формируется из поставленных задач, проверки различных гипотез, исследования пользовательского опыта и т.д.

Будем считать, что это все проведено и надо начать работать над визуальной частью интерфейса.

Свой процесс работы я разделил на несколько шагов.

Шаг первый: Определяем монтажные области

Самая верхняя монтажная область называется Gui-kit. Там я буду собирать все интерфейсные элементы и их поведение. Там же будут храниться компоненты (в других программах они называются символами).

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

У меня следующая логика расположения монтажных областей. По горизонтали я располагаю монтажные области, относящиеся к определенному экрану (Например – «главная страница») включая состояния контента. По вертикали я располагаю другие экраны.

Шаг второй: Определяем названия монтажных областей

Это очень важный шаг позволит вам не запутаться в макетах.

Название монтажной области мы будем обозначать так:

Разрешение_номер страницы_номер состояния_название страницы

Получаем:

1920х1080_01_01_home_page

И если, например на главной, требуется рассмотреть изменение контента, то присваиваем состоянию следующий номер:

1920х1080_01_02_home_page

Шаг третий: Размер модулей и модульной сетки

Если мы возьмем тетрадь по математике и посмотрим на ее лист, мы увидим, что она разлинована в клеточку. Так вот одна клеточка из множества называется модулем.
Во всех макетах я использую размер модуля кратным 4-м.

Не буду рассказывать подробностей, зачем эта цифра и почему. Есть много статей на эту тему. Мы же изучаем совершенно другой вопрос.

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

Модульную сетку задаем для каждой монтажной области. Она там своя.

Шаг четвертый: Создаем дизайн правильно

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

Также кто будет работать с вашим исходником получит представление о их количестве и будет знать что «красный» у вас один на весь проект.

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

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

В Figma можно создавать сложные компоненты, которые могут содержать в себе другие компоненты и видимые и невидимые слои.

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

Кстати не забывайте использовать привязки в компонентах. Это позволяет легко масштабировать компоненты при необходимости изменить их размер.

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

Думаю пора заканчивать. Готов ответить на вопросы в комментарии. Быть может, эти вопросы подтолкнут меня к написанию следующей статьи.

Искренне ваш,
Дмитрий Волков

habr.com

10 причин отказаться от Sketch и перейти на Figma — Офтоп на vc.ru

Продуктовый дизайнер чат-бота Statsbot Владислав Пономаренко о преимуществах нового графического редактора.

За последние три месяца Figma полностью выместил Sketch и Zeplin из рабочего процесса команды Statsbot. Расскажу, чем Figma так хорош и почему история с массовой миграцией дизайнеров из Photoshop скоро повторится. Только в этот раз в роли покинутого отеческого дома выступит не Adobe, а Bohemian Coding.

Просветление

Я очень люблю Sketch. В 2014 году мастер-класс Дмитрия Новикова из MacPaw познакомил меня с его чудесами, и с тех пор 90% моих процессов от рисования иконок и презентаций до вытачивания детальных макетов веб- и мобильных интерфейсов плавно перекочевали в Sketch. Авторитет Adobe дал трещину и начал осыпаться, пока её законные территории постепенно «отжимал» сильнейший.

Релиз Zeplin получил массу восторженных голосов: стоило показать фронтенд-разработчику, насколько улучшится его жизнь без лазаний в макеты и фраз вроде «Вась, скольку блюр у твоих хипстерских теней делать?», «Нарежь иконки, да под ретину», и он пускал скупую мужскую (иногда женскую) слезу.

Умение работать в связке Zeplin и Sketch стало стандартным требованием к дизайнеру интерфейсов.

За последующие пару лет рынок UI-инструментов расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетилась и выдала довольно сырой Adobe XD. Но уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Ну сейчас-то мы вам покажем» поутихли.

Ни один из тех продуктов не предлагал ничего решительно нового, варьируя одни и те же переменные. Да и сами потенциальные пользователи не горели желанием бросаться с головой в непроверенный инструмент и перестраивать под него все процессы.

И тут я познакомился с ним.

Figma объединил в себе всё лучшее, что происходило с миром инструментов UI-дизайна за последние несколько лет.​

Figma — это лучшие качества от Sketch, Zeplin и InVision в одном крутом продукте.

Чем так хорош Figma

Доступность

Figma работает в браузере и доступен на любой платформе (если вы уже работали в конструкторах страниц вроде Webflow или Tilda, проблем с адаптацией не будет).

Никаких дистрибутивов и приложений — нужно только зайти на figma.com, зарегистрироваться и начать работать.

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

Организация файлов

Все рабочие файлы хранятся в «облаке» и организованы простым деревом «команда → проект → файл». Поэтому больше никаких конфликтов копий, «залей в Dropbox», «не подгрузилось», «макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)» — в папку Drafts автоматически сваливаются любые новые файлы, не сохраненные в явном виде.

Командная работа

Идея коллаборативного рабочего потока «заражает» один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для процессов.

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

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

Работа с макетами для фронтенда

Ты впускаешь разработчиков в свой Sketch-файл, а они там что-то меняют. «Не классно», — подумала тройка ребят из Турции и выпустила Zeplin, где фронтенд мог кликать на всё, что видит, не боясь внести изменения. Оставалось только постоянно загружать свежие версии макетов, проставлять теги и отвечать на комментарии.

И всё это я успешно забывал делать, за что получал лучи ненависти.

Спасением стал Figma, в котором весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему статус «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается прочим утехам.

Свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтенда находятся в той стадии, в какой вы их последний раз оставили, закрыв ноутбук.

Комментарии

Для обсуждения макетов не приходится никуда «отбегать», вся обратная связь собирается на месте и здесь же комментируется.

Контроль версий

Выгрузка в Dropbox всегда была неидеальна и часто порождала проблемы с конфликтом копий и путаницу с поиском актуальных версий. Для Sketch постоянно появляются варианты Git для дизайнеров — например, Abstract.

В Figma же контроль версий нативный и простой: вы видите, кто вносил изменения, когда, и «откатываетесь» до версии в пару кликов, перезаписывая или создавая копию макета.

Редактор кривых

В Figma  лучший редактор кривых.

Чем меня однажды «купил» Sketch, так это приятной работой с кривыми. После Photoshop с его топорным Pen Tool рисовать векторные иконки в Sketch было исключительным удовольствием.

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

• Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы.
• Удаление точки на кривой не приводит к разрыву шейпа и исчезновению заливки — соседние точки компенсируют прежнюю форму.

• Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых.
• Линии можно двигать.
• Точки — тоже, и их положение повлияет на соседние.​

Описание всех чудес Vector Networks можно найти в публикации техдиректора Figma Эвана Уоллеса. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.

Сетка, layout и «резина»

Принципы изменения размеров можно задавать отдельно для ширины и высоты группы, чего раньше не хватало. В Sketch есть выпадающий список: Stretch → Pin to Corner → Resize object → Float in space. Мне трудно сразу определить, что выбрать, чтобы инструмент (Resize) работал так, как мне нужно.

В Figma это работает и выглядит интуитивнее. Привязка «потомка» к стороне или размеру «родителя» происходит в один клик. Зависимости для объекта или группы можно задавать только от размера Frame, а не родительской группы.

Frame — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого фрейма, поэтому его стоит воспринимать просто как «прокачанную» группу, а не отдельный экран. К этому нужно привыкнуть.

Четырёхколоночная сетка с фиксированными отступами

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

Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно заходить в меню, вызывать «модалку» и, пока вы настраиваете колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.

Компоненты

Те же Symbols в Sketch, но не совсем они. Есть пара весомых отличий:

• «Родитель». При создании нового компонента он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с «потомками» в одном пространстве.​
• «Дети». Как говорят сами создатели Figma, копируя «родителя», вы создаете не его копию, а экземпляр (instance).

При изменении параметров «родителя» они меняются во всех его потомках — тут всё как обычно. Но если вы решили поменять стиль потомка, все изменения становятся его уникальными независимыми свойствами.

В отличие от Sketch, где редактирование текста и изображений в символе происходит в отдельной форме, в Figma это можно делать так, будто вы редактируете обычную группу объектов. Мне кажется, такая механика поочевиднее.

Google Fonts

• Кто-то открыл ваш Sketch-макет и увидел ошибку о недостающих шрифтах.
• Несмотря на предупреждение, этот кто-то открывает файл.
• Все шрифты «слетают» на дефолтные. Срабатывает автосохранение.
• Вы тратите время, переназначая гарнитуры к каждому текстовому объекту.
• И вы чувствуете, как ваша любовь к человечеству угасает.

В Figma шрифты «тянутся» из Google Fonts, а те, которые используются локально, подгружаются в проект. И это прекрасно.

Что ещё классного есть в Figma

Интерфейс как в Sketch

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

Но появилось и множество улучшений знакомых инструментов: например, вертикальное выравнивание текстового блока внутри себя и отступ первой строки; опция автоуменьшения размера текстового блока по длине строки (горизонтально) или по количеству строк (вертикально) и так далее.

Интеграция с Framer

Добавили в конце декабря. Подробнее можно прочитать здесь.

Импорт из Sketch

Все свои проекты можно просто перенести из Sketch без единой потери. Во всяком случае, я не заметил ни потерявшихся шрифтов, ни поехавших кривых, ни битых картинок.

Экспорт SVG

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

Оперативная поддержка

Онлайн-чат со средним временем ответа в два-три часа. Ребята очень внимательные и даже пишут скринкасты (видеозахваты экрана), когда хотят что-то объяснить.

Программа бесплатная

Для отдельных пользователей. Для команд Figma опубликовал список цен, который заработает в начале июля.

И несколько минусов

Зависимость от интернета

Очевидно, что без активного подключения поработать в браузере не получится. Есть офлайн-клиент, который выгрузит все изменения (стоит только поймать сеть), но если вы закрыли программу, последний файл, над которым вы работали, станет недоступен.

Нет округления полупикселей

И это раздражает.

Мало ресурсов и небольшое сообщество

Толковых аналогов Sketchappsources.com я не нашел, но импорт из Sketch работает отлично, поэтому частично проблема решается.

Нет плагинов

Чувствуется нехватка Craft и плагинов для выгрузки экранов в Marvel или InVision. Появление в Figma — всего лишь вопрос времени.

Выводы

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

Команда Statsbot быстро и незаметно переключилась на Figma, и через месяц каждый стал понимать, что происходит с дизайном в компании и на какой стадии находится их задача. А я стал тратить меньше времени на обсуждения и переписку —  всё «перекочевало» в комментарии.

Фронтенд-разработчики перестали сталкиваться с неактуальными версиями макетов, а я — испытывать фантомные дежа вю, когда заканчивал работу над экраном и мне не нужно было настраивать экспорт и выгружать экраны в Zeplin.

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

#Интерфейсы

vc.ru

Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma / Хабр

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

Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.

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

По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.

Итак, современный инструментарий превращает работу дизайнера уже в полноценную разработку. Понятие дизайн-системы не означает лишь только набор ui kit с концептуальными правилами и красивыми иллюстрациями. Это прежде всего система визуальной архитектуры, упорядоченная определенным образом. С ней тесно коррелирует понятие продуктового дизайна, т.к. дизайн-система может охватывать несколько продуктов внутри одной организации, подавая их конечному потребителю с помощью фирменного “дизайн-языка”. Буду считать, что грамотному читателю о плюсах такого подхода давно известно.

Раз существует понятие “дизайн-язык”, значит на нём можно “говорить”. А еще лучше — писать. Слова образуют фразы. Из фраз состоит предложение. А из предложений уже строится целая глава. Это иная метафора Atomic design’a и она мне нравится больше. Когда в июле этого года вышла Figma 2.0, буквально сразу стало ясно, что этот инструмент идеален для написания такого языка. Или системы, если хотите. У небольших компаний появилась возможность организовать грамотный дизайн-менеджмент для нескольких продуктов и не выходить за рамки одного графического редактора, не прибегая к дополнительным надстройкам/плагинам. Впрочем, и у больших компаний тоже, просто они так погрязли в дебрях мультинструментализма, что им теперь крайне сложно перестроиться. Это я про то, что только Sketch’ем им уже не обойтись для командной игры. Тут и Craft, и InvisionApp, и Marvel, и Zepplin и еще множество других ругательств, о которых вероятно вы и не слышали.

Вторая версия Фигмы меня подкупила близостью к Sketch, работой под маздаем Win и особый интерес вызывал Developer’s handoff. Это расширение редактора специально для разработчиков. Девелоперы теперь открывают исходник в браузере, видят все отступы и могут забирать код любого элемента в CSS, Swift или Android XML. Коллаборация дизайнеров и разработчиков стала еще немного эффективнее. Производительность интеграции любого дизайна ускоряется в 2-4 раза. Проверено лично. Правок минимум; багов с отступами, шрифтами и размерностями нет. Всё генерирует программа. Необходимость писать какие-то спексы в документах — в прошлом. А если вы независимый дизайнер, работаете с несколькими клиентами, то теперь гораздо проще установить эффективную связь с отделом разработки в штате вашего заказчика.

Давайте перейдем к практике. Суть данной публикации в том, чтобы продемонстрировать конкретный алгоритм визуальной разработки. Говоря проще, разработать дизайн интерфейса таким образом, чтобы его можно было кастомизировать/редактировать за минимальное число действий. В результате создается библиотека компонентов, свойства которой распространяются на связанные с ней элементы. Поменяли там — поменялось везде. А разработчикам даже не нужно нажимать “refresh” — они видят изменения в реальном времени на своих экранах. Как я сказал выше, любом дизайн-языке из “слов” образуются “фразы”, из “фраз” строится “предложение”, а из них состоит целая глава. Абстрактно говоря, нам нужна возможность быстро заменить в одной главе любое “слово” на другое.

Я начну с самых простых элементов. К “словам” можно относить заголовки h2, h3, h4 и далее, параграф текста, иконки. Любые простейшие элементы, которые входят в состав любого ui kit и из которых можно будет в дальнейшем составить “фразу”. Я стараюсь приучать себя к порядку, поэтому буду следить за неймингом элементов. Это особенно важно, если библиотекой будут пользоваться другие дизайнеры и разработчики. Хороший дизайнер начинает делать удобно не только пользователям, но и коллегам.

Далее из каждого элемента я создаю так называемый “component” (Ctrl-Alt-K). Компонент в Figma — это возможность создавать связи между однотипными единицами интерфейса или целыми разделами. Если я наделяю таким свойством, например параграф текста и использую его на определенных экранах интерфейса (copy > paste), то мне достаточно редактировать мастер-компонент, чтобы изменения распространились на все экраны. В использовании подобной иерархии вся суть этой статьи. Фигма подкрашивает фиолетовым все “components” в левой колонке:

“Фраза” — это метафора более сложных модулей, которые могут состоять из двух или более простейших элементов. Например, кнопка. Как минимум она состоит из фона (чаще всего это прямоугольник) и надписи (label). Или форма для ввода текста (input). В её составе и фон, и заголовок, и плэйсхолдер. Я сейчас ограничусь одной лишь “призрачной” кнопкой. Она будет состоять из прямоугольника без заливки и компонента h4 Header.

Почему так? Если в продукте используется несколько различных кнопок или состояний (primary, secondary, alternative, disabled и т.д), они расставлены по множеству экранов и появилась необходимость поменять шрифт, мне достаточно внести изменения всего в одном месте. Поменяв шрифт для компонента-«слова» h4 Header я автоматически распространю эти изменения и на всю библиотеку, и на все экраны интерфейса. Вот почему важно заложить корректный алгоритм визуальной разработки еще в самом начале.

Для визуализации иерархии более сложные модули я буду отрисовывать правее. В результате окажется, что двигаясь слева направо мы переходим от простых к более сложным. От “слов” к целой “главе”.

Как вы уже заметили на снимке выше, кнопка выделена, превращена в component; а в развороте слева виден её состав. Фигма позволяет вкладывать компонент внутрь другого, создавая несколько уровней иерархии, причем каждый уровень может иметь свои ответвления. Всё зависит только от сложности дизайн-модулей для создаваемого продукта. К примеру, если в библиотеке вы используете 5 различных типов кнопок с одинаковым компонентом h4 Header, то вносить изменения можно как глобально так и локально. Для глобальных изменений редактируется h4 на 1-м уровне, а для локальных редактируем вложенный компонент уже внутри конкретной кнопки и получаем изменения только для тех экранов, где такая кнопка присутствует. Для большей ясности я записал видео: сначала я изменяю глобально надписи у кнопок, а потом локально у определенных типов.

И вот тут всплывает некоторая спорная специфика инструмента, если вы вносите изменения локально в нужную категорию кнопок, то Фигма считает их приоритетными. И попытавшись изменить компонент глобально следующим шагом, не получите результата.
Настало время собрать что-то посложнее из “фраз” и “слов”. Я буду использовать компоненты 1-го и 2-го уровней, чтобы составить “предложение” — следующий 3-й уровень. Последнее время у меня много наработок по e-commerce, поэтому рассмотрим этот шаг на примере мини-карточки для витрины мобильного интернет-магазина.

Мини карточка состоит из компонентов: h3 (стоимость), h4 (название товара), Paragraph (краткое описание), BTN Ghost (кнопка добавления), иконки, фона и фотографии. Весь состав перечислен слева на экране выше. Ширина карточки выбрана таким образом, чтобы на экране смартфона уместилось две в ряду. По аналогии её следует превратить в компонент, чтобы написать нашу первую “главу”.

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

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

В “главу” можно обобщить множество однотипных экранов, например разных форм-факторов. Фигма позволяет быстро расставить constraints (настроить адаптивность), благодаря чему мини-карточку можно увеличить для планшетной или десктоп версии, не потеряв связь с мастер-компонентом. Плюс ко всему разработчикам становится понятна адаптивность любого модуля. Вопросов просто не возникает.

Таким образом получаем еще больше — трансляцию изменений под все устройства. Кстати, буквально недавно все компоненты удобно вынесли в отдельный раздел слева, попасть в который можно через табы снизу. Добавлять модули можно через drag’n’drop. До этого приходилось сильно мучаться в поиске разбросанных по холсту компонентов, когда экранов много.

В результате применения подобного дизайн-менеджмента мы получаем возможность быстро и оперативно внедрять изменения в набор экранов:

Стоит сказать, что использование только этих фич не сделает вас хорошим дизайнером, но уже продемонстрирует ваш грамотный подход к дизайн-менеджементу. Решать повседневные задачи теперь удастся эффективнее, а значит разработка продукта определенно ускорится. В Фигме крайне умный mass-select, практически идеальный snap и один из самых продвинутых pen tool. И для оптимальной командной игры использование подобной архитектуры уже необходимость.

Я уверен, что среди читателей найдутся те, для которых такой подход уже стандартный. Сегодня многие концепции и принципы кажутся вполне естественными, хотя еще вчера мы говорили “Wow!”. Я думаю, что окончательный wow-фактор в случае с Figma, это возможность использования созданной по вышеописанным принципам библиотеки внутри организации без дополнительных инструментов, плагинов или надстроек. Всё, что нужно сделать, это добавить все ваши компоненты в “Team library” и раздать ссылку всем дизайнерам и разработчикам в команде. Дизайнеры собирают новые модули и целые экраны из компонентов такой командной дизайн-библиотеки, а разработчики мгновенно получают апдейты, экспортируют все элементы в код и внедряют на продакшн. Success!

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

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

“Дизайнеры должны кодить, но они не хотят”. Это абсолютно нормально, что дизайнер не любит писать код руками. В основном мы визуалы. Технарей среди дизайнеров очень мало. И всё что требуется, чтобы подтолкнуть нас к кодингу — предоставить иной подход к программированию. Нам нужна визуальная среда, в которой циклы, условия, подсчеты и анимация создавались бы простым перетаскиванием объектов в нужной последовательности.

Заметно, как рынок дизайнерских инструментов давно двигается в одну сторону. Уже сейчас достаточно альтернатив для Sketch, некогда находившегося на вершине горы. Сегодня есть из чего выбрать, вам не обязательно менять свои предпочтения, чтобы работать в более продвинутой среде. Близится (а возможно уже настал) передел этого рынка. Конкурируют огромные компании с солидными вливаниями. Figma закрыла очередной раунд на $17 млн зимой этого года. А в январе 2018 InvisionApp должны выпустить свой Скетч; правда, судя по анонсу, их “Studio” не сулит дизайнерам ничего нового. Впрочем, нам эти гонки очень на руку. Значит рано или поздно появится еще более удобный workflow, но обратная сторона медали — необходимость чаще адаптироваться и мигрировать от инструмента к инструменту.

Бьюсь об заклад, что рынок взорвет тот, кто первый выпустит в едином инструменте комбинацию Webflow + Sketch. Проблема еще не решена: дизайнер должен видеть типографику такой как в браузере, а не идеально отрендеренную в любом графическом редакторе. Особенно, когда балом правит шрифтовой дизайн.

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

PS: Исходник прототипа БЫЛО // СТАЛО. Спасибо хабрадизайнерам, продолжайте креативить прямо в браузере (потребуется логин)

habr.com

Figma трансформирует весь мой рабочий процесс

И это невероятно!

Совсем недавно Figma выпустила обновление с новой функцией «Командная Библиотека компонентов» (Team Libraries system). Не секрет, что я принимал участие в создании этого продукта. Я скептически относился к облачному приложению как повседневному инструменту проектирования интерфейсов. Тем не менее я был впечатлен не только высокой производительностью программы, а также тем что взаимодействие с интерфейсом ощущается более отзывчивым и нативным чем мы когда-либо ожидали от веб-приложения. А также с тем, насколько сильно Figma позволяет перенести всю инфраструктуру процесса создания дизайна в облако. Если вы еще не вкурсе всех прелестей программы Figma, то обновление с новой функцие Библиотеки компонентов прекрасная причина подняться на борт.

Итак, в моей третьей статье посвященной программе фигма, вот чтобы я хотел затронуть:

1. Меньше инструментов, больше проектирования.
2. Библиотека компонентов и организация компонентов.
3. Как я использую Figma в нашей творческой команде.

Меньше инструментов, больше проектирования

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

Вот некоторые инструменты, которые я больше не использую:

1. Внешние инструменты и плагины для прототипирования с малой функциональностью.
2. Сервисы для организации комментирования макетов и облегчения командной работы над проектом.
3. Сервисы, которые облегчают взаимодействие дизайнеров с верстальщиками и программистами.
4. Облачные хранилища для обмена файлами и библиотеками.
5. Сервисы контроля версий.

Библиотека компонентов Все эти функции есть в Figma. К тому же новая функция Библиотеки компонентов представляет из себя простую и удобную систему публикации компонентов в облако. Что это значит? Любой компонет, который вы создаете — может быть опубликован в библиотеке команды и быть повторно использован в любым членом команды в любом проекте. Каждый экземляр сохраняет ссылку на исходный компонент, то и любой экземляр можно будет изменить согласно исходному компоненту. Это огромная экономия времения для внесения изменений, если какая-то деталь изменилась. А главное, теперь все члены команды смогут использовать только последние версии компонентов.

Прототипирование

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

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

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

Библиотеки команд и организация компонентов

Когда я начал переносить файлы Sketch в Figma, то сразу я чувстовал себя немного потерянным без специального места, на котором размещаются мои компоненты. Мне действительно не хватало страницы «Символы». Теперь вы можете публиковать не только компоненты из любого проекта в библиотеку команды, но также и получить быстрый доступ к любому компоненту с помощью панели компонентов. Левая боковая панель, которая ранее была зарезервирована только для слоев, теперь имеет три вкладки: одна для слоев, одна для компонентов (внутри документа) и одна для доступа к библиотекам команд. Между которым легко переключаться с помощью сочетания клавиш alt + 1, alt + 2, alt + 3.

Введение закладок с панелями компонентво, позволило мне забыть о странице «Символы» в Sketch. Эти вкладки действительно облегчают доступ к помпонентам, которые еще не могут быть частью библиотеки. Это могут быть отдельные компоненты или те, которые еще находятся на стадии проектирования.

Организация компонентов в вашей команде может осуществляться следующим образом.

• Вы можете выбрать один главный документ для размещения всей вашей системы проектирования или разбить его на несколько файлов.
• Вы также можете просто публиковать компоненты из документов, в которых вы создали свои базовые компоненты, без переноса этих компонентов в отдельный файл. Это отлично работает, гораздо легче поддерживать отделньные документы посвященные компонентам, если вы разрабатываете большой интерфейс.
• Благодаря тому, что Figma организовывает компоненты на панели «Библиотека команд», вы можете использовать артборды (фреймы) или группы для сортировки их в логические категории (например: кнопки, вкладки, элементы форм и т.д.)
• Изменение цвета фона фрейма или групп приведет обновлению изображения предпросмотра на боковой панели компонентов. Конечно, возможности бесконечны, когда дело доходит до организации компонентов в систему. Уильям Ньютон написал замечательную статью о том, как он организовывает свои компоненты в компании Gusto здесь.

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

Начнем с многопользовательского использования. Я слышу разговоры, о том что многие дизайнеры не нуждаются в многопользовательской работе над одним и тем же файлом. Хотя уже успешно испытал его в совместной работе с другими дизайнерами, чтобы быстро сгенерировать идеи. Также я виж много преимуществ членов команды, которые не являются дизайнерами. Например, у нас еженедельные и двухнедельные проверки в проектах, в которых мне необходимо предоставить отчет об обновления. Раньше в этих обновлениях я часто делился своим экраном (низкое качество, проблемы с масштабированием, дополнительное програмное обеспечения), или мне приходилось экспортировать все материалы и распространять их, чтобы все сотрудники и заинтересованные сотороны могли просматривать их в приближении 100%. Получение обратной связи вызывало много хлопот и обычно включало в себя записись замечаний или вычитывание комментариев в PDF.

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

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

Также возможно использовать презентации за пределами просмотра в программе. Figma позволяет встраивать презентации на сайт (с помощью iframe), который встроит документ Figma на сайт. Это позволяет интегрировать Figma с многими ведущими системами управления проектами. Вам не нужно ничего устанавливать. Вы просто даете ссылку на документ и устраняете путаницу с версиями проектов.

Гайдлайны

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

Использование этого инструмента, а также взаимодействие с командой Figma было удивительным опытом. Маневренность команды впечатляет, когда я смотрю, как быстро они добавляют инновационные и стабильные функции в продукт, а не только прослушивают, но и быстро отслеживают реализацию обратной связи с пользователями. Это внушает уверенность в том, что любые желаемые функции, которые могут отсутствовать, вероятно появятся в ближайшем будущем, и, вероятно, причина в том, что ссылка с обновлениями программы Figma нашла место в моей панели закладок. Мое время, проведенное в Fimgа обычно явлется самой приятной частью дня. Надеюсь, мой азарт будет заразителен в предах офиса и привлечет больше сотрудников.

Пожалуйста, поделитесь своим опытом!

---

Компания Figma нашла эту статью полезной для себя и поэтому с моего разрешения рекламирует ее.

---

Вольный перевод статьи Томаса Лоури «Фигма трансформирует весь мой рабочий процесс». Оригинальная статья.

figmadesign.ru

Дизайн-система в Figma. Взгляд на интерфейс через компоненты / Хабр

Какой должна быть оптимальная дизайн-система в Figma? Что такое переиспользуемый компонент? Как понятнее и удобнее организовать структуру внутри панели Instance? Каковы этапы разработки подобного продукта? И так далее. Ответы на эти и многие другие вопросы я постараюсь дать в этой статье.

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

Осмысление применение наступает после хайпа

Как и любое новшество на рынке, дизайн-системы пережили хайп и перешли в стадию практического переосмысления. Отныне их можно применять совершенно в разных случаях и для решения большего типа задач. Для крупной организации — это визуальный язык, брендинг, порядок, единство дизайна и кода. Для небольших организаций — это командная библиотека в Figma, в которой эффективен небольшой штат разработчиков и дизайнеров. Дизайн-систему может применять для своих задач и частный фрилансер — это и автоматизация правок от клиентов (через мастер-компоненты он быстро двигает пиксели, меняет цвета и формы) и постепенно растущая база UI виджетов (все они упорядочены и логично перестраиваются при resize). Скорость выполнения задач с таким продуктом возрастает в несколько раз. Сегодня каждый сможет найти для себя плюсы работы внутри дизайн-системы.

Как бы я объяснил суть дизайн-системы в Figma простым языком? Всего в четыре слова: “Поменяли тут — поменялось везде”. В этом кроется главный принцип использования компонентов и экземпляров при разработке любого интерфейса, который при корректной последовательности использования атомов и молекул для создания темплейтов, превратится со временем в полноценную систему.

Смотреть на мир и видеть компоненты

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

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

Унификация компонентов и переиспользуемость

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

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

Для создания интерфейса невозможно придумать какой-то новый модуль. Все списки, таблицы, заголовки и аккордеоны уже существуют, но используются иногда по-разному. При планировании состава компонентов нужно начинать с исследования на предмет поиска визуально похожих, чтобы постараться свести к одному компоненту в системе, экземпляр которого будет переиспользоваться с разным наполнением. Хотя сейчас Figma достаточно мощна, чтобы хранить в одной библиотеке 500 и более компонентов, лучше стараться сводить их к минимуму, чтобы проще было организовать структуру. Итак, настало время наконец-то перейти к самому продукту…

Кейс: веб дизайн-система для landing сайтов. Встречайте Websy!

В этой статье речь пойдет о конструировании веб-сайтов. Слово “конструирование” использовалось неспроста. Эта дизайн-система является своеобразным конструктором, чтобы из предоставленных блоков быстро создавать любые templates, и еще быстрее их кастомизировать. Как для мобильных устройств так и для десктопных. Именно компонентная архитектура позволит сделать это эффективно; чтобы в будущем вы могли просто клонировать исходник, быстро сменить цвета, типографику и создавать новые темы. “Поменяли тут — поменялось везде”. Помните?

Исследование и анализ будущего состава

Landing-сайты идеальная сфера применения компонентного подхода. Хватит пальцев двух рук, чтобы сосчитать все блоки, из которых строится классический веб-сайт, рекламирующий товар, услугу или сервис: Header, Footer, Call to action, Features, Testimonials, Download, Video и так далее. Принцип такой системы для конструирования в наличии достаточных комбинаций всех перечисленных блоков. Таким образом можно как паззл собрать любой сайт + мобильную версию. Оставалось лишь в качестве исследования изучить сотню свежих landing-сайтов и коллекционировать наиболее часто использовавшиеся элементы. Их в будущем я перерисую, создам компоненты, задам определенный стиль и в конце соберу темплейты. Забегая вперед, скажу что в итоге удалось собрать 18 полноценных темплейтов: 9 полноэкранных и 9 мобильных версий. Я старался создать универсальные шаблоны, которые одинаково подходили бы для презентации сервисов, приложений, портфолио и каких-либо других продуктов

Большинство сайтов в основном безлики

Именно к таким выводам я пришёл, когда попытался просто гуглить. Веб в целом быстро устаревает и это нормально. Ведь быть в актуальном дизайне — это всегда перемены. А мы относимся к переменам с опаской, осторожностью. Если старый сайт работает и кое-как продает себя, то лучше не мешать механизму работать. Но есть компании, которые занимаются оптимизацией внутренних процессов. И продуктовый дизайн для них не на последнем месте. Большинство хороших сайтов, чтобы провести аудит, мне удалось найти на hyperpixel.io и www.lapa.ninja. Я предполагаю, что просмотрел 100+ различных ссылок и это лишь малая часть списка. Должно быть чувство меры, чтобы понимать объем, необходимый для первой версии (читайте MVP). Поэтому я остановился, когда объем компонентов в разделе Text blocks (различные текстовые блоки, возможно с формами и кнопками) достиг числа 30:

Внешний вид продукта

Как именно должен выглядеть продукт? Один из важных вопросов на этапе проектирования. На поиск ответа и исследования тратятся огромные ресурсы компаний. Для себя я решил так — продукт должен быть визуально актуальным. Дизайн и стилистика должны быть не вчерашними, не завтрашними, а в том виде, который сейчас в тренде. Простой пример: сегодня редко где встретишь шрифт Open Sans в западном вебе, хотя три года назад он был очень актуален. Если Google как бренд переходит на Product Sans, надо присматриваться к похожим шрифтам. Если Intercom использует стилистику papercut в своем продуктовом дизайне, надо понять как похожие приемы использовать в своих проектах. Сейчас типографика — это одновременно дизайн, послание и настроение. Давайте с нее и начнем.

Хороший шрифт — это уже половина дела

Идея пришла совершенно внезапно. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба!”. Видимо в тот момент и родился план создания системы именно для web.

Хорошая дизайн-система в Figma — это:

• Использование глобальных стилей (типографика, цвет, тени)
• Учтенная логика смещения внутренних объектов при resize компонента (constraints)
• Использование экземпляров для различных состояний объектов (hover, active и т.п.)
• Нейминг с использованием “/” символа для создания удобной структуры экземпляров
• Создание сложных компонентов из простых (молекулы → темплейты)
• Наличие встроенной библиотеки с упорядоченными иконками

Теперь мне хотелось бы рассказать о каждом пункте отдельно, итак…

Использование глобальных стилей

С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в Figma существенно возросла. Увеличилась и производительность в целом. Глобальные стили позволяют быстро поменять шрифт в сотнях объектах, изменить цветовую схему и, фактически, получить новый стиль.

Цвета

Сколько цветов хранить в системе? Мне встречались дизайн-системы под Sketch в которых были объявлены все цвета радуги + десяток оттенков для каждого. В реальности это чрезмерно много и 80% такой палитры никогда не будут использоваться. В моей системе Websy, о которой я подробно начинаю рассказывать с этого момента, хранится всего 8 цветов: белый, черный, основной цвет (action), дополнительный цвет (secondary), и 4 градации черного. С белым и черным, я полагаю, все ясно. Action & Secondary цвета мы используем для окраса элементов, с которыми можно взаимодействовать (кнопки, иконки, ссылки). Secondary цвет можно использовать для акцента. Например, для выделения важной фразы, слогана и т.п. Допускается объявление Success / Warning цветов, если ваша система больше про интерфейсы, чем про сайты.

Тени

Я адепт материального дизайна, поэтому я держу в системе несколько вариантов подъема над плоскостью (elevation). В Websy вы найдете 4 комбинаций теней: 2dp, 4dp, 8dp, 16dp. Они отличаются смещением и размытием (blur). Например, для обычной карточки рекомендуется использовать 2/4dp тени. Для выпадающих списков, onhover состояний и диалогов можно использовать 8/16dp. Внимательный дизайнер уже подметил, что некоторые продукты Google сейчас используют reflex-тени и двойные тени, которые более реалистичны. Поэтому дополнительно в системе объявлено несколько многослойных теней, которые дают очень реалистичный эффект:

Через глобальные стили тени переключаются всего в пару кликов.

Обводка

Параметр Stroke в Websy регулируется через несколько отдельных компонентов, которые отличаются разными параметрами скругления углов. Обводка чаще всего используется для кнопок и текстовых полей. Аналогично теням, объявлено 5 вариантов скругления углов: 0px, 4px, 8px, 16px и 99px. Для чего столько? Начну с примера того, как вообще используется компонент обводки, например для кнопки:

Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.

Расстановка constraints для компонентов.

Давайте я расскажу об этом пункте и остальных в следующей главе. Про поведение модулей и элементов при изменении размеров нужно сказать многое. А также мы перейдем к очень интересной части — описанию всех компонентов в составе веб-дизайн системы Websy. И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно.

На десерт небольшое видео.

В данном ролике я с помощью готовых компонентов собираю layouts, которые будут использоваться в качестве экранов-презентаций для системы. Первый вариант мне понравился меньше, а второй (начинается с 1:30) я взял за основной:

habr.com