Фигма как работать

Что такое Figma: полная инструкция по использованию редактора

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

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

Для чего нужна Figma

Вот лишь три примера силы «Фигмы»:

Перечислим все плюсы Figma:

Работа с компонентами выручит вас при редактировании большого количества проектов или при работе над сложносоставными проектами.

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

С теорией все. Теперь переходим к практике. Запасайтесь чаем и чем-нибудь хрустящим: мы начинаем!

Источник

Figma: инструкция для начинающих

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

Регистрация

Процедура регистрации проста. Зайдите на сайт сервиса и заполните поля.

Создание аккаунта Figma занимает несколько минут

Интерфейс

Графический дизайнер с нуля до ПРО

Научитесь создавать любой визуальный контент — от макетов сайта до полиграфии

После регистрации вам будут доступны графический редактор и менеджер файлов. Здесь можно создавать проекты, менять настройки: например, загрузить аватарку, поменять имя, установить новый пароль, ввести e-mail для оповещений. Файлы и проекты, с которыми вы работаете, можно найти по поиску Search.

Файлы сохраняются автоматически. Во вкладке Recent находятся файлы, которые вы открывали в последнее время. Всю историю изменений онлайн-редактор сохраняет, что позволяет быстро восстанавливать резервные копии. Также появилась новая функция, с которой можно добавить нужные файлы в Избранное, и они будут высвечиваться сразу. Не придется искать их в последних открытых или вбивать в поиск по всем проектам.

Работа с шаблонами

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

Шаблоны для любых целей

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

Шаблон для UX-исследования: бери и пользуйся

Работа с новым файлом

Возможности Figma разнообразны. Можно начать с самого простого: создать новый файл.

Как создавать новые файлы в Figma

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

Если у вас есть файлы, с которыми нужно поработать, например из Sketch, то можно импортировать их в Figma: перетащить на новый холст файл целиком, скопировать отдельные элементы правой кнопкой мыши.

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

Как настраивать новые фреймы

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

Фреймы можно комбинировать на одном холсте

Слева — панель слоев, Layers. При создании каждого нового элемента автоматически появляется для него новый слой. Слои легко перемещать: можно просто перетаскивать их. Лучше группировать слои, для этого нужно нажать Cmd + G. Тогда с файлом удобно работать, потому что в нем все организовано так, как надо вам. Например, за несколько секунд можно перемещать, копировать группы между фреймами. Для выбора элемента достаточно нажать Cmd и кликнуть нужный элемент.

На панели слева также есть Assets. В этом разделе — библиотека, а еще хранятся все элементы пользователя.

Работа с векторными фигурами, изображениями, текстом

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

Как создавать фигуры

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

Если нужно создать фигуру более сложной формы, в меню сверху выберите перо и рисуйте. Когда завершите, нажмите Enter.

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

Как работать с векторными фигурами, разобрались. Поговорим о растровых изображениях.

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

Работа с изображениями

Как еще можно работать с картинкой:

Для добавления текста на панели сверху нужно выбрать T или нажать T на клавиатуре. Свойства текста можно регулировать в меню, которое появляется с правой стороны.

Типографика в Figma

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

Настройка собственных стилей

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

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

Как настроить стиль цвета

Алгоритм действий прост:

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

Figma позволяет создавать свой собственный стиль текста

Алгоритм:

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

Как создать собственную сетку в Figma

Работа с компонентами

В Figma стоит создавать компоненты, то есть элементы интерфейса для повторного применения. Компоненты — это элементы, которые можно массово редактировать. Например, создают кнопку, делают из нее компонент, копируют. И когда у главного компонента меняют параметры, допустим, размер или цвет, изменения происходят и у копий.

Как создавать компоненты:

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

Все компоненты можно найти рядом со слоями слева во вкладке Assets. Компоненты легко перетаскивать на рабочее пространство.

Экземпляры компонентов можно располагать внутри основных компонентов. При этом вложенные экземпляры легко менять местами, для этого есть меню замены экземпляров, его найдете справа. Или нажимайте Cmd + Alt + Option и перемещайте их из библиотеки.

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

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

Auto Layout

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

Как менять слои:

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

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

В меню справа кликните Prototype, Prototype Settings, чтобы выбрать устройство и модель, под которую нужно сделать прототип.

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

Например, можно посмотреть прототип на iPhone 11 Pro Max Gold

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

Совместная работа над проектом

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

Создать команду можно в три шага:

Почему команды любят работать с Figma

Совместная работа с другими дизайнерами, копирайтерами, разработчиками. В верхнем меню кнопка «Поделиться» помогает отправить приглашения тем, с кем вы собираетесь совместно работать над проектом. EDIT MODE открывает пользователям доступ ко всем функциям. Это в прямом смысле слова работа в режиме реального времени. VIEW MODE позволяет пользователям видеть спецификации, просматривать прототип, скачивать ассеты (цифровые объекты, которые состоят из однотипных данных).

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

Как оставлять комментарии к проектам

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

Графический дизайнер с нуля до ПРО

За год количество вакансий в графическом дизайне увеличилось на 222%. Научитесь создавать любой визуальный контент на уровне middle — от макетов сайта до полиграфии.

добавите более 18 сильных работ
в портфолио

пройдете онлайн-стажировку
в креативном агентстве REDKEDS

получите консультации
от hr-специалистов и карьерных менеджеров

добавите более 18 сильных работ
в портфолио

пройдете онлайн-стажировку
в креативном агентстве REDKEDS

получите консультации
от hr-специалистов и карьерных менеджеров

Источник

