Как пользоваться Figma и как в ней работать? Такой вопрос часто задают начинающие пользователи программы, которые только зарегистрировались и установили фигму к себе на компьютер.
В этом уроке кратко разберем интерфейс программы за 20 минут. Это поможет вам быстро стартовать. Вы можете посмотреть видео или воспользоваться текстовой версией урока.
9 причин, чтобы полюбить Figma
На сегодняшний момент инструментов для прототипирования более, чем достаточно. Мы же планомерно перешли на добротного новобранца — фигму, и в этой статье рассмотрим ряд особенностей, за которые она нам так полюбилась.
На сегодняшний момент инструментов для прототипирования более, чем достаточно. Веб-дизайнеры выбирают для себя тот инструментарий, с которым им будет комфортно работать. Кто-то оставил в фаворитах фотошоп, кому-то запал в душу скетч. Мы же планомерно перешли на добротного новобранца — фигму, и в этой статье рассмотрим ряд особенностей, за которые она нам так полюбилась.
Что такое фигма, зачем она нужна.
Figma объединил в себе всё лучшее, что происходило с миром инструментов UI-дизайна за последние несколько лет.
Figma — это лучшие качества от Sketch, Zeplin и InVision в одном крутом продукте.
1 — Доступность
Figma работает в браузере и доступен на любой платформе (если вы уже работали в конструкторах страниц вроде Webflow или Tilda, проблем с адаптацией не будет).
Никаких дистрибутивов и приложений — нужно только зайти на figma.com, зарегистрироваться и начать работать.
Дизайнерам знакомо, что всё, что работает через браузер, — исключительно промежуточные звенья процесса, но не основная, «большая и серьезная» среда для работы. К этому нужно было слегка привыкнуть.
2 — Экосистема
Создавая веб-сайт или мобильное приложение, дизайнерам часто приходится подгружать файлы на облачные хранилища, пересылать их по почте и тому подобное, что отнимает много времени, кроме того, файлы занимают место в памяти компьютера.
Figma решает эту проблему, поскольку рабочие файлы находятся на собственном облаке и организованы простым деревом «команда → проект → файл», дизайнер может просто отправить ссылку на файл клиенту или верстальщику. Поэтому больше никаких конфликтов копий, «залей в Dropbox», «не подгрузилось», «макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)» — в папку Drafts автоматически сваливаются любые новые файлы, не сохраненные в явном виде. Кроме того, если на проекте меняется специалист, не возникнет проблем с тем, где находятся исходники.
3 — Совместное редактирование
Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер.
Что такое Figma и для чего она нужна?
Каждый пользователь, находящийся в данную секунду вместе с вами в одном файле, дает о себе знать мельтешащим курсором с именем — вы всегда знаете, кто это и чем он занят.
4 — Актуальность версий
Все версии и изменения хранятся в Figma и вы можете в любой момент «откатиться» до нужной. Вам больше не нужно хранить десятки файлов на компьютере и помнить, в каком файле дизайн был с тем элементом, который заказчик попросил убрать, а теперь хочет вернуть.
Контроль версий нативный и простой: вы видите, кто вносил изменения, когда, и «откатываетесь» до версии в пару кликов, перезаписывая или создавая копию макета.
5 — Удобные инструменты
Как мы уже упоминали, Photoshop задумывался, как редактор фотографий, поэтому инструменты для рисования крайне неудобны для дизайнеров. А в сфере разработки сайтов и мобильных приложений очень важную роль играет отрисовка иконок в векторе.
Первым тенденцию революции задал Illustrator, в котором появился удобный Pen Tool. Figma же подхватила и улучшила такую практику:
- удобное соединение точек и работа с шейпами;
- создание эффектов, например, тени, занимает считанные секунды
- настройки сетки всегда находятся на главном экране
- удобный pen tool
- направляющие, которые упрощают работу дизайнера
6 — Шрифты
В Photoshop и Sketch при редактировании файлов шрифты «слетают», если на компьютере не установлены необходимые гарнитуры. Figma решила и эту проблему — шрифты тянутся из Google Fonts либо автоматически подгружаются в проект.
7 — Многозадачность
Если вам нужно работать одновременно с несколькими рабочими областями, вы наверняка жаловались на производительность Sketch или Photoshop. Figma же позволяет работать с более, чем десятью файлами и прекрасно себя чувствовать, поскольку производительность продукта на высоте.
8 — Прототипирование мобайл-проектов
Лучше всего преимущества этого продукта раскрываются при разработке дизайна мобильных приложений. Когда проект состоит из более, чем 30 экранов становится достаточно сложно переключаться с одного на другой — Figma дает возможность собрать все экраны в одном месте и эффективно управлять ими.
Figma полезна и для программистов — прямо в программе можно посмотреть информацию об объектах, которая нужна для кода:
Отличная функция — play button. С ее помощью дизайнеры могут “проиграть” приложение, тестируя последовательность и логику переходов так, будто приложение готово и загружено на смартфон.
9 — Интеграция
Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin.
Один из немногих минусов — Figma работает только при подключении к интернету. Однако Figma обладает прекрасными преимуществами, которые выгодно выделяют ее среди других программ, а в современных офисах проблем с выходом в сеть нет.
В свое время Sketch стал революционным продуктом, что послужило отличной почвой для создания еще более высококлассных программ.
9 причин, чтобы полюбить Figma
На сегодняшний момент инструментов для прототипирования более, чем достаточно. Веб-дизайнеры выбирают для себя тот инструментарий, с которым им будет комфортно работать. Кто-то оставил в фаворитах фотошоп, кому-то запал в душу скетч. Мы же планомерно перешли на добротного новобранца — фигму, и в этой статье рассмотрим ряд особенностей, за которые она нам так полюбилась.
Figma объединил в себе всё лучшее, что происходило с миром инструментов UI-дизайна за последние несколько лет. Figma — это лучшие качества от Sketch, Zeplin и InVision в одном крутом продукте. Интерфейс 1 — Доступность Figma работает в браузере и доступен на любой платформе (если вы уже работали в конструкторах страниц вроде Webflow или Tilda, проблем с адаптацией не будет).
Никаких дистрибутивов и приложений — нужно только зайти на figma.com, зарегистрироваться и начать работать. Дизайнерам знакомо, что всё, что работает через браузер, — исключительно промежуточные звенья процесса, но не основная, «большая и серьезная» среда для работы. К этому нужно было слегка привыкнуть.
2 — Экосистема Создавая веб-сайт или мобильное приложение, дизайнерам часто приходится подгружать файлы на облачные хранилища, пересылать их по почте и тому подобное, что отнимает много времени, кроме того, файлы занимают место в памяти компьютера. Figma решает эту проблему, поскольку рабочие файлы находятся на собственном облаке и организованы простым деревом «команда → проект → файл», дизайнер может просто отправить ссылку на файл клиенту или верстальщику.
Поэтому больше никаких конфликтов копий, «залей в Dropbox», «не подгрузилось», «макеты в папке Company/Design/Web/New/3.0/Актуальное/Новая папка(5)» — в папку Drafts автоматически сваливаются любые новые файлы, не сохраненные в явном виде. Кроме того, если на проекте меняется специалист, не возникнет проблем с тем, где находятся исходники.
3 — Совместное редактирование Google Docs отлично показали, что групповая работа над документами облегчает коммуникацию и ускоряет результат. С помощью Figm’ы дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты.
Кроме того, вы можете ограничить статус для каждого участника, например read-only, не переживая, что кто-то нарушит гармонию в дизайне. Для совместной работы нужен только интернет и браузер. Каждый пользователь, находящийся в данную секунду вместе с вами в одном файле, дает о себе знать мельтешащим курсором с именем — вы всегда знаете, кто это и чем он занят.
4 — Актуальность версий Все версии и изменения хранятся в Figma и вы можете в любой момент «откатиться» до нужной. Вам больше не нужно хранить десятки файлов на компьютере и помнить, в каком файле дизайн был с тем элементом, который заказчик попросил убрать, а теперь хочет вернуть.
Контроль версий нативный и простой: вы видите, кто вносил изменения, когда, и «откатываетесь» до версии в пару кликов, перезаписывая или создавая копию макета. 5 — Удобные инструменты Как мы уже упоминали, Photoshop задумывался, как редактор фотографий, поэтому инструменты для рисования крайне неудобны для дизайнеров.
А в сфере разработки сайтов и мобильных приложений очень важную роль играет отрисовка иконок в векторе. Первым тенденцию революции задал Illustrator, в котором появился удобный Pen Tool.
Figma же подхватила и улучшила такую практику: удобное соединение точек и работа с шейпами; создание эффектов, например, тени, занимает считанные секунды настройки сетки всегда находятся на главном экране удобный pen tool направляющие, которые упрощают работу дизайнера 6 — Шрифты В Photoshop и Sketch при редактировании файлов шрифты «слетают», если на компьютере не установлены необходимые гарнитуры. Figma решила и эту проблему — шрифты тянутся из Google Fonts либо автоматически подгружаются в проект.
7 — Многозадачность Если вам нужно работать одновременно с несколькими рабочими областями, вы наверняка жаловались на производительность Sketch или Photoshop. Figma же позволяет работать с более, чем десятью файлами и прекрасно себя чувствовать, поскольку производительность продукта на высоте.
8 — Прототипирование мобайл-проектов Лучше всего преимущества этого продукта раскрываются при разработке дизайна мобильных приложений. Когда проект состоит из более, чем 30 экранов становится достаточно сложно переключаться с одного на другой — Figma дает возможность собрать все экраны в одном месте и эффективно управлять ими.
Figma полезна и для программистов — прямо в программе можно посмотреть информацию об объектах, которая нужна для кода: Отличная функция — play button. С ее помощью дизайнеры могут “проиграть” приложение, тестируя последовательность и логику переходов так, будто приложение готово и загружено на смартфон.
9 — Интеграция Вы можете перенести свои проекты из Sketch без потерь шрифтов, кривых и изображений, а также интегрировать с Zeplin. Один из немногих минусов — Figma работает только при подключении к интернету. Однако Figma обладает прекрасными преимуществами, которые выгодно выделяют ее среди других программ, а в современных офисах проблем с выходом в сеть нет. В свое время Sketch стал революционным продуктом, что послужило отличной почвой для создания еще более высококлассных программ.
Россия , Челябинская область , Челябинск , ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35
Источник: d-element.ru