Figma что это: Что такое Figma и как ей пользоваться / Skillbox Media

Что такое Figma и как ей пользоваться / Skillbox Media

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

Например, вы закончили разработку 50 макетов в Photoshop, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. Раньше приходилось проделывать это вручную. В Figma проблема решена: изменяете что-то одно — меняются стили всех элементов с этим стилем.

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

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

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе: они хорошо масштабируются и их с лёгкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

Фрейм iPhone X и iPhone 8

Панель Grid Layout позволяет быстро создать любую сетку.

• для одного макета неограниченное количество сеток;
• сетки быстро и гибко настраиваются, фиксируются и растягиваются;
• при необходимости цвет сетки легко поменять.

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

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

• Максимум два редактора.
• Максимум три проекта.
• История версий хранится 30 дней.

Если вам станет тесно на бесплатном тарифе, переходите на Professional стоимостью 12 долларов в месяц или Organization — 45 долларов в месяц.

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

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

Что такое Figma и для чего она нужна | GeekBrains

Возможности, преимущества и недостатки популярного графического редактора

https://gbcdn.mrgcdn.ru/uploads/post/2419/og_image/24ddafa5a7faab4385b30fde564dcd9e. png

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

Что такое эта ваша Figma?

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

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

Что можно делать в Figma: базовые фичи

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

Пожалуй, самый весомый аргумент в пользу Figma — многопользовательский режим.

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

Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл 😉 Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.

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

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

Файлы в облаке

Хранить файлы на диске сейчас неактуально — балом правят облачные сервисы. Figma — онлайн-редактор, поэтому результат вашей работы будет автоматически сохранён в её собственном облаке. Но возможность скачать файлы тоже есть. Для этого нужно в главном меню программы выбрать «Файл» и пункт «Сохранить как .fig».

Кросс-платформенность

Доступ к макетам есть с любого устройства — даже с iPad. Достаточно запустить браузер и выйти в интернет. А это, в свою очередь, значит, что больше не нужно постоянно экспортировать макеты с результатом работы из редактора в PNG и JPG. Достаточно отправить ссылку на файл с настроенным доступом, а получателю не обязательно иметь аккаунт в Figma.

Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.

Компоненты

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

История версий

Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.

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

Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.

Фреймы

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

У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:

1. Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
2. Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу Сmd (MacOS) или Ctrl (Windows), тогда все детали макета останутся на своих местах. В противном случае изображение станет непропорциональным.

Сетки

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

• добавить её для фрейма легко;
• настроить можно очень быстро и просто;
• количество сеток для фрейма не ограничено.

Плагины

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

Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.

Десктопное приложение и Figma Mirror для смартфонов

У Figma есть десктопное приложение для Mac OS и Windows, а вот любителям Linux придётся довольствоваться браузерной версией. Ещё есть приложение для мобильных устройств — Figma Mirror. С его помощью можно проверять результат работы на самом устройстве, что очень удобно. Главное, чтобы компьютер и мобильный находились в одной Wi-Fi-сети. Скачать нужные приложения можно в разделе Downloads на сайте Figma.

Импорт Sketch-файлов

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

Стоимость

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

• история изменений хранится 30 дней;
• можно завести и поддерживать не более трёх проектов;
• только два пользователя могут иметь права на редактирование.

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

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

Минусы Figma

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

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

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

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

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

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

Что можно делать в Figma?

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

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

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

Чтобы создать прототип, вам необходимо:

1. Подготовить карту экранов в нужной вам последовательности.
2. В верхней части правого блока переключиться на вкладку Prototype.
3. Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
4. Справа добавить и настроить действие.

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

Usability-тестирование

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

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

Чтобы передать макеты разработчику, вам необходимо открыть ему доступ к файлу с правами на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android. Для определения размеров элементов и расстояний между ними есть направляющие.

Презентация

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

Кому нужна Figma

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

Figma Templates

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

С чего начать?

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

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

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

Выводы

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

8 причин, чтобы полюбить Figma так же сильно, как мы

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

«Мы помним те времена, когда дизайн разрабатывался исключительно в фотошопе. Но вместе с тем, мы помним и боль, с которой сталкивались в процессе разработки интерфейсов. Фотошоп в какой-то степени ограничивал нас, но как-никак был достаточно гибким, чтобы быстро к нему привыкнуть и воплощать в нем гениальные идеи. С 2016 года часть нашей команды использует скетч, другая — не так давно, плотно подсела на фигму. У обеих программ есть ряд преимуществ, во многом они схожи, но одно можно сказать точно — они обе предназначены для прототипирования, это прописано в их ДНК :)», — делится впечатлениями наш тим-лид дизайнеров.

Легко не будет!
Скучно тоже! Авторский ТГ канал Романа Катеринчика. Узнавай инсайты из первых рук. Подписаться на ТГ канал

Интерфейс

1

Экосистема

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

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

2

Совместное редактирование

Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер.

В Sketch же можно комментировать только с помощью специального плагина.

3

Актуальность версий

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

4

Удобные инструменты

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

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

• удобное соединение точек и работа с шейпами;
• создание эффектов, например, тени, занимает считанные секунды

• настройки сетки всегда находятся на главном экране
• удобный pen tool
• направляющие, которые упрощают работу дизайнера

5

Шрифты

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

6

Многозадачность

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

7

Прототипирование мобайл-проектов

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

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

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

8

Интеграция

Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin.

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

Впечатления команды Artjoker

«Мы понимаем, что полностью отказываться от использования фотошопа будет ошибочно. В скетче и фигме все еще нет тех возможностей для обработки фотографий, к которым мы так привыкли. Порой, мы скучаем по использованию масок с плавным градиентом, возможности вырезания объектов из изображений и даже детализированной цветокоррекции. Но важно так же понимать, что инструментарий веб-дизайнера не должен ограничиваться только одной программой. Их должно быть несколько и каждая с первоклассным набором преимуществ, которые открывают новые возможности и позволяют работать быстрее», — делится тим-лид дизайнером Artjoker.

Легко не будет!
Скучно тоже! Авторский ТГ канал Романа Катеринчика. Узнавай инсайты из первых рук. Подписаться на ТГ канал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Символы

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

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

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

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

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

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

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

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

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