Как рисовать векторные изображения в Figma

Рисуем мяч для регби, хитрим с наложением слоёв и избегаем «мятых» линий.

Meery Mary для Skillbox Media

Часто Figma ассоциируется только с проектированием интерфейсов. Однако в ней можно рисовать полноценные иллюстрации и векторные иконки.

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

Виктор Засыпкин

Иллюстратор. Рисовал иллюстрации для электронного учебника «Японский язык без страха» и рассылки «Как сделать проект».

Как работает режим векторного редактора в Figma

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

Для начала нарисуйте простой квадрат:

1. На панели инструментов нажмите на иконку и кликните в любую часть макета.

2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.

3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift.

Обратите внимание, что, создав первую точку, вы вошли в режим векторного редактора, и панель инструментов изменилась:

Добавьте на квадрат дополнительные точки, чтобы получился многоугольник:

1. На панели инструментов нажмите на иконку , наведите курсор на одну из линий — посередине вы увидите точку.

2. Зажмите эту точку правой кнопкой мыши и тяните её от центра фигуры.

3. Повторите то же самое с остальными сторонами фигуры.

Сгладьте углы получившегося прямоугольника:

1. На панели инструментов нажмите на иконку и дважды кликните на любую из точек фигуры.

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

3. Повторите то же самое с остальными точками. Если получившееся скругление вам не нравится, нажмите правой кнопкой мыши на нужную вам точку.

Как и у стандартных фигур в Figma, у вектора можно изменить цвет заливки и параметры обводки:

Любую стандартную фигуру в Figma — круг , квадрат , треугольник или многоугольник — можно редактировать как вектор. Чтобы это сделать, создайте фигуру и дважды кликните по ней правой кнопкой мыши:

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

Как нарисовать мяч для регби

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

Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:

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

2. В режиме векторного редактора подгоните форму овала под мяч, чтобы они были похожи.

Видео: Виктор Засыпкин / Skillbox Media

1. Создайте круг и растяните его по основному шву, который пересекает его.

2. В режиме векторного редактора подгоните форму овала под шов.

3. Удалите фон, добавьте на вектор обводку и перенесите его на овал в форме мяча.

Видео: Виктор Засыпкин / Skillbox Media

1. Создайте квадрат и подгоните его размеры под форму дополнительного шва.

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

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

4. Этот шов не сплошной, а строчной. Укажите в настройках обводки пунктирный стиль. Чтобы это сделать, в блоке Stroke на панели инструментов нажмите и в появившемся меню в пункте Stroke Style укажите стиль Dash. Отрегулируйте настройки Dash (количество точек) и Gap (шаг), чтобы пунктир примерно напоминал шов настоящего мяча.

Видео: Виктор Засыпкин / Skillbox Media

1. Скопируйте основной овал, выделите его и укажите цвет заливки: белый.

2. Поместите белый овал на мяч и подгоните его под размер блика — он будет примерно на треть меньше основного овала.

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

Видео: Виктор Засыпкин / Skillbox Media

Левая белая полоска

Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:

1. Создайте круг и с помощью одной из его сторон повторите внешний левый край полоски.

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

3. В режиме векторного редактора подправьте оба круга, чтобы они точно повторяли изгибы полоски. Для удобства укажите непрозрачность кругов на 50%, чтобы видеть и сами фигуры, и контуры мяча.

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

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

6. Поместите получившуюся фигуру на мяч. Если она залезает на шов, его можно немного уменьшить.

Правая белая полоса

Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента :

Видео: Виктор Засыпкин / Skillbox Media

1. Белый шов повторяет форму основного. Возьмите поперечный шов, с зажатой клавишей Ctrl (⌘) выделите все точки снизу и удалите их. У вас должна получиться короткая линия длиной с поперечный шов.

2. Поместите линию на референс и, если нужно, сделайте её длиннее или короче в режиме векторного редактора.

3. Поместите вектор на нижний край шва и с помощью пера обведите и остальной контур шва.

4. С помощью пера повторите контуры всех стежков.

Видео: Виктор Засыпкин / Skillbox Media

В результате у вас получится примерно такой мяч:

Что нужно запомнить

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

Источник

10 самых популярных бесплатных туториалов по Figma

Figma — это как Adobe Illistrstrator, только проще, в браузере и проекты можно шарить для совместной работы. И бесплатно.

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

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

1. Figma Tutorial — A Free UI Design/Prototyping Tool.

Автор Gary Simon — full stack разработчик. Он создает свои платные курсы по разработке и дизайну, но на YouTube выкладывает небольшие бесплатные обучалки. За 36 минут чувак создает дизайн экрана мобильного приложения.

1,1 млн просмотров на YouTube — самый просматриваемый туториал по Figma.

2. Figma UI Design Tutorial: Get Started in Just 24 Minutes

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

580 000 просмотров на YouTube.

3. Intro to Figma — Beginners guide to Figma Basics

Мини-обучалка от Jesse Showalter. Основные функции за 16 минут: фреймы, фигуры, pen tool, маски, прототипирование, комментирование и совместная работа над проектом. Вот ссылка на портфолио автора dribbble.

487 000 просмотров на YouTube.

4. UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

1,5 часовой курс от freeCodeCamp.org Создание сайта и мобильного адаптива. Автор курса — Adrian Twarog, разработчик и дизайнер из Австралии.

480 000 просмотров на YouTube.

5. Figma in 40 Minutes

Туториал по созданию простенького кликабельного дизайна сайта для новичков от traversymedia.com. Ссылка на канал автора курса.

410 000 просмотров на YouTube.

