Время чтения: 4 минуты
С развитием Figma и расширением ее функционала, программа стала актуальна не только для веб-дизайнеров. Благодаря облачной структуре и широкому набору функций, Figma позволяет упростить процесс совместной работы над проектами, повышая эффективность работы в команде.
В посте — курс для тех, кто начинает знакомство с Figma. Автор начинает с обзора интерфейса программы и рассказывает о ее основных инструментах и функциях. Вы узнаете, как работать с сетками и направляющими, применять маски и кадрировать изображения. Вы познакомитесь со стилями и компонентами, которые упрощают работу, и научитесь адаптировать свои макеты.
Я нашла отличный курс. Он мне достался бесплатно, так же бесплатно делюсь с вами и я!
Смотреть в ВК видео
Быстрые клавиши в Фигме
Список горячих клавиш Figma:
Быстрые (горячие) клавиши значительно ускоряют процесс работы в Фигма и над проектом в целом. Рекомендую запомнить самые основные сочетания клавиш, но если что, их всегда можно подсмотреть в Фигме. Для этого нажмите на значок вопроса в нижнем левом углу редактора и выберите Keyboard Shortcuts или нажмите быстрые клавиши [Ctrl]+[Shift]+[?].
[Cmd]+[\] или [Ctrl]+[\] — скрыть/показать панели инструментов
[Cmd]+[0] или [Ctrl]+[0] — показать 100% масштаб макета (1:1)
[Ctrl]+[G] или [Ctrl + Shift + 4] — показать/скрыть сетку
[Shift]+[R] — показать/скрыть линейки (и направляющие)
[F] — создать фрейм
[R] — инструмент прямоугольник
[T] — инструмент текст
[Cmd]+Click или [Ctrl]+Click — позволяет выделить конкретный слой в группе слоев
Чтобы увидеть расстояние в пикселях от одного объекта до другого, выделите один объект, зажмите [Option] или [Alt] и наведите курсором на другой объект.
Чтобы выделить несколько слоев, зажмите [Shift]+ Click по тем слоям, что нужно выделить. Если слой, который нужен, находится в группе слоев, удерживая [Shift] зажмите [Cmd] или [Ctrl] + Click по тому объекту, который нужно выделить.
[Cmd]+[G] — группировать слои
[Shift]+[Cmd]+[G] — разгруппировать слои
[Opt]+[Cmd]+[G] или [Alt]+[Cmd]+[G] — создать фрейм из выделенного объекта или группы объектов
[Opt]+[Cmd]+[K] или [Alt]+[Ctrl]+[K] — создать мастер-компонент
[Shift]+[Cmd]+[O] или [Shift]+[Ctrl]+[O] — сделать слой векторным
[Cmd]+[E] или [Ctrl]+[E] — упростить векторный слой
[Shift]+[H] — повернуть по горизонтали
Плагины для Фигма. Где найти и как установить?
Список интересных плагинов.
Unsplash https://www.figma.com/community/plugi… Первое, что рекомендую установить, это плагин изображений с ресурса unsplash.com. Можно сразу вставлять красивые изображения в свой дизайн. Разрешено бесплатно использовать, как в своих собственных, так и в коммерческих проектах.
Iconfy https://www.figma.com/community/plugi… Более 40 000 векторных иконок, которые можно использовать в своем дизайне. 50 с лишним наборов, которые включают Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и т.п.
Insert Big Image https://www.figma.com/community/plugi… Как мы уже знаем, фигма ресайзит изображения разрешением более 4096px. Этот плагин позволяет вставлять в фигму большие картинки без потери размера и качества. Он автоматически разрезает их на необходимые куски и группирует слои.
Content Reel https://www.figma.com/community/plugi… Генерирует контент для ваших проектов: аватарки, иконки, текст.
User Profile https://www.figma.com/community/plugi… Позволяет отображать красивые сгенерированные аватары в макете.
Figmotion https://www.figma.com/community/plugi… Figmotion – инструмент для анимации проектов в Figma.
Mapsicle https://www.figma.com/community/plugi… Интегрирует карты Mapbox в дизайн вашего проекта. Удобно, когда вам нужно показать блок с картой в макете.
Map Maker https://www.figma.com/community/plugi… Еще один плагин с картами. Добавляет настоящую масштабируемую карту Google.
Image Palette https://www.figma.com/community/plugi… Генерирует палитру цветов на основе выбранного изображения.
Image Tracer https://www.figma.com/community/plugi… Переводит изображение из растра в вектор. Только для ч/б изображений.
SPELLL https://www.figma.com/community/plugi… Проверяет орфографию, как в Google Docs.
Styler Генерирует стили на основе выбранных слоев.
arc Возможность сделать текст по кругу или изогнуть в любом направлении.
Котики, надеюсь вам было полезно. Всегда ваша Алла ♡
Вот где меня можно найти:
- Телеграм (лично мой): t.me/AllyIlly
- Группа про WordPress и нейронки: t.me/wordpress71 — тут делюсь лайфхаками, новостями и немного троллю нейросети
- Дзен: https://dzen.ru/wordpress71 — пишу про веб‑разработку и нейросети, иногда с юмором
- Сайт разработчика сайтов: allawp.ru — всё по делу: проекты, услуги, контакты
- Неформальный бложик: alladizainer.ru — пишу про дизайн, работу и всякие забавные штуки из жизни творца
- Сайт‑портфолио (алладизайнер.рф) — пока в стадии «когда‑нибудь точно доделаю» (но вы заходите, вдруг уже готово!)
Буду рада видеть вас в любом из этих мест!
