Как сделать параллелограмм в фигме

КАК СДЕЛАТЬ В ФИГМЕ ПАРАЛЛЕЛОГРАММ

Чтобы создать параллелограмм в Figma, необходимо выбрать инструмент прямоугольника (Rectangle Tool) из панели инструментов. Затем нарисуйте обычный прямоугольник и выберите его.

После этого перейдите в панель свойств, которая по умолчанию находится справа от рабочей области. В панели свойств найдите кнопку «Угол» (Angle) и кликните по ней.

Появится выпадающее меню, где нужно выбрать пункт «Скос» (Skew). Вы увидите две ползунка, позволяющие изменять угол наклона верхней и нижней грани.

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

Вуаля, теперь у вас есть параллелограмм в Figma!

Figma — как создать логотип в фигме

# 23 Как сделать эффект стекла в Figma. Glass Morphism — новый тренд в дизайне интерфейсов.

Как настроить компоненты у ползунка на сайте через варианты в Фигме. Лайфхаки, фишки, секреты Figma

Как сделать дизайн карточки товара на Wildberries. Урок в Figma

Как создать эффект волн в FIGMA

ВИДЕООБЛОЖКА OZON Как сделать? Работа в онлайн программе Supa

Как сделать в Фигме круговые диаграммы и прогресс бары

Figma — фигуры — Линия, Стрелка, Эллипс, прямоугольник, многоугольник, звезда

Векторные объекты в Figma

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

Первый в этом списке объектов – «прямоугольник» (горячая клавиша «R»). Это наиболее распространенный элемент, и в 75% случаев в работе используется именно он. Данный инструмент необходим для создания кнопок, панели, меню, и других элементов интерфейса сайта.

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

Обратите внимание, что внутри прямоугольника будут круглые точки, при помощи которых вы можете закруглять все углы пропорционально. Это делается прямым перетаскиванием точки внутрь прямоугольника. Если вам необходимо закруглить углы по отдельности, то это делается при помощи клавиши «Alt». Можно задать градус закругления в специальной строке в правой части меню. Как вращать и трансформировать объекты, в том числе и векторные объекты, мы рассмотрели в первом уроке.

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

Далее обратим внимание на размеры объектов. X и Y – это положение объекта внутри фрейма. Я рекомендую использовать дополнительную функцию линейки, которая находится в разделе «Yiew» в пункте «Rulers». Выбрав эту функцию в верхней части появится линейка, при помощи, которой удобно видеть размеры ваших объектов, которые выделены синим цветом, а также видеть какое расстояние составляет промежуток от края объекта до края фрейма. То же самое будет и в левой части – синим выделен размер объекта, а белым расстояние до краев фрейма. Эти же размеры будут повторяться и в правой части меню.

W и H – это размер самого объекта. Вы тоже можете менять его при помощи мышки, или задавать более точные данные в этих строках.

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

Кроме того, в правом меню, ниже находится функция «Stroke» — это обводка объекта. Здесь вы также можете выбрать цвет обводки и ее размер.

Нажав на вкладку «Advanced stroke settings» появятся дополнительные возможности для обводки. Таким образом, ее углы можно делать не только прямыми, но и полукруглыми, а также со стрелкой.

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

Свойства векторных объектов можно копировать. Например, для того чтобы скопировать все свойства объекта нажмите на него правой кнопкой мыши, и вберите «Copy properties». Затем выберите объект, в который вы хотите скопировать все свойства, нажмите на него правой кнопкой мыши, и выберите пункт «Paste properties». Таким образом, вы сможете быстро добавлять свойства в новые объекты.

Далее в списке векторных объектов вы найдете Line (линия) и Arrow (линия со стрелочкой с одной стороны). Как видно при добавлении этих объектов их размер также можно регулировать вручную в правой части настроек или при помощи мышки. Если у вас включена функция линейки, то вы также увидите их расстояние до края фрейма. Горячая клавиша Line – «L», а Arrow — «Shift+L».

Следующий объект – круг или овал. Горячая клавиша – «O». Для создания ровного круга необходимо зажать «Shift», и затем выбрать его размер. Для выбора круга во все стороны, зажмите «Alt».

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