Панель Сode

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

Интеграция

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

Сетки

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

Вы можете:

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

Фреймы

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

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

Советы по работе с Figma, что такое Figma

Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.

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

Что такое Figma

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

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

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

• Бесплатные функции. Можно свободно пользоваться данным графическим редактором, но только с некоторыми ограничениями. В их число входит число редакторов и проектов, время хранения истории версий и другие важные мелочи. 
• Встроенные компоненты. Если вы создаете сразу несколько элементов с одинаковым стилем, можно менять их во всем макете. В других графических редакторах вам пришлось бы работать с каждым элементом по отдельности.
• Интеграция с различными сервисами. Можно перенести все свои проекты из Sketch или Zeplin без потери шрифтов, изображений или кривых. Еще доступно подключение к корпоративному мессенджеру Slack, пространству Confluence и так далее.
• Использование через браузер или приложение. Программа работает в вебе и на десктопе. Все, что необходимо для работы с ней – авторизация в уже существующем профиле и наличие стабильного интернет-соединения. Скачать редактор можно с соответствующего раздела официального сайта.
• Многопользовательский режим. Одна из главных особенностей графического онлайн-редактора Фигма. Есть возможность создания собственной команды для дальнейшего сотрудничества в рамках сервиса.
• Наличие фреймов. Причем с предустановленными размерами для разных устройств – телефонов, планшетов, компьютеров, смарт-часов и так далее. Плюс в том, что не придется запоминать какие-либо размеры. Просто выбираете подходящий вариант девайса и начинаете работать с ним.
• Просмотр истории версий. Сервис сохраняет ранние версии файла на 30 дней, при необходимости можно возвращаться к ним и дублировать любую из них. Сохранение происходит автоматически после внесения последнего изменения в файл. Кстати, можно добавлять всем версиям названия и описания.
• Хранение файлов в облаке. Нет необходимости скачивать проект каждый раз после внесения изменений – все сохраняется на диске автоматически.

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

Минусы Figma

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

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

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

Регистрация или авторизация

Если вы не зарегистрированы в данном сервисе, сперва нажмите на крайнюю кнопку «Sign up», введите электронную почту, придумайте пароль и жмите на кнопку «Create account». Можно также войти через сервисы Google.

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

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

Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!

Создание нового файла

Чтобы создать новый файл, жму на плюс в правом верхнем углу интерфейса. Выбираю подходящий формат для будущего дизайна и жму по кнопке «Create file» для старта. Если выбрать пункт «Blank canvas», откроется пустое рабочее пространство.

Импорт файлов

Если вы ранее использовали приложение Sketch, можете импортировать из него проекты в Figma. Как уже говорилось ранее, ни один элемент при этом не пострадает – шрифты, кривые и изображения никуда не денутся и не сместятся. Срабатывает даже простое перетаскивание файла из первого приложения во второй сервис. Доступно копирование отдельных элементов в формате SVG.

Разработка прототипов в Figma

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

Макеты и сетки

Для создания макета необходимо выделить нужный слой, перейти в раздел «Design» в правой панели, а там уже найти пункт «Layout grid». Там выбираете размер, цвет и прозрачность. Можете поменять форму с сетки на столбцы или строчные ряды. Доступно применение сразу нескольких макетов, а для переключения между ними используется комбинация Ctrl + G.

Просмотр прототипов

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

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

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

В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее). 

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

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

Любой созданный вами элемент можно добавить в раздел «Компоненты» для повторного использования в других проектах. Чтобы пополнить библиотеку, следует выделить нужный объект и нажать на комбинацию Ctrl + Alt + K. В результате значок элемента в панели слоев поменяется.

Внесение изменений в таких компонентах согласовано – если поменять какие-либо детали в основном экземпляре, изменения будут внесены во все остальные копии. Добавленные в коллекцию объекты доступны во вкладке «Assets» в левой панели.

Работа со стилями и цветами

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

Слои и группы

Работа со слоями здесь похожа на таковую в Photoshop. Можно создавать отдельные группы, перетаскивать на верхний и задний план определенные элементы. И все это доступно в разделе «Layers» в левой части экрана.

Совместное использование

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

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

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

Но есть и другой способ совместной работы над проектом без приглашения кого-либо в команду. В рабочем пространстве нужного проекта жмем по кнопке «Share», далее настраиваем права и отправляем приглашение. Можно также скопировать ссылку и отправить ее любому человеку.

Типографика

По умолчанию в Фигма установлены шрифты Google. Для десктопной версии вы сможете установить специальный плагин Font Helper для использования локальных шрифтов с вашего компьютера. 

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

Установка плагинов

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

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

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

Фреймы

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

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

Заключение

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

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

интерактивные доски для дизайнеров от Figma — UXPUB

На конференции Config 2021, генеральный директор Figma Дилан Филд объявил о запуске FigJam, нового вайтборда Figma. Сейчас доступна бета-версия FigJam, но до конца 2021 года приложение будет бесплатным для всех пользователей. Ниже вице-президент Figma по продукту Юки Ямасита немного расскажет, почему мы решили создать FigJam.

Многое изменилось приблизительно за пять лет с тех пор, как Figma была запущена в закрытой бета-версии, или, как сказал тогда Дилан: во времена, когда дизайн встретился с Интернетом.

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

Все это сводится к тому, что мы меньше времени проводим вместе и все больше времени в онлайн-пространствах, таких как Figma. Люди используют эти онлайн-пространства всевозможными творческими и неожиданными способами – от игры multiplayer pong до ice breakers, meal planning и мозгового штурма.

Все эти случаи не касаются проектирования продуктов. Люди просто ищут место для общения и обмена идеями.

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

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

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

FigJam – место, где зарождаются лучшие идеи продуктов

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

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

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

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

Команды могут использовать для мозгового штурма стикеры, смайлики и инструменты для рисования в FigJam. А встроенная функция аудио-связи позволяет легко «выговориться» вживую

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

Другими словами, в FigJam веселье встречается с функциональностью.

Это одна из причин, по которой команды Stripe, Netflix, Salesforce, Twitch и других компаний использовали FigJam в течение последних нескольких месяцев для мозгового штурма и формирования идей. Их отзывы, как хорошие, так и плохие, важны не только для нашей команды; они также подтвердили, что FigJam удовлетворяет глубокие потребности пользователей.