6. The Figma 2021 Crash Course by Example

Уже второй туториал Gary Simon, чувак за час создает кликабельный дизайн-прототип сайта с нуля.

380 000 просмотров на YouTube.

7. Create a Design System with Figma — Full Course

7,5 часов полная обучалка по созданию дизайн-системы от freeCodeCamp.org. Автор курса Tim Sullivan, бывший дизайнер из Airbnb. Курс по дизайн-системам проще будет затащить, если уже есть азы в Figma.

290 000 просмотров на YouTube.

8. Free Figma Tutorial: Designing Wireframes with Figma

Дизайн сайта и мобильный адаптив с нуля за 1 час. Автор курса Daniel Salgado, создатель курсов Butter Academy. У них есть полный платный курс по UX, но видео ниже для знакомства с Figma хватает.

240 000 просмотров на YouTube.

9. Introduction To Figma | FREE COURSE

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

90 000 просмотров на YouTube.

10. Figma

Youtube канал Figma — больше 200 туториалов и лекций по теме дизайна от самих создателей Figma.

Источник

Как упростить работу в Figma

Четыре совета в гифках, которые помогут ускорить работу над макетами.

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

1. Шаблонизируйте цвета и шрифты

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

Как создать стиль цвета:

Со стилями текста принцип тот же, что и с цветами:

Стиль в любой момент можно отредактировать:

После обновления стиля автоматически обновятся все элементы, где этот стиль используется:

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

Называйте стили осмысленно, чтобы потом не запутаться в своей палитре. Например, название Blue-text может означать цвет заголовка или основного текста — непонятно, а название Link-color сразу передаёт смысл — цвет для ссылок.

2. Используйте компоненты

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

Создайте компонент, выбрав любой фрейм и на верхней панели, затем нажмите на иконку с ромбиком:

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

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

Если весь ваш макет будет состоять только из компонентов, вам будет сложно в нём что-то изменить. Лучше делать компоненты только из стандартных элементов: кнопок, плашек, полей ввода, ссылок.

3. Пользуйтесь ограничителями

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

Чтобы каждый раз не перевёрстывать весь макет под разные экраны, в Figma предусмотрены ограничители — Constraints. Они фиксируют элемент в определённой точке макета и при изменении ширины или высоты макета не меняют своего положения.

Соберём с помощью ограничителей шапку для сайта.

1. Создайте фрейм размером с iPhone 5 SE — 320×568 пикселей:

2. Внутри этого фрейма создайте ещё один, растяните его на всю ширину экрана и поставьте в самом верху:

3. Укажите на панели Сonstraints выравнивание Left and right и Top:

Готово — теперь шапка будет растягиваться за макетом, как бы вы ни меняли его размер:

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

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

4. Запомните горячие клавиши

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

Для начала запомните базовые горячие клавиши:

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

Также у Figma есть справочник по горячим клавишам. Чтобы его вызвать, нажмите Ctrl (⌘) + Shift + /:

Источник

Figma для маркетологов. Основные возможности и принципы работы

Как развиваться в диджитале. Актуальные каналы и инструменты, успешные кейсы, мнения экспертов.

Разбираемся, что происходит в мире рассылок и digital-маркетинга. Публикуем анонсы статей, обзоры, подборки, мнения экспертов.

Пройдите бесплатный курс и запустите свою первую рассылку

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

Вот несколько задач, с которыми поможет справиться Figma:

Чем крута Figma

Мультиплатформенность. Работать в Figma можно с ПК, телефона и любого другого устройства. Самое классное, что даже если у вас нет аккаунта в Figma, вы сможете просматривать дизайн. Однако оставить комментарии или внести изменения не получится.

Командная работа. Figma работает по принципу Google Docs и других подобных сервисов. Над любым проектом можно работать совместно с другими участниками. Ссылкой на проекты легко делиться. Можно дать права на редактирование или просто на просмотр. Это удобно, если отправляешь дизайн клиенту на утверждение и не хочешь, чтобы он там что-нибудь случайно сломал.

Минималистичный интерфейс. Можно быстро разобраться с основными функциями, посмотрев 2-3 видеоурока.

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

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

Компоненты. Это аналог смарт-объектов в PhotoShop. Компоненты позволяют дизайнерам быстро вносить изменения в одинаковые элементы интерфейса. Например, менять названия разделов в меню на каждой странице или цвета кнопок.

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

Источник

Figma: обзор программы для веб-дизайна

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

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

Что такое Figma

Это графический редактор для веб-дизайна. В Figma можно создавать:

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

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

Преимущества Figma для работы

Исходники документов хранятся в облаке

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

Командная работа над макетами

Как и в Google Docs, в Figma можно работать над документом вместе: давать доступ на просмотр и редактирование, параллельно работать над макетом — на экране будут видны курсоры разного цвета.

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

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

Если вы работаете в аккаунте сами, все функции бесплатны. Просто регистрируетесь и начинаете работать. Можно давать доступ на просмотр документа — это тоже бесплатно.

Бесплатные email рассылки

Создайте аккаунт в SendPulse и отправляйте до 15 000 писем бесплатно каждый месяц!

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

$45 за пользователя с правами редактирования/месяц

Это план для больших организаций.

Как начать работать с Figma

После регистрации на почту приходит приветственное письмо со ссылкой на раздел «Помощь», видеоуроки, форум и другие ресурсы:

Интерфейс понятный — слева панель со слоями, которая включает элементы проекта, сверху панель инструментов, справа панель свойств.

Когда вы начинаете работать с редактором, появляются уведомления с подсказками:

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