Следующий векторный объект – «Polygon» (треугольник). Внутри него есть две точки, отвечающие за разные эффекты. Верхняя точка предназначена для закругления углов, а нижняя за добавление углов.

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

Еще один векторный объект – «Star» (звезда). Используется он не часто, но в некоторых случаях, например, при создании логотипа, он может оказаться полезным.

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

И последний элемент из списка векторных объектов – «Place image». Горячие клавиши – Ctrl+Shift+K. Например, вы можете создать несколько объектов – звезда, прямоугольник и круг. Если вам необходимо вставить картинку в данные объекты, то нажмите на «Place image», затем выберите из жесткого диска вашего устройства подходящую иллюстрацию, после чего кликните на элемент. Таким образом, ваша картинка вставится внутрь этого элемента.

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

Как сделать параллелограмм в фигме

Как я могу создать такой параллелограмм в Illustrator ?

Как и другие, Сорта пытался сказать, что вы можете использовать инструмент Shear (Skew в Photoshop).

Shear Tool местоположение:

Скорее всего, я бы выбрал инструмент прямого выбора (Белая стрела) и выбрал две точки на одной стороне примитивной формы.

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

Помимо использования инструмента перекоса на прямоугольнике вы можете:

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

Дублируйте эту строку, используя Alt (Option в Mac) и убедившись, что она выровнена, удерживая клавишу Shift при перетаскивании.

Сделайте это параллелограммом, добавив прямые линии в стороны.

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

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

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.

Как работать с компонентами в Figma

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

Figma компоненты

С введением санкций у российских бизнес-аккаунтов больше нет доступа к корпоративным тарифам Professional Organization и Enterprise. Остались только базовая и бесплатная версии программы.

Если кратко, то Figma это как Sketch или Adobe XD, но с небольшими нюансами. Основная особенность этого редактора – технология облачного хранения и многопользовательский режим доступа. Таким образом, над макетом могут работать одновременно несколько человек, вносить правки, оставлять комментарии. Скачивать при этом ничего не нужно – макет открывается по ссылке. А еще в Figma есть много удобных функций, которые делают работу над проектом быстрее и проще. Одной из таких функций является библиотека компонентов. Рассказываем, что это и зачем, а также о том, как компоненты Figma сделают вашу работу над проектом продуктивнее.

Что есть компоненты и зачем они нужны

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

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

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

Изменения компонентов одномоментно модифицируют составляющие проекта.

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

Мастер и экземпляр-компоненты

Мастер-компонент (master component) появляется, когда один из элементов интерфейса становится компонентом и приобретает определенные свойства. Копии таких компонентов имеют больше слоев и называются экземплярами (component instances). При изменении мастер-компонентов экземпляры тоже меняются.

На панели слоев по иконке можно определить, какие из элементов – главные компоненты, а какие – экземпляры. Для главных компонентов применяется кнопка с 4 ромбами. Экземпляры обознаются кнопкой только с одним ромбом.

Демонстрация обновления цвета фона кнопки

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

Вариативные компоненты Figma

Figma варианты компонента

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

Как создать варианты мастер-компонента? Добавьте пункт Variants в его меню свойств. Копии экземпляров и мастер-компонентов не отличимы друг от друга.

Создание вариативных компонентов

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

Построение структуры вариантов

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

Название блоков

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

Таким образом, если вариант меняется в свойствах экземпляра, то наполнение компонента можно не менять. Например, если меняется состояние в свойствах компонента, подпись кнопки «Вход» будет неизменной.

Атомарные компоненты

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

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

Простейший пример – список с буллитами

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

Как создать 0px фрейм

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

• ограничение минимальных размеров элемента;
• вынесение элементов за пределы autolayout;
• наслоение элементов друг на друга.

Здесь пригодится нулевой фрейм. Его можно сделать всего за 3 шага:

1. Создать простой фрейм.
2. Установить высоту и ширину 0,001 [или и то, и другое].
3. Снять галочку с Clip content [если внутри нужно размещать какие-либо объекты].

Важно: вводите только 0,001. Figma автоматически округляет значения 0 и 0,01 до единицы, и фрейм создать не получится.

• Наслоение элементов

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

Наслоение элементов друг на друга готово!

• Вынос фрейма за границы

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

Вынос фрейма за границы

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

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

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

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

Россия , Челябинская область , Челябинск , ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Популярное