Вот как это описал руководитель отдела дизайна Discord Кевин Уилсон:

«FigJam великолепно подошёл для команды продуктовых-дизайнеров Discord, потому что очень похож на Figma, но является его сфокусированной, упрощённой версией, которая отлично подходит для мозгового штурма, ретроспективы или другой работы».

В 2022 году у FigJam будут как бесплатные, так и платные тарифные планы ($8 и $15  за редактора в месяц), но до конца 2021 года – любой пользователь сможет использовать FigJam совершенно бесплатно.

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

10 лучших приемов в Figma или как вырасти до уровня Senior – Сей-Хай

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

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

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

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

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

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

2. Сохраняйте файлы с обложками

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

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

Все, что нужно для создания обложки:

1. Создайте страницу в документе и назовите ее «Обложка» (как вариант, но не обязательно)
2. Нарисуйте фрейм для изображения обложки (лучший размер для этого – 1920 x 960).
3. Наполните обложку такими элементами дизайна, как логотип или другими символическими изображениями, которые помогут вам и вашей команде узнать проект.
4. Щелкните на фрейм правой кнопкой мыши и выберите «Set as thumbnail» (Установить, как миниатюру).

3. Используйте стили буквально для всего

Воспринимайте стили как компоненты для цвета, текста, эффектов и обводки.

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

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

Кроме того, если вы хотите организовать свои компоненты в папки, например «Brand Colors», используйте слэш для разделения названия: Brand Colors / Primary.

4. Организовывайте наборы вариантов с помощью Auto Layout

Знаете ли вы, что можно организовать варианты элементов с использованием автоматического макета? Выделите нажатием фрейм с набором вариантов и нажмите Shift + A. С Auto Layout очень просто упорядочить компоненты.

Это плавно подводит нас к следующему пункту …

5. Используйте Auto Layout для всего

Auto Layout – один из самых важных навыков, которым должен обладать любой современный UI-дизайнер.

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

Если вы еще не освоили Auto Layout, я не могу не порекомендовать бесплатный ускоренный курс Пабло Стэнли по Auto Layout. 👈

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

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

6. Создавайте блок-схемы для экранов

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

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

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

7. Используйте функцию Сonstraints (Ограничения)

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

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

8. Создавайте макеты для компонентов

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

Идея макетов была популяризирована Брэдом Фростом в книге «Методология атомарного дизайна», и это довольно простая концепция.

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

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

9. Организация компонентов

Нет ничего хуже, чем открыть чужой дизайн-файл и понять, что у вас нет возможности внести изменения в основные компоненты, не прибегая к щелканью правой кнопкой мыши и нажатию на «Go to the main component». Эта проблема возникает тогда, когда компоненты не организованны отдельно от дизайна.

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

Чем лучше будут выглядеть дизайн-файлы, тем лучше будут выглядеть сами дизайны.

10. Используйте Loom

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

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

 

Читайте также:

 

Ключевые принципы Soft UI: преимущества и недостатки тренда

10 основных этических норм дизайнера, которые должен знать каждый

3 основные тенденции веб-дизайна в июне 2021

Источник

Цены на бесплатные, профессиональные и корпоративные планы Figma.

Дизайн и прототип
История версий ? Figma автоматически сохраняет и создает версии вашего файла каждые 30 минут. Вы можете назвать версию в любое время и связать ее с любыми предыдущими версиями.
Редактор Figma ? Все элементы дизайна, с которыми вы знакомы — холст, слои, сетки, векторы, формы, текст, ограничения и многое другое.
Расширенные инструменты рисования ? Figma изобретает функции, специально созданные для веб-дизайнеров и дизайнеров пользовательского интерфейса, такие как Smart Selection, Vector Networks и Arc Tool
Auto layout ? Создавать дизайн интерфейса, размер которого автоматически изменяется вместе с содержимым
Стили ? Определите цвет, текст и любые эффекты, которые будут повторно использоваться в объектах
Плагины ? Используйте плагины, созданные сообществом Figma, для улучшения рабочего процесса
Неограниченное хранилище файлов ? Безлимитное облачное хранилище; доступ к файлам из любого места
Кросс-платформенный ? Figma работает на устройствах Mac, ПК и Linux
Sketch import ? Создайте новый файл Figma из импорта Sketch
Интерактивные прототипы ? Создание прототипов с интерактивными наложениями, которые имитируют взаимодействие пользователя с вашим дизайном
Накладки ? Легко создать прототип взаимодействия, в котором элемент появляется над другим
Переходы ? Выберите один из множества вариантов анимации перехода
Расширенная анимация ? Используйте GIF и Smart Animate для детального взаимодействия, анимационного дизайна и т. Д.
Передача разработчика ? Разработчики могут проверять файлы дизайна, брать фрагменты кода и видеть аннотации.
Экспорт PDF, PNG, JPG, SVG ? Экспорт файлов и ресурсов Figma в другие предпочтительные форматы
Сотрудничество
Мультиплеер ? Figma позволяет нескольким редакторам переходить к одному файлу, редактировать в реальном времени и работать вместе
Неограниченное количество зрителей ? Пригласите столько людей, сколько хотите просматривать, комментировать, проверять или экспортировать из файлов Figma — бесплатно!
Ссылки общего доступа ? Отправьте ссылку на файл или прототип Figma — и укажите, кто получит доступ для просмотра или редактирования
Комментарии на холсте ? Соавторы могут комментировать непосредственно прототип или файл, поэтому вы точно знаете, на что они ссылаются.
Режим наблюдения ? Щелкните по конкретному пользователю, чтобы увидеть то, что он видит на своем экране — отлично подходит для пользовательского тестирования и критики дизайна
Частные проекты ? Создавайте места только для приглашенных, чтобы ваша команда могла работать конфиденциально
Разрешения на совместное использование прототипов ? Делитесь прототипами с клиентами и заинтересованными сторонами без предоставления общего файла проекта
Аудиобеседы ? Используйте аудио, чтобы общаться с коллегами непосредственно в файле Figma или FigJam
Централизованные команды ? Объедините несколько команд под одной центральной учетной записью Figma для упрощения управления и совместной работы
Design Systems
Компоненты ? Создать компонент из любой коллекции объектов или слоев и использовать его в качестве многоразового дизайна
Коллективные библиотеки ? Создавайте дизайн-системы с общими UI-компонентами, чтобы ваша команда могла их использовать
Общекорпоративные системы дизайна ? Управляйте системами дизайна и делитесь ими между несколькими командами в вашей организации
Общие шрифты ? Получите доступ к общим шрифтам вашей организации в Figma — мгновенно доступным для всех редакторов
Аналитика системы проектирования ? Просматривайте показатели использования, чтобы отслеживать принятие, измерять влияние и более эффективно поддерживать вашу дизайн-систему
Платформа разработчика
REST API ? Воспользуйтесь нашими REST API, чтобы добавить Figma в свои внешние инструменты и продукты
Сторонние интеграции ? Figma интегрируется с такими инструментами, как JIRA, Zeplin, Dropbox, Slack, поэтому вы можете настроить свой рабочий процесс
Live встраивает ? Встраивайте живые дизайны и прототипы Figma везде, где они вам нужны
Частные плагины ? Создайте собственный частный плагин для своей команды или организации, чтобы использовать его
Администрирование и безопасность
Управление плагинами ? Управляйте плагинами, к которым ваша организация имеет доступ, и устанавливайте плагины от имени ваших пользователей
Централизованное администрирование ? Объедините несколько команд под одной центральной учетной записью Figma; управлять пользователями и выставлять счета в одном месте
Захват домена ? Опция, которая позволяет автоматически добавлять любого, у кого есть подтвержденный адрес электронной почты, в вашу учетную запись Figma.Свяжитесь с отделом продаж, чтобы узнать больше.
Контроль доступа к ссылкам ? Ограничьте возможность обмена файлами по ссылке за пределами вашей организации, гарантируя, что никто не сможет просматривать файлы без явного приглашения
Полное владение контентом ? Все файлы, включая пользовательские черновики, принадлежат вашей организации и могут быть восстановлены при отключении пользователей.
Единый вход (SSO) ? Настроить единый вход SAML с существующей системой управления идентификацией; обеспечить единый вход для всех членов команды и управлять подготовкой через SCIM
Журналы активности ? Просмотрите запись действий, предпринятых участниками в Figma, которые помогают администраторам обеспечивать безопасность своей организации.

