Для чего нужна программа figma

Содержание

Многие, наверное, знакомы с Google Docs. Это мощнейший инструмент, который сочетает в себе функции офисных программ и возможности совместной работы. Для автоматизации бизнеса на первом этапе он просто незаменим.

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

история версий;
совместный доступ;
векторные сети.

Совместный доступ

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

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

Фигма или Тильда? Зачем нужна Figma, если есть Tilda?

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

Адаптивность

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

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

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

Инструменты

формы (прямоугольник, линия, стрелка, многоугольник, звезда);
перо;
текст;
рисунок.

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

Здесь же, в главном меню, вы можете оставить комментарий.

Участник команды может ответить на комментарий.

По умолчанию поддерживаются шрифты Google, но по желанию можно загрузить и свои. Текст можно оформить с помощью эффектов – тени, обводка и пр. Результат экспортируется в PNG, SVG или JPG формат. Это дает возможность создавать свои логотипы с надписями.

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

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

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

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

Файлы из Sketch и Angle импортируются, практически не теряя качества.

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

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

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

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

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

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

Тарифные планы

Создатели объявили, что начиная с 1 июля 2017 года, они вводят тарифные планы. Если вы работаете в команде, вы должны выбрать, какой план имеет смысл для вашей команды. Варианты:

Неограниченное число зрителей.
Ограничение по числу проектов — до 3-х.
История версий будет ограничена до 30 дней.

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

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

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

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

Десктопная версия

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

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

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

Вместе с редактором PIXLI, FIGMA станет отличным инструментом в копилке любого дизайнера.

____________________ __________ __________ __________ __________ __________

Материал создан агентством контент-маркетинга Текстотека.

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

Figma: возможности и как в ней работать

figma

В мире проектирования интерфейсов сейчас сформировались несколько лагерей дизайнеров по инструментам. Из крупных: Figma, Sketch, Adobe XD. Помельче: Axure, Framer, Invision. Последняя группа инструментов больше подходит для прототипирования, тогда как для проектирования больше подходит первая.

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

Что такое Figma

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

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

Программа Figma

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

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

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

Файлы в Figma

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

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

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

Как работать в Figma

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

В статье бессмысленно писать, как делать именно интерфейс в фигме, есть видеоуроки, но в целом всё очень просто. Кнопкой «A» (латинницей) вызываешь инструмент Artboard. Он же фрейм. В правой панели выбираешь заготовленный шаблон размера экрана или тянешь просто курсор, чтобы нарисовать свой. А в нём уже сетку и по ней интерфейс.

Всё, как везде.

Преимущества и возможности

Всегда актуальный файл. Никакого final-last-final-update.psd в сотне вариаций, где актуальные части интерфейса разбросаны ровным слоем;
Командная работа. Один пашет экраны, другой причёсывает иконки, третий вписывает тексты и подвёрстывает;
Комментирование. Вот прямо на том, что смутило можно поставить коммент;
Версионность. «Ой, я уже удалил этот файл» больше не прокатит. Прощай Abstract (отдельный сервис для версионирования Sketch);
Универсальность. По минимуму есть и интерактивные прототипы и раздача файла на просмотр по ссылке и экспорт кода и вот вообще это всё; Прощай Avocode, Zeplin, Sympli (отдельные сервисы для отгрузки дизайна разработчикам);
Работа с вектором. Векторные сетки — прсто изобретение богов. Если во всех программах вектор линеен и вот взять одну линию присоединить к середине другой нет возможности, то тут можно. Для рисования иконок — бесценно;
Бесплатность. Полный функционал с небольшими ограничениями доступен всем пользователям;
Мультиплатформенность. Да, можно запустить на линуксе и даже на винде;
Плагины. Можно вообще всё. Вставлять иконки в два клика, трейсить изображения, находить и выделять миллион слоёв по общим свойствам (чтобы потом переписать в них разом текст, например);

На этом преимущества не заканчиваются. Минусы тоже есть, но они незначительные.

Простота освоения

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

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

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

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

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

Компоненты

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

Стили

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

Стили бывают такие:

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

Autolayout

Просто спасение. Делаешь кнопку в компоненте, в дочерней переписываешь текст, и размер кнопки меняется под него. Более продвинутый уровень — Список из вертикального автолейаута, который сам перевёрстывается при удалении компонент из него, а каждый объект списка — горизонтальный автолейаут, в котором если, скажем, удалить картинку вначале, всё сдвинется влево, как в реальном интерфейсе. Немного понижает гибкость, но очень увеличивает автоматизацию при создании дизайна интерфейса. автолейаут — это тоже фрейм, и он тоже может быть компонентой, но привязка к краям внешнего фрейма уже не работает. Подкостыливается пробелами или объектами с прозрачностью 0%.

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

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

Работа с графикой

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

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

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

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

Фреймы

Аналог экранов, но не только. В каждом фрейме может быть помещён ещё один фрейм. Это нужно для того, чтобы, например, когда один фрейм скроллится, другой оставался на месте, или чтобы при растягивании макета на разрешение побольше в одном фрейме объекты тянулись, а в другом были зафиксированы. Если приноровиться — очень удобно. При экспорте в ПДФ фреймы превратятся в слайды.

Версия: платная или нет

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

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

Итог

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

Компьютерная программа Figma — отзывы

Cristallina аватар

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

ne_rugai аватар

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

IgorZhi аватар

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

Смотрите также

Феникс 777 аватар

08.01.2015 21:18

защита изображений водяными знаками

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

08.03.2015 17:32
Достойный конкурент фотошопу (лайтруму), и за скромные деньги

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

volgograd34rus аватар

20.04.2015 12:01

Надо составить кроссворд? В нем много слов? Не получается использовать все слова? Заходим и смотрим решение.

Однажды я сидел в Интернете. И вдруг меня посетила мысль: «Может, скачать программу для создания кроссвордов?». Поискал в интернете. Нашел сайт для создания кроссвордов. Но меня это не удовлетворило.

Поэтому я стал искать программу, а не сайт. И вот я наткнулся на CrosswordCreator.

20.05.2015 — 09:11

Полноценный бесплатный графический редактор Pixel Edit — убийца фотошопа

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

Freelancer аватар

21.05.2015 13:08
Создать логотип за 10 минут? Легко!

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

21.05.2015 14:59

Jpeg Viewer — лучшая бесплатная программа просмотра и редактирования картинок

Казалось бы, что после перехода с Windows XP на 7 и 8 версии, возможностей встроенного редактора графических файлов — mspaint стало вполне достаточно для повседневной работы. Обрезать, повернуть, масштабировать изображение родному виндовому редактору вполне по силам .

Nataliya75 аватар

01.07.2019 14:56

Всё еще верите фоточкам в интернете?

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

Sea-Andrey аватар

27.12.2019 — 10:06

Нестандартное применение программы Inkscape: работа с PDF-файлами

Inkscape — это бесплатный редактор векторной графики. Для решения несложных задач вполне можно пользоваться этой программой, а не устанавливать «тяжёлые» CorelDRAW или Adobe Illustrator. Но Inkscape позволяет работать не только с векторной графикой, но и с некоторыми другими типами файлов.

Acid Fox аватар

13.09.2015 02:20

Настоящий мастер сыграет и на табуретке, но, играя на табуретке, никогда не станешь мастером.) Вечная борьба — САИ или Фотошоп?

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