Как научиться работать в Figma

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

Практические уроки по работе с Figma на русском есть на YouTube каналах:

Электронную книгу «Руководство по Figma» выпустил дизайнер интерфейсов Александр Окунев. В книге рассматриваются 23 темы: обзор интерфейса, формы, перо и векторные сети, градиенты с примерами в Figma, кадрирование и цветокоррекция, компоненты, оверрайды и другие.

Новости и советы по работе с редактором публикуют в Телеграмме:

Возможности Figma

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

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

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

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

Компоненты

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

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

Чтобы сделать элемент компонентом, выберите опцию «Создать компонент» на верхней панели или кликните правой кнопкой мыши на слое и в меню выберите «Создать компонент» (Create Component).

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

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

Векторные сетки

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

Кроме того, векторные сетки облегчают работу с HTML: можно скопировать SVG код из внешнего источника и вставить его как векторный слой прямо в редактор. Или сохранить векторный объект из Figma как SVG код. Для этого кликните правой кнопкой мыши на элементе, выберите «Копировать как SVG» и вставьте код в HTML или другой веб-проект, с которым работаете.

Встроенное комментирование, редактирование и доступ

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

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

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

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

Чтобы просмотреть историю версий, выберите в выпадающем меню сверху опцию «История версий». Справа на странице появится панель с историей изменений. Версиям можно присваивать названия, восстанавливать, дублировать.

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Как работать в Figma: создаем макет электронной книги

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

1. Залогиниться и создать новый документ.

2. Нажать на панели вверху «+» и создать рамку (Frame), чтобы разместить объект на полотне.

3. Заполнить проект слоями: текстовыми блоками, прямоугольниками и рисунками.

Вот, что у нас получилось:

Ограничения Figma

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

Еще одно ограничение Figma в том, что макеты из Photoshop нельзя импортировать прямо. Один из вариантов — перевести их в формат Sketch, а потом перенести в Figma.

Подведем итог

Figma выглядит как хорошо продуманный инструмент, сделанный дизайнерами для дизайнеров. Главные достоинства редактора:

Надеемся, что обзор сделал для вас Figma более понятной и вдохновил на работу. Создавайте в Figma макеты и маркетинговые материалы для email рассылок в SendPulse!

Маркетолог и копирайтер. Люблю работать с инструментами, эффективность которых легко измерять. Поэтому люблю email рассылки:) Лучшими практиками делюсь с вами.

Источник

Как улучшить организацию проектов в Figma

Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии Pyrobyte. У нас существует корпоративный аккаунт в Figma, которым пользуются все дизайнеры и другие члены команды. Отсюда вытекает проблема: в нем зачастую творится хаос. В этой статье я расскажу, как мы привели проекты в фигме в порядок, а также поделюсь некоторыми советами.

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

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

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

Мы тоже прошли все стадии от отрицания до принятия и привели все проекты в фигме в порядок. Сейчас расскажу как.

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

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

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

Очень часто проблемы уже начинаются на этапе создания проекта. Все файлы, которые относятся к одному проекту мы формируем внутри одного проекта, и файлы фигмы называем в соответствии с их содержимым. Например, trainet/design, trainet/analytics и т.д. Это делается для легкого перехода к файлам нужного проекта.

По возможности мы добавляем обложки к проекту.

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

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

В Material дизайн-системе их называют Headline 1. N, Subtitle 1. N, и т.д. Более подробно можно ознакомиться здесь. Мы придерживаемся этого гайдлайна.

В Material Design цвета называют по четкой структуре, отталкиваясь от правила пропорций цвета 60/30/10. Если цвет используется как основной, то его называют primary, дополнительный цвет имеет название secondary, и третий по значению tertiary. Остальные стили называются по своему назначению, если цвет присвоен к какому-либо действию, то и получает название этого действия.

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

Часто встречал, когда стилям присваивали названия по их цвету black, blue, white и т.д. Мы считаем, что в этом случае подход Material’a более системный и правильный, потому что зачастую бывает так, что в проекте присутствуют несколько оттенков одного цвета, и такие названия, как blue, light blue, super light blue в дальнейшем усложнят работу, особенно если вы передадите такой проект другому дизайнеру.

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

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

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

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

На проектах, как правило, используется большое количество иконок, и поэтому лучше выносить их и называть, начиная с icon /.

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

При использовании в верстке Avocode и Zeplin всем векторным элементам на макетах в параметрах export необходимо выставить корректные настройки. По умолчанию указан формат файла png, желательно поставить svg там, где графика векторная.

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

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

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

Атомарный подход закладывает в себе создание на UI-ките всех состояний заранее, и это помогает не пропустить все валидации компонентов.

Более подробно с документацией Variants вы можете ознакомиться здесь.

Этот подход также помогает front-end разработчикам увидеть все состояния базовых элементов и иметь доступ к ним в одном месте, не прибегая к поиску конкретного по всему проекту. Важно отметить, что скорость внесения правок в проект влияет в том числе на отклик от front-end разработчиков, так как им не приходится ждать большое количество времени на внесение изменений в дизайн, что сокращает время ожидания начала правок в коде и позволяет вносить быстрые корректировки уже в процессе вёрстки/разработки.

Прототипирование в фигме довольно интуитивное, в нем нет большого функционала как, например, в Axure. Единственный совет создания большого прототипа в фигме — сразу начинайте использовать компоненты и Variants, иначе при правках в прототипе потеряется много времени.

Собрали для вас примеры некоторых UI-китов в фигме, с которыми стоит ознакомиться. Пользуйтесь 🙂