Что такое Figma? 101 Введение

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

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

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

Более 2 миллионов графических шаблонов Figma и многое другое с неограниченными загрузками

Загрузите тысячи графических шаблонов Figma, комплектов пользовательского интерфейса и веб-шаблонов с членством на Envato Elements.Он начинается с 16 долларов в месяц и дает вам неограниченный доступ к растущей библиотеке, содержащей более 2000000 шаблонов Figma, дизайнерских ресурсов, графики, тем, фотографий и многого другого.

Изучите шаблоны Figma

Что такое Фигма?

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

Вот как Figma описывает себя:

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

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

Сравнимые инструменты включают Sketch, Adobe XD, Invision и Framer.

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

Figma используется некоторыми крупными брендами, включая Slack, Twitter, Zoom, Dropbox и Walgreens. Уже сами по себе эти названия показывают, что этот инструмент достаточно надежен для работы практически в любом проекте.

Кто должен его использовать?

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

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

Основные характеристики

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

Ключевые особенности:

• Современный инструмент «Перо», позволяющий рисовать в любом направлении и мгновенно создавать дуги.
• Функции шрифта Open Type
• Автоматизированные задачи через плагины для повторяющихся элементов для ускорения проектов
• Инструмент интеллектуального выбора с автоматической регулировкой интервала, расположения и организации
• Гибкие стили, позволяющие сохранить прямо в вашем проекте
• Создание дизайн-систем и компонентов
• Перетаскивание доступных библиотек
• Возможность иметь неограниченное количество зрителей над проектом, чтобы вся команда была в курсе
• Проверьте файлы дизайна и извлеките фрагменты кода
• Простая функция экспорта с живой ссылкой (не в формате PDF)
• Взаимодействие при проектировании и прототипы, оптимизированные для мобильных устройств
• Умная анимация для соединения объектов и переходов
• Встроенное комментирование
• Редактируйте вместе с командами в режиме реального времени в общих пространствах дизайна
• История версий, позволяющая узнать все, что изменилось, и кто это сделал
• Создавайте дизайн-системы с активами с возможностью поиска, общими стилями и всем остальным в одном месте
• Создание компонентов многократного использования с возможностью их отмены при необходимости
• Одна платформа для всего, от дизайна до прототипа

Figma Стоимость

У

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

Полная информация о ценах:

• Starter (бесплатно): до двух редакторов и трех проектов с 30-дневной историей версий и неограниченным облачным хранилищем
• Professional (15 долларов США за редактора в месяц): включает неограниченное количество проектов, неограниченное количество версий, пользовательские разрешения для файлов и пользователей, частные проекты только по приглашению и общие библиотеки групп
• Организация (45 долларов США за редактора в месяц): Включает в себя все профессиональные и общеорганизационные системы проектирования, централизованные группы, частные плагины, администрирование плагинов, общие шрифты, единый вход и повышенную безопасность

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

Заключение

Если вам нужен облачный инструмент и вам нужно что-то, что делает упор на совместную работу, Figma, вероятно, будет для вас правильным выбором. Он работает на Mac и ПК благодаря облачному интерфейсу и имеет функциональность, аналогичную Sketch и Adobe XD (ближайшим конкурентам).

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

Примечание. Все примеры в этой статье были сделаны с помощью Figma.

Figma шаблоны

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

Прочитать статью →

Сила Figma как инструмента дизайна

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

Рассмотрим подробнее.

Figma имеет знакомый интерфейс, который упрощает внедрение.

Figma работает на любой платформе

Figma работает в любой операционной системе, в которой работает веб-браузер. С Figma можно использовать Mac, ПК с Windows, Linux и даже Chromebook. Это единственный в своем роде инструмент проектирования, который делает это, и в магазинах, использующих оборудование с разными операционными системами, каждый может по-прежнему обмениваться, открывать и редактировать файлы Figma.

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