Как попасть на Яндекс.Карты, Google.Карты, 2GIS

Если ваша компания ведет бизнес офлайн, размещение на Яндекс.Картах и Google и 2GIS поможет р.

Микроразметка schema.org

Schema.org – микроразметка, позволяющая структурировать данные на сайте для п.

TОП-40 плагинов Figma

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

Как сделать параллелограмм в фигме

Привет! Сегодня (да и в дальнейшем) будет нестандартная статья по CSS Magic. Сегодня не будет супер крутых эффектов по наведению и прочего. Просто рассмотрим одну из замечательных возможностей css transform. Поехали!

Итак, чтобы сделать блок в виде параллелограмма — нужно использовать transform: skew() . Рассмотрим на примере:

Имеем обычный блок с классом image и внутри картинку (т.к. просто делать текст внутри параллелограмма не так интересно).

CSS (SCSS)

Написал код в scss, так как сейчас чаще всего пишу на нем и так быстрее. Собственно, создаем блок, даем ему размеры, border-radius (опционально) и overflow: hidden (опционально). Последнее нужно, чтобы наша картинка за пределы блока не выходила. Ну и конечно же, ставим transform: skewX(-30deg) . skewX означает что смещение будем делать только по оси X.

Далее картинка. transform: skew по умолчанию так же смещает все элементы внутри себя. Поэтому, если мы не хотим скошенную картинку, нам нужно вернуть ее назад. Просто пишем обратный transform: skewX(30deg) . Важно, что не 0, а именно противоположное по знаку значение, чем у родителя.

Картинку так же делаем абсолютной, высоту в 100%, а дальше интересный момент. Ширина у нас 130%, т.к. картинка при обратном изменении transform станет квадратной и в углы параллелограмма не попадет. Ее приходится расширять, чтобы она заняла больше пространства (но overflow у родителя как раз не даст нам увидеть это расширение). Ну и конечно, нужно задать object-fit: cover (для тех, кто очень хочет поддерживать ie 11, такой метод, конечно, не подойдет. Но мы идем в ногу со временем и не обращаем внимания на ie).

Гид по Фигме
для начинающих веб-дизайнеров

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

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

Примеры интерфейсов и прототипов, сделанных в Фигме

• Интерфейс мобильных приложений Figma iOS UI kit. панели управления Tesla Model 3 и элементы её интерфейса.

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

Три причины выбрать Фигму для совместной работы

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

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

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

Начало работы в Фигме

Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для iOS или Windows.

Дополнительно скачайте бесплатную программу Figma Mirror (Android/iOS), чтобы оценить, как ваш дизайн будет выглядеть на телефоне.

Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History .

Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF . Пригодится для презентаций.

Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties : скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.

Окрашивайте объект в нужный цвет пипеткой Pick Color .

Инструменты и возможности Фигмы

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

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

Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).

Для настройки сетки нажмите «+» в блоке Layout Grid .

Некоторым дизайнерам удобно добавлять вертикальный ритм, чтобы перемещать объекты по сетке и настраивать расстояние между элементами. Для этого нажмите «+» в блоке Layout Grid ещё раз — появится дополнительная сетка с шагом 10 пикселей.

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

Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра.

Панель свойств объектов находится справа. Рассмотрим основные функции работы с объектами и покажем, как сделать в Фигме иконку «Закладка», используя прямоугольник произвольной формы.

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

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

Вы можете загружать в Фигму SVG-файлы и работать с ними. SVG-файлы можно загрузить с компьютера либо переносить прямо из Adobe Illustrator или Sketch с помощью горячих клавиш Cntrl + C и Cntrl + V.

Обычно файлы такого типа вставляются как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.

В Фигме шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid .

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

По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы или установите Font Installers (Windows/Mac OS), чтобы загружать их в браузер.

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

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

Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн.

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

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

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

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

Дополнительные возможности

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

Шесть плагинов, на которые стоит обратить внимание дизайнеру:

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

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

Горячие клавиши для вызова меню экспорта
Windows: Ctrl + Shift + E
Mac OS: Cmd + Shift + E

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

Выберите формат сохранения файла: для иконок подойдёт SVG, для изображений — JPEG и PNG, а макеты с векторными объектами, которые нужно масштабировать, лучше сохранить в PDF.

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

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

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