Источник

Все, что должны знать разработчики о Figma

Дата публикации: 2020-10-06

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

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Краткое примечание о горячих клавишах

Большинство ярлыков написано как для Windows, так и для Mac, где клавиша Ctrl в Windows соответствует клавише Cmd на Mac, а Alt используется как для Alt (Windows), так и Option/Alt (Mac).

Например, Ctrl/Cmd + Alt + C — это Ctrl + Alt + C на Windows и Cmd + Alt/Option + C на Mac.

Передача задачи разработчику

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

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

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

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

Если вы хотите следовать этой статье (или просто поэкспериментировать с Figma), я воспользуюсь этим файлом, чтобы объяснить все — стартовая целевая страница Figma, темная.

Основы

Когда вы добавлены в качестве соавтора к дизайну Figma, вы можете открыть его в браузере или загрузить настольное приложение (доступно для Windows и macOS). Настольное приложение — это не нативное приложение, а кроссплатформенное электронное приложение, такое как Slack и Visual Studio Code. Функциональность браузерной и десктопной версий сильно не отличается. В настольном приложении есть встроенная поддержка для использования локальных шрифтов, тогда как для версии браузера требуется установить Figma Font Helper, прежде чем вы сможете использовать локальные шрифты.

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

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

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

Навигация по Figma

Прежде чем мы перейдем к интересным вещам, важно, чтобы вы могли быстро перемещаться по Figma — чтобы работать более эффективно.

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

Вы можете увеличивать или уменьшать масштаб, удерживая Cmd ⌘ и прокручивая вверх / вниз или нажимая клавиши + и —.

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

Вы можете быстро увеличить масштаб отдельного кадра или элемента, выделив его и нажав Shift + 2.

Быстро вернитесь туда, где все элементы поместятся на холсте, нажав Shift + 1.

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

Стили проекта

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

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

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

Выбор элементов

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

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

Чтобы выбрать определенный слой, вам нужно удерживать Command ⌘ при клике или кликнуть на элементе правой кнопкой мыши, чтобы открыть меню всех вложенных слоев и выбрать нужный.

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Выбрав элемент, вы можете нажать на вкладку «Код» в правой боковой панели, чтобы отобразить всю информацию CSS об этом элементе.

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

Размеры и измерения

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

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

Экспорт ресурсов

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

Подготовка к экспорту

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

В зависимости от того, какой тип файла вы экспортируете, вы можете настроить разные параметры экспорта. У изображений есть только коэффициент масштабирования, и вы можете выбрать тип файла (PNG, JPG, SVG или PDF). Figma будет использовать имя слоя в качестве имени файла, но вы можете добавить суффикс имени файла. Затем вы можете экспортировать выбранный элемент, используя кнопку экспорта.

Совет: вы также можете быстро экспортировать ресурс, кликнув его правой кнопкой мыши, наведя курсор на Копировать / вставить и скопировав изображение или код SVG. Это полезно, если вам не нужны настраиваемые параметры экспорта, и вам просто нужна быстрая копия одного элемента.

Экспорт всех ресурсов

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

Если вы хотите экспортировать все ресурсы из дизайна за раз, вы можете перейти в главное меню и нажать «Экспорт» в меню «Файл». Вы также можете использовать сочетание клавиш Shift + Cmd + E на MacOS или Shift + Ctrl + E в Windows.

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

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

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

Пользовательский поток и анимация

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

Чтобы просмотреть информацию об анимации, выберите вкладку «Прототип» в правой боковой панели, и вы увидите, как пользовательский поток отображается синими стрелками на холсте.

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

Простая анимация гамбургер-меню

Эта простая анимация открывает гамбургер-меню. Вы можете видеть, что у иконки гамбургера есть триггер On Tap, после его срабатывания он переместится на экран, и мобильное меню будет в открытом состоянии. Тип перехода — это переход Smart Animate, что означает, что Figma автоматически интерполирует между этими двумя состояниями. Она делает это с помощью функции анимации Ease Out длительностью 300 мс.

Эта информация необходима для точного воспроизведения анимации в CSS, но, в отличие от всей другой информации об элементах, анимацию нельзя найти на вкладке «Код»!

Общение

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

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

Обратите внимание, что не все автоматически получат уведомление о том, что вы оставили комментарий. Если вы хотите быть уверены, что кто-то увидит ваш комментарий, то должны упомянуть их, используя символ @, как в Slack или Twitter.

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

Заключение

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

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

Автор: Jurn van Wissen

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Источник

Как пользоваться figma

Как эффективно начать работать в Figma. Пошаговый план действий.

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

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

Для этого посмотрите мой плейлист «Веб-дизайн за 1 месяц». Там я за 4 лекции объясню вам материалы, которые крупные школы дают за 3-4 месяца работы.

Занятие первое

Занятие второе

Занятие третье

Занятие четвертое

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

Четыре шага очень простые, но я гарантирую, что если вы их пройдете, то будете на голову выше всех теоретиков, вечных студентов, выпускников крупных онлайн-школ и т.д. Так как у вас будет главное преимущество – вы сразу же начали применять полученные знания в реально проекте. А дальше вы уже можете изучить точечно темы, которые вам интересны (типографика, колористика, сетки) и пополнять свое портфолио.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на платный интенсив по веб-дизайну. Вы изучите полностью весь дизайн-процесс, в том числе: работа в Figma, общение с заказчиком, анализ и выполнение ТЗ, управление проектами и т.д. Ссылка на сайт интенсива.

Похожие материалы