Сотрудничество в Figma — это просто и знакомо

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

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

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

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

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

Figma использует Slack для командного общения

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

Проекты

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

Обмен Figma несложный и гибкий

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

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

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

Встроенные файлы Figma обеспечивают обновление в реальном времени

Figma также предоставляет живые фрагменты кода для вставки iFrame в сторонние инструменты.Например, если Confluence используется для отображения встроенных файлов макетов, эти файлы не «обновляются» путем сохранения файла Figma — эти встроенные файлы ЯВЛЯЮТСЯ файлом Figma.

Если кто-то в Figma внес изменения в макет, это изменение можно будет увидеть вживую во встроенном макете Confluence. (Вы можете узнать больше об интеграции Figma и Confluence здесь.)

Влияние этой функции на процесс UX показано на следующей диаграмме:

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

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

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

Figma отлично подходит для отзыва о дизайне

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

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

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

Передача разработчикам упрощена с помощью Figma

Figma отображает фрагменты кода на любом выбранном кадре или объекте в форматах CSS, iOS или Android, которые разработчики могут использовать при просмотре файла дизайна. Компоненты дизайна могут быть проверены любым разработчиком в любом файле, который они могут просматривать. Для получения информации нет необходимости использовать сторонний инструмент.Даже в этом случае Figma имеет полную интеграцию с Zeplin, если команды хотят делать больше, чем просто измерение и отображение CSS.

Разработчики могут получить доступ к коду из файла дизайна или запустив прототип Figma.

Файлы проекта Figma находятся в одном месте — онлайн

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

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

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

Файлы проекта можно легко организовать в специальном виде.

В

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

Программное обеспечение

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

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

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

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

Версии файлов сохраняются вручную для создания ветвей дизайна.

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

Создание прототипа в Figma простое и интуитивно понятное

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

Прототип

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

Прототипы

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

Командные библиотеки Figma идеально подходят для систем проектирования

Дизайн-системы стали необходимостью для многих компаний, и существует потребность в компонентах (символы в Sketch и Illustrator), которые можно многократно использовать, масштабировать и «токенизировать» для использования в библиотеках шаблонов, доступных дизайнерам UX и внешним пользователям. конечные разработчики.

Немодальный диалог библиотеки команды

Figma предоставляет неограниченный доступ к компонентам и стилям.

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

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

Подход

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

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

Figma создана для улучшения совместной работы дизайнеров

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

Эксперты по дизайну, которые используют Figma после перехода со Sketch (файлы Sketch можно импортировать с четностью в Figma), не разочарованы:

… он полностью меняет способ работы с коллегами и клиентами — Оптимизируйте совместный дизайн с Figma

Figma объединила в себе лучшее из всего в мире инструментов дизайна пользовательского интерфейса за последние несколько лет — Почему вашей команде дизайнеров следует подумать о переходе на Figma

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

Мое время, проведенное в Figma, обычно является самой приятной и самой продуктивной частью моего дня — Figma меняет весь мой рабочий процесс, и это потрясающе!

• • •

Дополнительная литература:

Фигма: все, что вам нужно знать. Figma — это интерфейс для совместной работы… | автор: Courage Egbude

Начать работу с Figma так же просто, как перейти на сайт www.figma.com, нажав «Зарегистрироваться» и введя свои данные. Как только вы это сделаете, Figma откроется с таким стартовым экраном. Нажмите «Новый файл», и мы начнем!

Начало работы

Внешний вид интерфейса Figma довольно минимален, но он противоречит набору мощных функций. Вот объяснение основных областей интерфейса (обозначенных выше):

Меню: в отличие от обычных настольных дизайнерских приложений, меню Figma можно найти, нажав кнопку гамбургера в верхнем левом углу экрана.Найдите минутку, чтобы просмотреть эти меню и посмотреть, что там есть! Вы также можете выполнить поиск по конкретной команде, которая вам нужна. Начните вводить «прямоугольник», и вы быстро найдете инструмент «Прямоугольник» с удобным напоминанием о его сочетаниях клавиш (кстати, это R).

Меню

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

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

Layers: Где каждый элемент в файле перечислен, организован в Frames и Groups.Canvas: Здесь вы создаете и просматриваете всю свою работу.

Инспектор: Инспектор показывает контекстную информацию и настройки для любого выбранного объекта. На изображении выше мы видим параметры самого холста. Обратите внимание, что в Figma есть отдельные вкладки в инспекторе (Дизайн, Прототип и Код) — мы рассмотрим их позже на этой неделе.

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

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

Нажмите «F», чтобы установить новые рамки.

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

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

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

создать сетку, столбцы и строки

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

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

Панель «Слои» слева

• Слои → каждый новый элемент, который вы добавляете, автоматически создает слой.Вы можете переупорядочивать слои с помощью перетаскивания.
• Сгруппируйте слои → Не забудьте сгруппировать слои (выберите слои и нажмите cmd + G ), чтобы ваш файл был организован. Это также поможет вам быстро перемещать и копировать эти группы между кадрами. Чтобы выбрать элемент в крупе, нажмите cmd и щелкните этот элемент.
• Страницы → Вы можете настроить различные разделы или области вашего дизайна. Нет никаких правил, что и как их использовать. У меня обычно есть отдельные страницы для беспорядочного мозгового штурма, макетов и взаимодействий вплоть до финальной версии.
• Assets → Здесь хранятся ваши компоненты , и вы найдете кнопку вашей библиотеки в этом разделе (подробнее о библиотеке , компонентах и ​​экземплярах позже)
• Nested Frames → В Figma также можно вкладывать рамки. Это пригодится при структурировании и создании прототипов.

Figma использует что-то под названием Vector Networks , , что позволяет создавать сложных форм.Прощай, Illustrator !

Создание фигур с помощью Figma

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

Чтобы создать собственную, более сложную форму, нажмите P или выберите перо в верхнем меню. После завершения просто нажмите ввод. Не нужно соединять и закрывать пути! Отлично! Вы можете изменять свойства и манипулировать векторными фигурами в любой момент в процессе проектирования через меню свойств с правой стороны.Векторные сети очень эффективны, если вы хотите знать больше. Я рекомендую это подробное руководство от Design + Code.

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