Дизайнеры Тильды любят работать в Фигме. Они создали в ней библиотеку макетов, иллюстраций и файлов PNG, которой может удалённо пользоваться каждый участник команды, не боясь потерять исходники файлов. Несмотря на плюсы сервиса, у Фигмы есть ряд ограничений:

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

Неточный экспорт файлов . При копировании PNG, JPG и SVG-файлов, Фигма может добавлять к изображению пару пикселей обводки и искажать линейные иллюстрации.

Нет защиты от копирования . На бесплатном тарифе Starter нельзя защитить файл от копирования, недобросовестный заказчик может сохранить его для редактирования через Duplicate to Your Draft и использовать макет.

Нельзя работать без интернета . Фигма похожа на Google Docs: в самолёте или за городом без интернета сохранить изменения в макете не получится. Фигма обновит его, когда вы будете в сети. Нельзя изменять сочетания клавиш.

К заданным горячим клавишам придётся привыкнуть . Или можно скачать плагин Autohotkey и настроить Фигму под себя.

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

Нарисовать треугольник в фигме

Основы работы в Figma, создаем простые фигуры.

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

Фигуры в векторной графике также называют еще и шейпами.

Создание фигур в Figma

Чтобы создать фигуру в Figma, нужно:

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

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

Перемещение фигур

Чтобы перемещать фигуры по рабочей области Figma, нужно:

• Выбрать инструмент Move V
• Кликнуть один раз по фигуре (выбрать её)
• Затем кликнуть второй раз по фигуре и не отпуская кнопку мыши, переместить фигуру в нужное место

Свойства фигур

Любую фигуру можно залить определённым цветом, создать обводку, добавить эффект тени и многое другое.

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

Как сделать прямоугольный треугольник

В Figma есть инструмент для создания треугольников «Polygon», но с его помощью нельзя сделать прямоугольный треугольник.

Однако задача легко решается с помощью инструмента Перо (горячая клавиша P).

1. Выбираем перо
2. Кликаем: ставим точку — это будет первый угол при гипотенузе
3. Зажимаем Shift и смещаем курсор ровно вниз
4. Кликаем: ставим вторую точку — это прямой угол
5. Снова зажимаем Shift и смешаем курсор в сторон
6. Кликаем: ставим третью точку — это будет второй угол при гипотенузе
7. Отпускаем Shift, и кликаем в первую точку, замыкая треугольник

Видео
Тег video не поддерживается вашим браузером.
Скачайте видео.

Далее для этого вектора вам доступны все опции: заливка, обводка и так далее.

Как сделать так, чтобы контур стал частью фигуры, читайте здесь.

Зажимая Shift вы включаете режим привязок, в котором Фигма округляет угол наклона линии с кратностью 45 градусов: 0, 45, 90 и так далее.

Играй бесплатно в браузере!

Заполните форму, мы сделаем иконку
и добави ее в коллекцию

Стрелки в фигме: инструкция как сделать стрелку в Figma

Если вы интересуетесь тем, как сделать стрелки в фигме, то вот вам пошаговая инструкция. Поговорим об инструменте «Arrow». Как сделать стрелки прямыми, изогнутыми, пунктирными. Расскажу как стрелки на концах сделать в виде линии и треугольника. Ниже видео и статья в текстовом формате со скриншотами.

Как сделать стрелку в фигме

Чтобы сделать (нарисовать) стрелку в фигме, выберите сверху слева в панели инструментов «Line» или нажмите на комбинацию горячих клавиш «Shift + L». Затем с зажатой левой клавишей мыши нарисуйте стрелку нужной длинны.

Как изменить цвет и размер стрелки в фигме?

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

Как изменить конец стрелки в Figma (скруглить, сделать квадратной)

Чтобы появилась возможность отредактировать стрелку в Figma, выберите её, затем сверху по центру нажмите на иконку «Edit object». Также можно нажать на клавишу «Enter».

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

Если выберите значение «Round» из списка, то конец стрелки будет скругленным.

При выборе значения «Square», конец будет квадратным.

Если зададите значение «Line arrow», появится стрелка в виде линии.

Нужна стрелка в виде треугольника? Выберите значение «Triangle arrow».

