в какой стороне находится интерфейс figma
Все, что должны знать разработчики о 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.
В последние годы мы много пользовались Sketch и до сих пор остаемся его большим поклонником. Однако когда дело доходит до совместной работы, появлялись мучительные трудности и приходилось искать альтернативы. Что бы мы ни использовали, они казалась намного менее удобными и вызвали дополнительные трудности, с прототипированием дела обстояли аналогично. Figma пообещала облегчить нам жизнь и сдержала свое обещание.
Зайдите на figma.com, зарегистрируйтесь и следуйте инструкциям. Через пару минут все будет готово!
Вы могли заметить, что Figma позволяет создавать команды и проекты, о которых я расскажу позже, а пока просто создайте новый файл (из меню или с помощью cmd + N).
В отличие от Sketch, файлы Figma хранятся не на Вашем компьютере, а в облаке. Вы можете получить доступ ко всем проектам через браузер в любое время и в любом месте. Существует и отдельное приложение для Mac и PC. Я рекомендую использовать именно их, но это вовсе не обязательно.
Недостатки: вам все так же нужен Интернет. Однако вы можете заранее загрузить файл в приложение, чтобы работать в автономном режиме.
Figma позволяет быстро и точно импортировать файлы Sketch. Просто перетащите файл Sketch на холст Figma!
Также вы можете копировать отдельные элементы из Sketch, щелкнув по ним правой кнопкой мыши и скопировав их как SVG!
☝Совет: я рекомендую использовать приложение фигмы при импорте из Sketch, поскольку в браузере локальные шрифты не будут отображены и это испортит ваш файл.
Если раньше вы использовали Sketch, вам будет гораздо легче освоиться. Нажмите A или F, чтобы увидеть все параметры фрейма на панели свойств справа и выберите размер или же просто нарисуйте свой собственный фрейм. Как и в Sketch, вы можете работать с 1x (что означает фактический размер пикселя, поскольку при изменении размера нет потери качества). Вы по-прежнему можете экспортировать ассеты любого размера, которые могут вам понадобиться.
В отличие от традиционных артбордов, можно вкладывать фреймы отдельно друг в друга. Это позволит вам создавать более сложные конструкции.
Для мобильных устройств можно использовать стандартную сетку из 8 пунктов. Для веба это не столько интервалы, сколько сетки макета. Вы можете начать с популярной 12-колоночной сетки, так будет легче. Есть и более сложный и современный вариант — настраиваемая CSS сетка. Лучше всего заранее обговорить все со своим разработчиком и договориться о том, какую из сеток вы будете использовать.
Отрегулируйте сетку в меню свойств справа. Вы можете перейти от сетки к столбцам или строкам, а также сделать его фиксированным или жидким.
Самое замечательное в сетках и столбцах то, что вы можете настроить сразу несколько сеток и сохранить их. Это удобная функция, которая поможет в адаптации макетов под различные устройства, обмена ими с членами команды или повторного использования в других проектах.
☝Совет: вы можете переключать видимость с помощью комбинации ctrl + G.
Как и в Sketch, в левой части экрана вы найдете панель слоев.
Figma использует так называемые векторные сети, позволяющие создавать сложные формы!
Вы можете создавать фигуры с помощью хоткеев R (прямоугольник), L (линия) или O (эллипс). Удерживайте shift, чтобы сохранить пропорции. Каждая такая фигура автоматически создаёт свой собственный слой.
Чтобы создать более сложную форму, нажмите P или выберите перо в менюшке сверху. По завершении просто нажмите enter. Вы можете изменять свойства и управлять векторными фигурами в любой момент в процессе проектирования через меню свойств с правой стороны.
☝Примечание: векторы можно масштабировать и экспортировать в любом размере. Они идеально подходят для создания простых форм, кнопок, значков, логотипов и всевозможных простых иллюстраций.
Перетащите изображение в рабочую область. В Figma изображения всегда помещаются внутри фигуры (сродни, маски). Чтобы изменить свойства изображения, нажмите на “Fill” в окне свойств справа и меняйте их на свое усмотрение.
В раскрывающемся списке вы можете выбрать:
Кроме того, Figma позволяет настраивать такие свойства как цвет и насыщенность. Обратите внимание, что вы никогда не потеряете исходные свойства изображения, так что не стоит волноваться при работе с цветами.
☝Примечание: также можно заполнить уже существующую фигуру изображением. Нажмите на фигуру и перейдите к «Fill» и в раскрывающемся списке выберите «image».
☝Примечание: если вы новичок, имейте в виду, что вам необходимо владеть или покупать права на изображения, которые вы используете. Также никто не будет осуждать использование изображений без лицензии, их можно найти в Unsplash.
В Фигме уже есть предустановленные шрифты от Google! Но если вы предпочитаете использовать локальные шрифты, вам необходимо установить Font Helper или приложение для Фигмы. Кроме того, убедитесь, что у всех, кто взаимодействует с файлом, есть необходимые шрифты.
Нажмите T для создания текстового окна. Как и обычно, вы можете установить все свойства для текста в меню свойств справа.
☝Совет: если вы новенький в веб-дизайне и дизайне приложений, убедитесь, что размер вашего текста не меньше 16 пикселей, стремитесь к 18 пикселям. В зависимости от вашего шрифта я также рекомендую немного увеличить высоту строки для лучшей читаемости.
Стили позволяют сохранять и повторно применять свойства. Таким образом можно мгновенно обновлять огромные файлы. Можно создавать стили для цвета, текста, сеток и таких эффектов как тени.
Чтобы увидеть все используемые стили, щелкните по серому фону рядом с рамкой и они отобразятся в меню свойств справа.
Стили цвета и градиента в Figma просто великолепны. Вы можете настроить один стиль и повторно использовать его для текста, заливок и контуров! Вы можете изменять и удалять их в любое время, щелкнув по стилю правой кнопкой мыши.
Создайте и используйте свой цветовой стиль:
2. Измените заливку на желаемое значение цвета
3. Нажмите на квадратный символ, содержащий цветовые стили
4. Щелкните «+», для добавления класса. Готово!
☝Совет: когда вы даёте название стилю, укажите наименование его области применения, а не просто впишите название самого цвета («цвет выделения», а не «оранжевый»).
В отличие от Sketch, свойства, что сохраняются в стилях для текста в Figma содержат лишь информацию о семействе шрифтов, размере, высоте строки и интервале. Такой подход делает вашу библиотеку стилей красивой и краткой, поскольку нет необходимости дублировать стиль для другой версии цвета или выравнивания.
Настройка стиля текста схожа с настройкой цветовых стилей:
2. В правом меню свойств щелкните по квадратному значку стилей.
3. Нажмите на «+» и дайте вашему ему имя
4. Чтобы добавить стиль к существующему тексту — щелкните по тексту, а затем выберите нужный стиль в меню справа.
После добавления стиля вы также можете изменять его свойства или вовсе убрать его через меню.
☝Совет: как и в ситуации с цветами, лучше называть стили по области их применения. Таким образом, вы всегда сможете адаптировать шрифты без переименования.
Сетки также можно сохранять и повторно использовать в качестве стилей.
А еще такие эффекты как тень, внутренняя тень, размытие слоя и размытие фона:
Компонентами называют элементы пользовательского интерфейса, которые можно повторно утилизировать в ваших проектах. Компоненты делают ваш дизайн (и последующее программирование) согласованным, позволяют легко обновлять и масштабировать элементы дизайна, что сэкономит вам много времени!
1. Выберите объект и нажмите на кнопку создания компонента вверху экрана или cmd + alt + K.
2. На панели слоёв вы увидите фиолетовый значок компонента. Это значит, что вы создали главный компонент.
Если теперь мы сделаем копию главного компонента, автоматически будет создана идентичная копия, она называется экземпляром. Любые изменения в главном компоненте приведут к таким же изменениям во всех экземплярах. Проще говоря, все изменения родительского компонента, будут унаследованы всеми дочерними.
Вы найдете все свои компоненты на вкладке Assets рядом со слоями слева, также можно перетащить их на свое рабочее пространство.
☝Совет: в долгосрочной перспективе вы должны стремиться согласовать ваши компоненты Figma с интерфейсными (например, компонентами в ReactJS). Лучше обсудить это со своей командой программистов, чтобы согласовать общие действия.
Экземпляры компонентов могут быть вложены в главные компоненты. Это означает, что у вас могут быть компоненты внутри компонентов, внутри компонентов (если вы смотрели Inception, вы понимаете, что я имею в виду).
Вы можете поменять местами вложенные экземпляры, используя меню замены экземпляров справа или просто удерживая cmd + alt + option и перетаскивая их из библиотеки.
Экземпляр всегда будет соответствовать основному компоненту по размеру и общему макету, но вы можете изменить такие свойства экземпляра как цвет, текст и контуры.
Обратите внимание на кнопку отмены в меню свойств, если вы хотите вернуть все в исходное состояние. Также вы можете отсоединить экземпляр, щелкнув по нему правой кнопкой мыши.
Используйте «/» для того, чтобы переименовать компонент, например можно переименовать “share-icon” в icon/share. Тогда Figma автоматически создаст родительскую категорию под названием icon, которая воплотит в жизнь все ваши мечты об обмене экземплярами и экспорте!
Кстати, если у вас есть главные компоненты на нескольких страницах, они будут организованы по страницам.
☝Совет: чтобы компоненты были хорошо организованы, создайте новый фрейм для каждой группы, например «кнопки» или «формы». Теперь перетащите туда свои главные компоненты. Все элементы будут представлены в алфавитном порядке.
Автоматическая компоновка позволяет создавать динамические фреймы, которые увеличиваются или уменьшаются по мере изменения содержимого в них. Это невероятная функция, так как она поможет вам сэкономить массу времени, а также позволит всего одним щелчком мыши проверить, хорошо ли работает ваш дизайн с реальным контентом.
Auto Layout компоненты могут быть вложенными, сочетая в себе горизонтальные и вертикальные пропорции для создания привлекательного интерфейса.
Выберите объекты, снова нажмите Shift + A, фрейм автоматической компоновки теперь является дочерним фреймом внутри родительского. Чтобы текстовые фреймы не увеличивались лишь в одном направлении, убедитесь, что вы выбрали фиксированную высоту.
☝Совет: вы можете поменять местами дочерние фреймы внутри родительских перемещая слои. Довольно приятная фича.
☝Примечание: любые фреймы с auto-layout можно сохранить как компоненты. Однако overflow прокрутка не будет работать при автоматической компоновке. Это становится актуально для прототипирования. Вы можете использовать одну хитрость, поместив фрейм с auto-layout внутрь обычного фрейма.
В Figma есть фантастическое прототипирование для вашего веб-дизайна и дизайна приложений. Никакой другой инструмент вам не понадобится.
Выберите фрейм и в правой части меню свойств щелкните «Prototype», далее по «Prototype Settings» и выберите устройство, под которое будете разрабатывать. Дальше нажмите кнопку воспроизведения в правом верхнем углу, чтобы увидеть ваш дизайн в действии. Вы также можете загрузить приложение Figma Mirror на свой телефон для предварительного просмотра дизайна на вашем устройстве.
Убедитесь, что вы находитесь в меню прототипов справа. Обратите внимание, выбранный элемент имеет синюю рамку с маленьким синим кружком. Щелкните по нему и удерживайте. При перетаскивании появляется стрелочка, которую можно соединить с другим фреймом.
На панели свойств с правой стороны вы можете выбрать действие (смахивание, щелчок, наведение мыши и т.д.) и анимации (сдвинуть, нажать, свайпнуть и т.д.)
Помимо вертикальной прокрутки, Figma предлагает другое очень реалистичное поведение в случае переполнения.
Smart Animate ищет совпадающие слои, распознает различия между ними и анимирует их между фреймами. Это позволяет создавать мощные прототипы. После освоения Smart Animate вам, скорее всего, не потребуются дополнительные инструменты для создания прототипов.
Нажмите по значку воспроизведения в правом верхнем углу, чтобы открыть экран презентации в новой вкладке. Таким образом вы сможете просмотреть все фреймы. Там вы сможете найти поле для комментариев, полноэкранный режим, а также простую ссылку на проект.
Команды в Figma позволяют сотрудничать с другими людьми или просто структурировать вашу работу. Вы можете приглашать участников, добавлять проекты и хранить определенные библиотеки.
Чтобы создать команду, просто нажмите кнопку «Сreate new team» и следуйте инструкциям.
☝Примечание: вы можете перемещать файлы между проектами и командами в любое время.
При работе в команде нам нужно одно конкретное место, в котором хранятся последние обновления всех компонентов и стилей, и к которому имеют доступ все члены команды так называемый единый источник истины. Библиотека команды Figma прекрасно справляется с этим и станет основой вашей дизайн-системы.
☝Примечание: системы дизайна являются важной частью UX / UI в настоящее время и стоит потратить некоторое время на ознакомление с концепцией и различными подходами.
Плохие новости: в бесплатной версии вы можете публиковать цветовые стили только в библиотеке команды. Для сохранения компонентов вам понадобится Pro-статус.
Создание командной библиотеки:
1. В меню слева перейдите в Assets и щелкните на значок книги.
3. Дайте вашей публикации имя
4. Откройте новый чистый файл в рамках команды
5. Перейдите на вкладку Assets, щелкните на значок библиотеки и активируйте только что созданную библиотеку.
Обновление командной библиотеки:
При изменении основного компонента или стиля, Figma предложит вам обновить командную библиотеку. После обновления, все остальные члены команды получат уведомление о том, что для библиотеки доступны обновления, они могут просматривать и обновлять отдельные компоненты или обновить все за раз.
☝Примечание: Общие библиотеки очень эффективны и могут стать основой вашего процесса проектирования.
Пригласите людей, нажав на кнопку «Поделиться» в верхнем меню и введите адрес электронной почты или же скопируйте ссылку и отправьте её вашим коллегам.
Дизайнеры и копирайтеры → Установите EDIT MODE. Он предоставит пользователям доступ ко всем функциям. Вы увидите аватары и курсоры других пользователей и сможете работать вместе в реальном времени в одном файле!
Разработчики → установите VIEW MODE. Пользователь сможет видеть все спецификации (переключение кода CSS, iOS и Android). Также они могут получить доступ к вашему прототипу в действии и могут скачать любые ассеты нужного размера.
☝Примечание: если вы делитесь работой с разработчиками, пока все еще дорабатываете проект, лучше всего настроить отдельную страницу, с самой актуальной версией проекта, дабы избежать путаницы.
В Figma все ассеты могут быть экспортированы в любом размере непосредственно из общих файлов, даже если у вас есть лишь права для просмотра файла. Поэтому, как дизайнеру, вам не нужно ничего экспортировать самостоятельно. Однако, если у вас есть желание, то вот как это работает:
2. Нажмите на экспорт в меню свойств справа.
3. Определите, как экспортировать и готово!
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Полезная статья. Спасибо большое!
Неплохой гайд по старте работы в Figma. Спасибо!
Спасибо за хорошую статью.
хорошая статья для начала работы, нехватает разве что разделов про плагины и комьюнити
Спасибо. Все просто, наглядно и понятно.
Комментарий удален по просьбе пользователя
Почему люди сидят на скетче? Он удобнее чем фигма?
Вы предлагаете начать очередной бой что лучше? )))
Я начинал со скетча, теперь по необходимости и там и там работаю. На мой взгляд сейчас фигма обогнала скетч по удобству и функционалу и, самое главное, развивается быстрее (хотя я остаюсь больше сторонником скетча 🙂 ).
Как получить доступ к полной истории борда, если оплатил план professional?
Она начнёт работать во второй половине 2020-х годов.