Изображения в Figma

В раскрывающемся списке вы можете выбрать:

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

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

Figma поставляется с предустановленными фантастическими шрифтами Google ! Если вы предпочитаете использовать локальных шрифтов , вам необходимо установить Font Helper или настольное приложение для Figma. Также убедитесь, что у всех, кто обращается к файлу, установлены те же шрифты.

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

Текст в Figma

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

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

Стили могут быть созданы для следующих

Краски и цвета: заливка, обводка, цвет фона

Краска и цвета

Текст: семейство шрифтов , размер, высота строки, интервал

Текст

Эффекты: drop тень, внутренняя тень, размытие слоя, размытие фона

Эффекты

Сетки макета: ряд, столбец, сетка

Сетки макета

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

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

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

Компоненты

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

Компонент имеет два аспекта:

1. Главный компонент определяет свойства компонента.
2. Экземпляр — это копия Компонента, которую вы можете повторно использовать в своих проектах. Экземпляры связаны с основным компонентом и получают любые обновления, внесенные в компонент.

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

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

Есть много способов использовать автоматический макет:

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

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

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

• Новые или пустые фреймы
• Фреймы с существующим содержимым
• Компоненты и наборы компонентов
• Группы или другие выборки слоев и / или объектов

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

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

• Используйте сочетание клавиш Shift A.
• На правой боковой панели щелкните рядом с Auto layout с выбранным фреймом.
• Щелкните правой кнопкой мыши фрейм или объект и выберите «Добавить автоматический макет».

Совет! Вы можете добавить автоматический макет к компонентам. Вам нужно будет добавить автоматический макет к каждому компоненту индивидуально.

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

С фреймами автоматического макета нельзя делать следующее:

• 🚫 Добавить сетки макета к этому кадру
• 🚫 Применить ограничения к любым объектам в кадре автоматического макета
• 🚫 Использовать интеллектуальный выбор для любых объектов в кадре

Автоматическая компоновка

Направление описывает способ перемещения рамки автоматической компоновки.

• Выберите «По вертикали», чтобы добавлять, удалять и изменять порядок объектов вдоль оси y. Например, объекты в списке или сообщения в ленте новостей или на временной шкале.
• Выберите «По горизонтали», чтобы добавлять, удалять и изменять порядок объектов по оси x. Например, ряд кнопок или значки в меню мобильной навигации.

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

Направление

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

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

• Горизонтальный интервал между
• Вертикальный интервал между

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

Интервал

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

Примечание. Отрицательные значения заполнения не поддерживаются.

Прокладка

Совет! Нажимайте клавишу вкладки для перехода между верхним, правым, нижним и левым полями ввода.

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

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

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

Выравнивание

Если для вашего распределения установлено значение «Расстояние между», у вас есть три варианта для каждого направления:

• по вертикали Автоматическая компоновка: слева, по центру, справа
• по горизонтали Автоматическая компоновка: сверху, по центру, снизу

Если ваше распределение Если установлено значение Pack, у вас будут те же девять вариантов для каждого направления:

• Верхний левый
• Верхний центральный
• Верхний правый
• Левый
• Центр
• Правый
• Нижний левый
• Нижний центр
• Нижний правый
906

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

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

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

• Упаковано: объекты в кадре будут сгруппированы. Используйте этот параметр, чтобы удерживать объекты в кадре как можно ближе и выровнять их вместе.
• Пространство между: Объекты в кадре имеют пространство между собой, равномерно распределенное по направлению и выравниванию, заданному для кадра.Используйте этот параметр, чтобы растягивать объекты по рамке.
Распространение

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

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

Изменение размера

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

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

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

Прототипы - отличный способ:

• Предварительный просмотр взаимодействий и пользовательских потоков
• Обмен идеями и повторение идей
• Получение отзывов от соавторов
• Тестирование взаимодействия с пользователями
• Представление ваших проектов заинтересованным сторонам

Создание связей

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

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

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

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

обмена в Figma

Другие дизайнеры и копирайтеры → Установите РЕДАКТИРОВАТЬ. Обеспечивает доступ ко всем функциям. Вы будете видеть аватары и курсоры других пользователей и сможете работать вместе в в реальном времени в одном файле!

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

Разработчики → установите РЕЖИМ ПРОСМОТРА . Это покажет им все спецификации (переключение кода CSS, iOS и Android). Они также могут получить доступ к вашему прототипу в действии и могут загрузить любые ресурсы необходимого размера.

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

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

• SVG → использовать для векторных файлов , таких как логотипы и значки. SVG можно масштабировать до любого размера без потери качества. Обязательно экспортируйте резервную копию png.
• Jpg → используйте для всех видов прямоугольных изображений и фотографий r без непрозрачности .Убедитесь, что вы указали фактический размер (1x), а также разрешение сетчатки (2x).
• Png → Используйте, если для изображения или фотографии необходим прозрачный фон . Также требуется 1x и как минимум 2x экспорт.
• 1x, 2x → 1x - фактический размер, 2x в два раза больше. 2x - это необходимо для получения четких изображений на дисплеях Retina . Обратите внимание, что 2x, 3x и т. Д. Идут с суффиксом @ 2x, @ 3x , который будет релевантным для идентификации и вызова правильного изображения при кодировании.
• w & h → Вы также можете установить ширину, например 300w = изображений с шириной 300 пикселей. То же для height = h
• pdf → используется, если вы хотите экспортировать всю страницу, например для отправки по почте или добавления в презентацию и требуется высокого качества.

Не забудьте оставить сообщение. Вы также можете связаться со мной в Twitter, Linkedin, Dribbble или Behance.

Что такое Фигма? Ускоренный курс по дизайну [Учебное пособие 2021]

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

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

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

Figma Crash Course Video Version

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