Если хотите сделать стрелку с пунктирными линиями, то внизу напротив надписи «Dashes» укажите значение в цифрах. Например если зададите «10, 20», то появится пунктирная линия длинной в 10 px и разрывом между линиями 20 px.

Как сделать стреку в Figma изогнутой?

Чтобы сделать стрелку в Figma изогнутой, выберите её, затем сверху по центру активируйте иконку «Edit object».

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

Если потяните созданную точку в сторону или вниз, то создадите изогнутую линию у стрелки.

Чтобы задать скругление созданного угла, выберите иконку «Bend tool» сверху, слева. Затем потягите точку в сторону.

Frame в Figma — подробный разбор инструмента

Инструмент Frame в Figma. Детальный разбор возможностей в программе Figma. Урок в видео и текстовом формате. Как сделать и как использовать.

Как использовать Frame в Figma? Если вы начинающий пользователь программы, то этот урок откроет вам все секреты этого инструмента.

Что такое Frame в Figma и с чем его едят?

Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.

Как сделать фрейм в фигме?

Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».

Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.

Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.

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

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

В правой панеле представлены популярные размеры фреймов (активно при выборе инструмента фрейм):

• Phone — для телефонов.
• Tablet — для планшетов.
• Desktop — для настольных компьютеров.
• Watch — для часов.
• Paper — для бумаги.
• Social media — для социальных сетей.
• Figma community — размеры от сообществ.

Выбираем другое разрешение фрейма из списка

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

Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.

Меняем размер по умному. Как уменьшить или увеличить Frame в Figma?

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

Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.

Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.

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

Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.

Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.

Изменение угла наклона и скругление углов

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

Функция Clip content — что это?

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

Как превратить фрейм в Auto Layout?

Если выбрать фрейм, то в правой панели будет надпись Auto Layout.

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

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

Если выделить какой то элемент внутри Auto Layout и нажать на комбинацию клавиш «Ctrl» «D», то контент дублируется и все автоматически будет перестраиваться.

Подробнее о возможностях Auto Layout поговорим в отдельном уроке.

Сетки во фреймах

Чтобы создать сетку нажмите напротив надписи «Grids» на плюс.

После этого можно выбрать отображение сетки (Grid, column, row).

Изменение цвета фрейма и создание обводки

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

Для создания обводки нажмите плюс напротив надписи Stroke

Как сохранить фрейм из Figma в PNG, JPG, SVG, PDF

Чтобы экспортировать фреймы из фигмы и сохранить их к себе на компьютер, выберите фрейм нажмите на плюс напротив надписи «Export» в правой панели, выберите нужный вам формат для экспорта (PNG, JPG, SVG, PDF) и нажмите на кнопку «Export». Перед этим можно сделать предварительный просмотр нажав на вкладку «Prewie».

Чтобы изменить размер при экспорте, нужно выбрать из списка 1х другое значение. Если выбрано 1х, то экспорт будет один к одному. Если выбрать 2х, то масштаб при экспорте будет в 2 раза больше. Например если поставить 2х и размер фрейма 300px на 300px, то сохраненное изображение будет размером 600px на 600px.

Привязки элементов во фрейме.

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

Закрепление элементов внутри фрейма при скроллинге

Елси выбрать какой-то элемент. Например меню (как на скриншоте выше), а затем поставить галочку напротив надписи «Fix position when scrolling», то этот элемент при прокрутке в режиме презентации будет закреплен.

Горячие клавиши при работе с фреймами в фигме

Как удалить фрейм в фигме

Если вам потребовалось удалить фрейм в фигме, просто нажмите клавишу «Backspace» на клавиатуре. Это позволит его убрать из вашего проекта.

2 способа как скопировать фрейм в фигме

1. Чтобы скопировать фрейм в Figma, выберите его и нажмите на клавиши «Ctrl» «С» одновременно. Затем нажмите клавиши «Ctrl» «V», чтобы его вставить.
2. Выделите фрейм, нажмите на клавиши «Ctrl» «D». Это позволит дублировать слой.

Как объединить Frame в Figma

Есть несколько способов объединить фреймы или элементы во фрейм. Выделите нужные вам фреймы и нажмите на клавиши «Ctrl» «G», либо на правую клавишу мыши и выберите пункт «Group selection». Это позволит объединить их с помощью инструмента «Группа».