Как прокачать себя в веб-дизайне

Полезные приемы в повышении навыков веб-дизайна

Источник

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

Об основах Figma для новичков — наименовании блоков и нулевом фрейме — рассказывает Михаил Загородний, Designer в Friflex.

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

На фоне зарубежных санкций компания, как и Adobe, замораживает бизнес-аккаунты российских компаний по тарифам Figma Professional, Figma Organization и Figma Enterprise, но оставляет доступ к базовому бесплатному тарифному плану. Бесплатная версия программы не подойдет для работы команды, но будет все также актуальна для индивидуального использования. Поэтому, если вы фрилансер, работаете в паре с другим дизайнером или самостоятельно, только начинаете карьеру или хотите заниматься UX-дизайном – эта статья для вас. В ней я расскажу, как работать с компонентами, структурировать их варианты и решать ранее невозможные задачи с помощью нулевого фрейма.

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

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

Самый простой компонент – кнопка. Важно помнить, что ее вид не должен меняться от перехода экрана к экрану.

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

Главное преимущество работы с компонентами – возможность вносить изменения во все экземпляры проекта сразу, изменяя только мастер-компонент. Это ускоряет рабочий процесс и делает дизайн-систему проекта более согласованной, упрощает процесс ее поддержки и сотрудничества с другими дизайнерами.

Перед тем как перейти к рекомендациям по работе с компонентами, надо познакомиться с понятиями мастер-компонент (master components) и экземпляр-компонент (component instances).

Мастер-компонент создается при превращении элемента интерфейса в компонент и определяет его свойства.

Экземпляр-компонент – это копия мастер-компонента, который может повторно использоваться в разных проектах. Чтобы отличить мастер-компонент от экземпляра, посмотрите на панель слоёв. Мастер-компонент обозначен иконкой с четырьмя закрашенными ромбами, экземпляр – иконкой с одним контурным.

Экземпляры напрямую связаны с мастер-компонентом, поэтому при внесении изменений в мастер-компонент, экземпляры меняются вместе с ним.

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

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

Чтобы создать варианты мастер-компонента, в меню свойств компонента нужно добавить пункт Variants. Экземпляр вариантов или мастер-компонента не отличаются друг от друга. Однако в первом случае есть возможность быстро поменять вариант экземпляра на другой, а во втором быстро заменить экземпляр уже не получится. К созданным вариантам компонента можно добавлять новые компоненты.

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

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

Важно учитывать, что в вариантах мастер-компонента нужно правильно подписывать элементы в списке слоев. Одинаковые элементы вариантов должны называться одинаково, тогда наполнение останется прежним. Это позволит не менять наполнение компонента при изменении варианта в свойствах экземпляра (подпись кнопки «Вход» будет сохранена при изменении состояния в свойствах компонента). Конечно, если вам не нужен обратный эффект.

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

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

Вы можете создавать вложенность любого уровня и сложности.

Есть задачи, которые невозможно решить с помощью стандартного функционала Figma. Например, ограничение минимальной высоты, ширины элемента, вынос элементов за границы autolayout или наложение элементов друг на друга. Здесь можно использовать нулевой фрейм.

Чтобы создать фрейм, в поле настроек ширины и высоты введите значение 0,001. Если в полях появится значение 0 – ваш фрейм готов! Важно учесть, что при вводе значения 0 или 0,01, Figma автоматически округлит его до единицы, и создать нулевой фрейм не получится.

Добавьте 0px фрейм в auto layout в любую, более удобную для дальнейшего перемещения самого блока, часть контейнера. Далее выделите элемент внутри нулевого фрейма и поместите его в нужное место.

Вынос элемента за границы происходит идентично наложению. Добавьте фрейм в удобное место и вынесите его содержимое за границы auto layout.

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

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

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

Фигма в РФ доступна?

Какие Российские аналоги есть для Фигмы?

Мой Офис Презентация

пока никаких.
как минимум один в разработке.

Комментарий удален модератором

для РФ оплату прикрыли

А кто аналог анонсировал?

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

посмотрим, что сделают, если сделают.

это называется сбро бабла, что там по факту не ясно..