• Настройка учетной записи
• Файл дизайна
• Ресурсы дизайна
• Как начать - основы
• Фреймы
• Столбцы и строки сетки
• Фигуры
• Импорт изображений
• Маркировка и группировка
• Текст
• Панель навигации
• Дизайн кнопок
• Заголовок заголовка и масштабирование
• Дополнительные параметры текста
• Дополнительные параметры текста 9060 Слои Figma
• Группы и разделы
• Шрифты и цвета Figma
• Высота строки текста и интервал
• Выравнивание и привязка
• Маскирование с формами и изображениями
• Копирование групп и разделов
• Обновление разделов
• Выбор цвета и копирование разделов продолжение
• Выбор цвета и правильный оттенок 9 0605
• Раздел отзывов
• Автоформат
• Параметры автоматического раскладки
• Выравнивание автоматического раскладки
• Автоматическое раскладывание содержимого
• Изображения галереи
• Изменение размера изображений
• Нижний колонтитул
• SVG605 инструмент 9060 скрытие цвета и наложение 9060 Редактирование макетов 9060 9060 lock
• Средство просмотра прототипов
• Фреймы и страницы
• Взаимодействие с прототипами
• Навигация по взаимодействию с прототипами на страницу
• Совместное использование прототипов для тестирования и предварительного просмотра
• Экспорт страниц
• Экспорт групп или разделов

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

Введение

Начнем с создания учетной записи на веб-сайте Figma. Сделать это можно здесь: Figma.com.

Просто зарегистрируйтесь с новой учетной записью (электронная почта или вход в Google) - это совершенно бесплатно

Затем нам нужно получить ресурсы дизайна для использования в этом проекте, которые мы возьмем у Frontend Mentor. Вы можете скачать их здесь:

Frontend Mentor | Решение проблемы кодирования целевой страницы агентства Sunnyside

Adarshshanbhag5 - это интерфейсное решение для задачи кодирования целевой страницы агентства Sunnyside на Frontend Mentor

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

Как создать рамку в Figma

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

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

• Выберите инструмент Frame в верхнем меню
• Выберите размер кадра на правой панели

Как добавить сетки и столбцы в Figma

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

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

• Выберите фрейм, который вы хотите привязать к сетке
• Выберите сетку макета на правой панели
• Выберите столбцы и 12 единиц

Как использовать фигуры в Figma

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

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

• Инструмент «Выбрать квадрат»
• Создание квадрата
• Приступайте к формированию и размеру квадрата

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

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

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

• Перетащите изображение с локального компьютера
• Импортируйте изображение из опции загрузки изображения фигур
• Измените размер и поместите изображение на дизайн

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

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

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

• Выберите инструмент «Текст»
• Добавьте текст «О программе» в качестве начала навигации
• Убедитесь, что размер и цвет 24 и белый

Как пометить элементы и создать группы в Figma

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

• Выберите свой элемент / элементы и щелкните правой кнопкой мыши, чтобы сгруппировать, или нажмите Ctrl + G
• Назовите свою группу
• Помещает группы внутри групп для каждого раздела вашей страницы, чтобы улучшить читаемость, когда ваша страница станет большой

Заключение

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

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

Вы можете просмотреть полные результаты дизайна ниже:

Весь этот процесс является частью того, чему я пытаюсь научить на моем собственном канале, а также частью курса / книги, которую я пишу по дизайну, под названием Enhance UI . Цель - помочь разработчикам понять основы дизайна .Ознакомьтесь с моей книгой Enhance UI ниже:

Enhance UI - Design для разработчиков

Learn Design для разработчиков, желающих знать UI, UX и многое другое.

Надеюсь, вам понравилась эта статья. Если вы не знаете, кто я, я Адриан из Австралии. У меня есть крошечный канал в Twitter и YouTube, поэтому, если вы хотите узнать обо мне больше или насладиться моим контентом, посмотрите их как-нибудь. 😉

Designlab | Фигма 101, день 1

Добро пожаловать в Figma 101!

Figma - это инструмент для совместного проектирования интерфейсов, который покоряет мир дизайна.В отличие от Sketch, который работает как отдельное приложение для MacOS, Figma полностью основана на браузере и поэтому работает не только на Mac, но и на ПК под управлением Windows или Linux, и даже на Chromebook. Он также предлагает веб-API, и это бесплатно!

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

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

Что мы расскажем в Figma 101

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

Прежде чем мы начнем

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

Сегодняшние учебные цели

• Знакомство с интерфейсом Figma
• Поэкспериментируйте с некоторыми ключевыми функциями
• Выучите важные сочетания клавиш
• Узнайте, как управлять интерфейсом (масштабирование и т. Д.)
• Создание слоев "Рамки", "Прямоугольники" и "Текст"
• Используйте команды Arrange и Align

Время до завершения: 30 минут

---

Сегодняшнее руководство

1.Настройте свою учетную запись Figma

Начать работу в Figma так же просто, как зайти на сайт www.figma.com, нажать «Зарегистрироваться» и ввести свои данные. Как только вы это сделаете, Figma откроется с таким стартовым экраном. Нажмите «Новый файл», и мы начнем!

2. Осмотрите интерфейс Figma

Внешний вид интерфейса Figma довольно минимален, но он противоречит набору мощных функций. Вот объяснение основных областей интерфейса (помеченных выше):

Меню:

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

инструментов:

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

Опции:

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

слоев:

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

Холст:

Здесь вы создаете и просматриваете всю свою работу.

Инспектор:

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

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

3. Создайте фрейм

В Figma фрейм по сути является контейнером для других элементов.Если вы раньше использовали Sketch или Adobe Illustrator, он работает так же, как Artboard. Нажмите F, чтобы выбрать инструмент «Рамка». Кроме того, вы можете щелкнуть значок инструмента «Рамка» на панели «Параметры» в верхней части окна. Точно так же, если вы привыкли к Sketch, вы также можете нажать A (для «Artboard»).

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

4. Попрактикуйтесь в увеличении и уменьшении масштаба

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

Эти команды будут просто сосредоточены в центре вашего текущего представления. Но есть и другие удобные команды масштабирования:

• Shift ⇧2 приблизит текущий выбор
• Shift ⇧1 увеличивает масштаб, чтобы показать весь холст

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

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

• N - переход к следующему кадру
• Shift ⇧N увеличивает до предыдущего кадра

5. Попрактикуйтесь в перемещении ручного инструмента по холсту

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

6. Создайте текстовый слой

Теперь давайте создадим текст. Нажмите T, чтобы выбрать инструмент «Текст», и щелкните в любом месте рамки iPhone 8, чтобы создать текстовый слой. Это будет частью дизайна кнопки, поэтому давайте набираем «Войти». Нажмите Escape, чтобы выйти из инструмента «Текст».

7. Создайте прямоугольник и расположите слои

Нажмите R, чтобы выбрать инструмент «Прямоугольник».Обведите прямоугольник в форме кнопки вокруг только что созданного текста.

В настоящее время текст скрыт под прямоугольником. Чтобы исправить это, нам нужно использовать команды Figma «Упорядочить». Перейдите на панель слоев в левой части окна. Выберите текстовый слой «Войти», затем щелкните правой кнопкой мыши (ПК / Mac) или щелкните, удерживая клавишу Ctrl (Mac), чтобы открыть список параметров. Нажмите «На передний план», и текст теперь будет размещен поверх прямоугольника.

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

Mac:

• ⌘]: перенести вперед
• ⌘Opt]: вынести на передний план
• ⌘ [: отправить назад
• ⌘Opt [: отправить обратно

PC:

• Ctrl]: перенести вперед
• CtrlShift ⇧]: вывести на передний план
• Ctrl [: отправить назад
• CtrlShift ⇧ [: отправить назад

8.Совместите текст и прямоугольник

Это кнопка, поэтому мы хотим, чтобы текст и формы прямоугольника были центрированы относительно друг друга. В Figma есть набор команд «Выровнять», которые позволяют нам это делать. Убедитесь, что инструмент «Перемещение» выбран, нажав клавишу Escape или V, а затем перетащите «рамку» (прямоугольное выделение) вокруг текста и прямоугольника.

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

9. Добавьте закругленные углы к прямоугольнику и измените цвет

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

Чтобы максимально увеличить углы и создать полукруги на каждом конце прямоугольника, просто введите число, превышающее половину высоты объекта. (Мы установили его на 32, чтобы мы были защищены на случай, если позже мы захотим сделать кнопку немного больше - но попробуйте другие числа и посмотрите, что произойдет!)

Настройки цвета также можно найти в Инспекторе.Мы часто хотим привлечь внимание людей с помощью кнопок, поэтому выделите прямоугольник и выберите яркий цвет! Мы выбрали ярко-желтый цвет, введя шестнадцатеричный код (# EEEE33), но вы также можете щелкнуть, чтобы открыть цветовую палитру, и выбрать цвет таким образом.

10. Измените шрифт

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

Вперед!

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

Последнее, что нужно сделать на сегодня, это дать нашему файлу имя - для этого просто снимите выделение со всех объектов (Escape сделает свое дело) и щелкните там, где написано «Без названия» в верхней части окна. Затем введите что-нибудь вроде «Приложение Figma 101». Вот и все! Figma хранит все ваши файлы в облаке.

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

Сегодняшних бонусов:

+ Памятка по сочетаниям клавиш (Windows)
+ Памятка по сочетаниям клавиш (Mac)
+ Образец файла с выполненным на сегодня заданием

Почему мы должны использовать Figma.Я использовал Figma в течение месяца, и я был… | автор: Marco Pacifico

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

Figma - это инструмент веб-дизайна с возможностью совместной работы в реальном времени.

Это похоже на Craft Freehand, но со всеми функциями Sketch (и другими).Он работает в веб-браузерах, а также есть собственные приложения, позволяющие работать в автономном режиме.

Почему Интернет - это хорошо?

• Нет программного обеспечения для загрузки, установки и постоянного обновления.
• Нет необходимости сохранять и систематизировать файлы. Ваша работа автоматически сохраняется в общем пространстве в облаке.
• Один URL становится источником правды, который может увидеть каждый. Это означает…
• Нет необходимости постоянно загружать, синхронизировать и упорядочивать PNG в нескольких местах.

Но Фигма медленная?

Нет. Люди считают, что Figma более производительна, чем Sketch. Это был мой опыт, даже при работе с большим файлом.

А как насчет экосистемы Sketch? В Sketch так много плагинов, на которые мы полагаемся в нашем рабочем процессе.

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

Figma имеет все функции и возможности Sketch + Abstract + InVision + Craft + Liveshare + Freehand + Zeplin + Dropbox все в одном, а также множество других.Вот лишь некоторые из возможностей Figma:
• Аналогичный интерфейс и все те же инструменты рисования, что и Sketch.
• Прототипирование. В Figma есть интерактивная функция прототипирования, аналогичная Craft + InVision.
• Встроенное комментирование . Любой, у кого есть ссылка, может добавлять комментарии в любом месте дизайна, подобно тому, как комментирование работает в InVision. Вы можете отмечать людей в комментариях, отмечать комментарии как решенные и даже интегрироваться со Slack.
• Передача разработчика.Разработчики могут получать размеры, стили и загружать значки и изображения по URL-адресу проекта. Это похоже на Zeplin, но, опять же, вам не нужно синхронизировать артборды при каждом обновлении дизайна.
• Контроль версий. Figma включает историю версий для всех соавторов. Вы можете выполнить откат или выполнить ответвление из предыдущего состояния. Это работает как машина времени на Mac.
• Многопользовательская совместная работа . Несколько человек могут сотрудничать в режиме реального времени. Как и в случае с Freehand, мы все видим курсоры друг друга на экране, можем рисовать и комментировать.
• Liveshare. Если вы нажмете на чей-то аватар, вы увидите, что он видит на своем экране, и проследите за его курсором. Это работает так же, как InVision Liveshare (RIP Liveshare).
• Компоненты. Аналогичен символам в Sketch, но более гибок и с ними проще разрабатывать. (Подробнее об этом ниже)
• Ограничения. Аналогично изменению размера в Sketch, но более интуитивно понятно.
• Командные библиотеки . Вы можете делиться и обновлять коллекции компонентов в разных проектах.
• Бонус: вы даже можете встраивать проекты Figma в Dropbox Paper.

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

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

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

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

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

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

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

Мне нравится то, что Томас Лоури, дизайнер OpenText, написал о том, как изменился его процесс проектирования с использованием Figma:

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

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

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

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

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

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

Как компоненты могут быть более гибкими, чем символы?

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

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

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

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

Как легче разрабатывать компоненты, чем символы?

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

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

Просмотр и доступ к компонентам из вкладки на панели слоев

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