Да, российской картой не оплатить вообще(

В последнем подзаголовке написано про нулевой фрейм «и почему он точно понадобится». Я так и не поняла его назначения. Фигма же нужна для макетов в первую очередь, и для прототипов во вторую. Тултип над кнопкой «tap to add» можно просто поставить над рабочей областью и не извращаться. Второй случай: мы же не делаем полностью рабочее приложение, которое пользователю будет в прототипе позволять вводить текст, соответственно, зачем извращаться, если это можно просто описать в документации? Это как-то легче верстать с нулевым фреймом?

Инна, добрый день!
Конечно, использование нулевого фрейма в первую очередь зависит от задачи. С ним проще создать компонент, который будет адаптивен к любому наполнению. Это упросит командную работу или работу над большим проектом. Например, когда предупрежение должно быть на множестве экранов, а экраны проектируются разными людьми, нулевой фрейм позволит избежать ошибок в индивидуальной подстройке вида предупрежения и поможет сохранить структуру autolayout’а.
В случаях, когда предупрежение встречается один или два раза без необходимости изменения его наполнения, скорее всего, удобнее будет просто вынести кнопку за пределы фрейма. Пример из статьи с подсказкой «Tap to add» лишь демонстрирует возможности использования нулевого фрейма. Более реалистичные примеры – адаптивные к наполнению сообщения или уведомления на подложке, к которым нужно добавить красную точку оповещения.
Надеемся, что возможности нулевого фрейма стали для вас более ощутимыми и помогут вам в новых проектах 🙌

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

Источник

Интерактивные компоненты Figma

Сегодня поговорим об интерактивных компонентах – новом beta-функционале Figma.

Привет! Меня зовут Евгений Шевцов, я руковожу UX-направлением в Usetech и на досуге веду телеграм канал «Мамкин Дизайнер», где рассказываю о жизни дизайнера и о фишечках в Figma.

На прошлой Figma Config 2020 показали новый функционал, который позволит не создавать дополнительные экраны или «костылить» макеты для продвинутого показа прототипов в Figma.

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

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

Процесс создания интерактивных компонентов очень прост и завязан на одной из фич — Variants.

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

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

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

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

В моем случае это два эллипса, один с цельной обводкой, второй обрезанный на четверть. Оборачиваем два объекта в компонент и называем его .loader.

Делаем дубль компонента (инстанс) и оборачиваем его еще раз в компонент. Таким образом у нас должна получиться вложенная структура слоев как на рис.2.

Теперь необходимо включить варианты для только что созданного компонента. Нам необходимо 4 варианта. Вложенность слоев должна быть как на рис.3.

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

Важно: менять угол поворота необходимо не у самого варианта, а у вложенного в него инстанса главного компонента. См. рис.4

Теперь нам необходимо задать триггеры поведения для вариантов.

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

Проделываем эту операцию со всеми вариантами. Последний линкуем к первому.

В настройках прототипа выставляем следующие настройки:

Вытаскиваем наш компонент на фрейм и запускаем прототип.

Два момента, которые хотелось бы уточнить:

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

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

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

Рассматриваю сложные примеры: идущие секунды, прогресс-бар и слайдер громкости.

А еще веду телеграм-канал о дизайне, околодизайнерских темах и фишках в Figma.

Источник

10 лайфхаков в работе с Figma

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

Статья будет полезна как новичкам, так и уже опытным пользователям.

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

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

На самом деле эта структура лишь визуальное решение, так как Figma не позволяет создавать дополнительные уровни вложенности в станицах. В качестве названия раздела используется пустая страница.

Ниже несколько примеров такой структуры.

С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.

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

Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.

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

Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit > Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.

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

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

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

Для этого нужно:

По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин Style Organizer или его аналог.

Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся.

Источник

Как делать варианты элементов интерфейса в Figma

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

Olyasnow для Skillbox Media

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

Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.

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

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с вариантами элементов интерфейса, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Подготовка компонентов

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

Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства

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

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

Как сделать кнопки с системой названий в Figma

Теперь у вас есть два готовых компонента, которые можно превращать в варианты.

Создание вариантов

Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.

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

Как воспользоваться вариантом

Ваша контрастная кнопка перекрасится в серый:

Добавление новых состояний

У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.

Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:

Как добавить новое свойство

Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:

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

С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.

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

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

Плагин Button Buddy

Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.

Как пользоваться плагином:

У вас на макете появится готовый комбайн с базовыми состояниями кнопки:

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

Источник

Фигма: Все, что вам нужно знать

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

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

1. Начало пути

1.1 Заполучите Figma

Зайдите на figma.com, зарегистрируйтесь и следуйте инструкциям. Через пару минут все будет готово!

Вы могли заметить, что Figma позволяет создавать команды и проекты, о которых я расскажу позже, а пока просто создайте новый файл (из меню или с помощью cmd + N).

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

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

1.2 Импорт старых файлов из Sketch

Figma позволяет быстро и точно импортировать файлы Sketch. Просто перетащите файл Sketch на холст Figma!

Также вы можете копировать отдельные элементы из Sketch, щелкнув по ним правой кнопкой мыши и скопировав их как SVG!

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

2. Разработка в Figma

2.1 Настройка новых фреймов (артбордов)

Если раньше вы использовали Sketch, вам будет гораздо легче освоиться. Нажмите A или F, чтобы увидеть все параметры фрейма на панели свойств справа и выберите размер или же просто нарисуйте свой собственный фрейм. Как и в Sketch, вы можете работать с 1x (что означает фактический размер пикселя, поскольку при изменении размера нет потери качества). Вы по-прежнему можете экспортировать ассеты любого размера, которые могут вам понадобиться.

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

2.2 Сетки и макеты

Для мобильных устройств можно использовать стандартную сетку из 8 пунктов. Для веба это не столько интервалы, сколько сетки макета. Вы можете начать с популярной 12-колоночной сетки, так будет легче. Есть и более сложный и современный вариант — настраиваемая CSS сетка. Лучше всего заранее обговорить все со своим разработчиком и договориться о том, какую из сеток вы будете использовать.

Отрегулируйте сетку в меню свойств справа. Вы можете перейти от сетки к столбцам или строкам, а также сделать его фиксированным или жидким.

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

Совет: вы можете переключать видимость с помощью комбинации ctrl + G.

2.3 Слои и группы

Как и в Sketch, в левой части экрана вы найдете панель слоев.

2.4 Векторные фигуры

Figma использует так называемые векторные сети, позволяющие создавать сложные формы!

Вы можете создавать фигуры с помощью хоткеев R (прямоугольник), L (линия) или O (эллипс). Удерживайте shift, чтобы сохранить пропорции. Каждая такая фигура автоматически создаёт свой собственный слой.

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

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

2.5 Изображения

Перетащите изображение в рабочую область. В Figma изображения всегда помещаются внутри фигуры (сродни, маски). Чтобы изменить свойства изображения, нажмите на «Fill» в окне свойств справа и меняйте их на свое усмотрение.

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

Примечание: также можно заполнить уже существующую фигуру изображением. Нажмите на фигуру и перейдите к «Fill» и в раскрывающемся списке выберите «image».

Примечание: если вы новичок, имейте в виду, что вам необходимо владеть или покупать права на изображения, которые вы используете. Также никто не будет осуждать использование изображений без лицензии, их можно найти в Unsplash.

2.6 Типографика

В Фигме уже есть предустановленные шрифты от Google! Но если вы предпочитаете использовать локальные шрифты, вам необходимо установить Font Helper или приложение для Фигмы. Кроме того, убедитесь, что у всех, кто взаимодействует с файлом, есть необходимые шрифты.

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

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

3. Стили

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

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

3.1 Создание цветовых стилей

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

Создайте и используйте свой цветовой стиль.

2. Измените заливку на желаемое значение цвета

3. Нажмите на квадратный символ, содержащий цветовые стили

4. Щелкните «+», для добавления класса. Готово!

Совет: когда вы даёте название стилю, укажите наименование его области применения, а не просто впишите название самого цвета («цвет выделения», а не «оранжевый»).

3.2 Создание стилей для текста

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

Настройка стиля текста схожа с настройкой цветовых стилей.

2. В правом меню свойств щелкните по квадратному значку стилей.

3. Нажмите на «+» и дайте вашему ему имя

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

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

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

3.3. Больше стилей

Сетки также можно сохранять и повторно использовать в качестве стилей.

А еще такие эффекты как тень, внутренняя тень, размытие слоя и размытие фона.

4. Компоненты

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

4.1 Создание повторно используемых компонентов

1. Выберите объект и нажмите на кнопку создания компонента вверху экрана или cmd + alt + K.

2. На панели слоёв вы увидите фиолетовый значок компонента. Это значит, что вы создали главный компонент.

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

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

Совет: в долгосрочной перспективе вы должны стремиться согласовать ваши компоненты Figma с интерфейсными (например, компонентами в ReactJS). Лучше обсудить это со своей командой программистов, чтобы согласовать общие действия.

4.2 Замена мест и вложение

Экземпляры компонентов могут быть вложены в главные компоненты. Это означает, что у вас могут быть компоненты внутри компонентов, внутри компонентов (если вы смотрели Inception, вы понимаете, что я имею в виду).

Вы можете поменять местами вложенные экземпляры, используя меню замены экземпляров справа или просто удерживая cmd + alt + option и перетаскивая их из библиотеки.

4.3 Перезапись

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

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

4.5 Наименование компонентов

Используйте «/» для того, чтобы переименовать компонент, например можно переименовать «share-icon» в icon/share. Тогда Figma автоматически создаст родительскую категорию под названием icon, которая воплотит в жизнь все ваши мечты об обмене экземплярами и экспорте!

Кстати, если у вас есть главные компоненты на нескольких страницах, они будут организованы по страницам.

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

5. Auto Layout

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

5.1 Изменение слоев в auto-layout

5.2 Вложенный Auto Layout

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

Выберите объекты, снова нажмите Shift + A, фрейм автоматической компоновки теперь является дочерним фреймом внутри родительского. Чтобы текстовые фреймы не увеличивались лишь в одном направлении, убедитесь, что вы выбрали фиксированную высоту.

Совет: вы можете поменять местами дочерние фреймы внутри родительских перемещая слои. Довольно приятная фича.

Примечание: любые фреймы с auto-layout можно сохранить как компоненты. Однако overflow прокрутка не будет работать при автоматической компоновке. Это становится актуально для прототипирования. Вы можете использовать одну хитрость, поместив фрейм с auto-layout внутрь обычного фрейма.

6. Прототипирование в Figma

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

6.1 Создание прототипа

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

6.2 Подключение экранов

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

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

6.3. Поведение при переполнении

6.4 Smart Animate

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

7. Совместное использование и работа с другими

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

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

7.2 Создание команды и проекта

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

Чтобы создать команду, просто нажмите кнопку «Сreate new team» и следуйте инструкциям.

Примечание: вы можете перемещать файлы между проектами и командами в любое время.

7.3 Библиотека

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

Примечание: системы дизайна являются важной частью UX / UI в настоящее время и стоит потратить некоторое время на ознакомление с концепцией и различными подходами.

Плохие новости: в бесплатной версии вы можете публиковать цветовые стили только в библиотеке команды. Для сохранения компонентов вам понадобится Pro-статус.

Создание командной библиотеки:

1. В меню слева перейдите в Assets и щелкните на значок книги.

2. Нажмите publish

3. Дайте вашей публикации имя

4. Откройте новый чистый файл в рамках команды

5. Перейдите на вкладку Assets, щелкните на значок библиотеки и активируйте только что созданную библиотеку.

Обновление командной библиотеки:

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

Примечание: Общие библиотеки очень эффективны и могут стать основой вашего процесса проектирования.

7.4 Совместная работа с другими дизайнерами и разработчиками

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

Дизайнеры и копирайтеры → Установите EDIT MODE. Он предоставит пользователям доступ ко всем функциям. Вы увидите аватары и курсоры других пользователей и сможете работать вместе в реальном времени в одном файле!

Разработчики → установите VIEW MODE. Пользователь сможет видеть все спецификации (переключение кода CSS, iOS и Android). Также они могут получить доступ к вашему прототипу в действии и могут скачать любые ассеты нужного размера.

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

7.5 Экспорт ассетов

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

2. Нажмите на экспорт в меню свойств справа.

3. Определите, как экспортировать и готово!

Источник