Графический редактор figma на русском

How it works

The first release of the Figma Web API has three core capabilities:

  1. Read design files in an open JSON file format
  2. Read/Write comments to design files
  3. Render design files (and parts of design files) into standard image formats (png, svg, etc)

Our open file format allows third party tools to consume Figma designs in a reliable way. Unlike our desktop competitors, Figma’s Web API isn’t tied to operating systems, specific file paths or versions of design software. This means it’s possible to access the current state of a design from software running on entirely different computers, or even on the web like Figma itself — setting the stage for an entirely new class of design integrations.


Uber employee looks at a real-time feed of designs fed to a TV by Figma’s API

Once you know the unique key of a Figma design — which is contained in the URL — you can extract a live snapshot of the tree of shapes, text, components, prototype links, transitions, constraints, etc that define how a Figma design looks and behaves. You can also ping an endpoint to generate a JPG, PNG or SVG of any file or file subtree.

We’ve designed the API to be as ergonomic as possible so it’s fast and easy to script improvements to internal company workflows or integrate Figma with other tools. Because it’s web-based, you don’t need to learn esoteric scripting languages to do this. You can rely on the programming frameworks you’re familiar with and interface directly with a well defined web API rather than bind yourself unnecessarily to another proprietary plugin framework. (This will make it easier to keep integrations up to date — and therefore less buggy!)

We know you’re wondering what’s coming up soon. Here’s a preview:

  1. Webhooks. Next we plan to release Webhooks that stream callbacks to events in Figma. You can attach a Webhook to a file or team. You’ll get back events mapping to file updates.
  2. Write API. While our Comment API allows clients to write to Figma, today’s release is mostly about enabling read cases and opening Figma up to the outside world. We plan to introduce a Write API later this year… it’s something we’re super excited about!
  3. Extensions. If we had $1 for every time customers requested in app extensions, we might not have needed to raise our last round of funding. That said, we have watched as our competitors added extension models which granted developers freedom at the expense of quality, robustness and predictability. We’re eager to leverage the incredible collective brainpower of the Figma community in making our tool better, but we’re not going to introduce extensions until we are confident our extension model is robust. There’s no ETA just yet, but we are actively exploring how to build this in a solid way.

Plugin API access

The Plugin API supports both read and write functions, allowing developers to view, create, and modify the contents of Figma design and FigJam files.

In both Figma and FigJam, you can access most of the plugin API through the figma global object.

Plugins expose, first and foremost, the contents of a file. That’s anything that exists in the layers panel and any properties associated with that layer in the properties panel. Plugins can view and modify aspects of these layers or nodes, like the color, position, hierarchy, text, etc.

The plugin API doesn’t allow you to access anything in that file that’s outside the canvas. Plugins can’t access:

  • Styles and components from any team or organization libraries. The Plugin API can only access styles, components, and instances that are local to that file.
  • External fonts or web fonts accessed via a URL. Plugins can only access fonts that are accessible in the editor. This includes Figma’s default fonts, shared organization fonts, or fonts stored locally on your computer. You’ll be required to . This doesn’t apply to fonts you want to use in your plugin’s UI.
  • Other file metadata like the file’s team or location, permissions, users, or any comments associated with that file. The includes the version history of that file. You can get read access to these aspects of a file via I.

Document structure

Every file in Figma consists of a tree of nodes and at the root of every Figma or FigJam file is a Document node. The document node is how you access and explore the contents of a file.

In a Figma design file, every DocumentNode will have PageNode that represent each page in that Figma file. There can only be one document node per browser tab and each of it’s children must be PageNodes.

As FigJam files don’t support pages, there won’t be any PageNodes to explore. Instead, the children of the document node will be the layers and objects on that board.

The document node can then have any number of child nodes. Each subtree that stems from the document node represents a layer or object on the canvas. There are specific nodes or classes for different types of layers in Figma — like frames, components, vectors, and rectangles.

Nodes have a number of properties associated with them. Some of these are global properties, that exist on every node, whereas other properties will be specific to the type of node.

You can create plugins for a specific editor type, both editors, or build plugins that perform different actions in each editor. While some node types can only be created in a specific file or editor type, you will generally be able to read and modify most nodes, regardless of the editor type.

Browser based

Figma is predominantly browser-based software, which means it can be run on all full desktop operating systems (MacOS, Windows, Linux, etc), as well as Chrome OS .

Like Figma, plugins are powered by web technologies. Part of the plugin API runs in an meaning you can also access browser APIs. This includes making network requests, opening files, and using functionality like , WebGL, WebAssembly, and audio APIs, etc.

The Plugins API doesn’t support desktop-specific APIs. While Figma has desktop applications, not everyone accesses Figma via the desktop. We want plugins to be as accessible and cross-platform as Figma itself. There are also security concerns which require a thorough and considerate approach.

Browsers already come with APIs such as reading files and saving files. Browser engineers have already put a lot of hard work into creating secure APIs, and we are content to follow their lead.

Core API

We built the Plugin API around a set of fixed controlled endpoints. There’s a lot of extra functionality we could provide via the Plugin API, including helper functions that perform or automate a sequence of functions or events.

We made a conscious decision to keep the core Plugin API as contained as possible. This reduces the risk of us introducing code-breaking changes to the API and makes it easier for plugin developers to maintain plugins.

This means that we don’t include any helper functions that developers can write using existing functions available in the Plugin API.

Github


The GitHub Octicon set in Figma (left) and GitHub (right)

With the new Figma API, GitHub can push changes to their icon system — Octicons — from a single design file. When someone needs to alter an icon, they can simply edit the Figma file, which serves as the source of truth. A designer or engineer can then submit a pull request with a reference to the updated Figma design. This triggers a new build via Travis CI which uses Figma’s API to automatically extract icons from the Figma file and publishes the updated icon set in each format.

Driving the changes from a single design file reduces the barrier for contributing said changes. It also allows GitHub to run everything via common continuous integration services rather than setting up Mac servers. In the future, when Figma releases our Write API, GitHub plans to make data flow bidirectionally so the repository and design file are always in sync. This way anyone will be able to make changes to the Octicons icon set in the way they feel most comfortable, whether that’s design or code!

Как работать в программе

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

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

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

Обучение доступно и на специализированных каналах на Youtube. Этот вариант актуален для тех, кто быстро схватывает информацию и не желает тратить лишние средства. У тех, кто хорошо знаком с работой в программах Sketch и Photoshop, проблем с Фигмой возникнуть не должно.

Возможности Фигмы заключаются в следующем:

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

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

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

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

Humans to Figma помогает создавать иллюстрации людей. Unsplash, в свою очередь, помогает подобрать и вставить нужное изображение. Чтобы получить доступ ко всему перечню плагинов, следует нажать на кнопку «Browse all plugin».

Создание нового файла осуществляется через кнопку «Drafts» или значок плюса, который находится в правом верхнем углу. Название файлу нужно присваивать самостоятельно. По умолчанию за ним закрепляется название «Untitled».

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

В других случаях состав команды можно менять на свое усмотрение. Работа в Фигме сходна с Google Documents. Каждому проекту присваивается определенная папка, где хранятся все файлы.

Бесплатная версия программы предполагает создание не более 3 проектов. Внутри каждого проекта можно перемещать файлы в форматах JPEG, PNG и SVG.

Other

listAvailableFontsAsync(): Promise<Font[]>

Returns the lists of currently available fonts. This should be the same list as the one you’d see if you manually used the font picker.

loadFontAsync(fontName: FontName): Promise<void>

Makes a font available in the plugin for use when creating and modifying text. Calling this function is necessary to modify any property of a text node that may cause the rendered text to change, including , , , etc.

You can either pass in a hardcoded font, a font loaded via , or the font stored on an existing text node.

Read more about how to work with fonts, when to load them, and how to load them in the section.

createImage(data: Uint8Array): Image

Creates an object from the raw bytes of a file content. Note that objects are not nodes. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain images.
Example: how to work with images.

getImageByHash(hash: string): Image

This gets the corresponding object for a given image hash, which can then be used to obtain the bytes of the image. This hash is found in a node’s fill property as part of the ImagePaint object.

mixed: unique symbol

This a constant value that some node properties return when they are a mix of multiple values. An example might be font size: a single text node can use multiple different font sizes for different character ranges. For those properties, you should always compare against .

Скачивание и установка Figma для работы на компьютере (Windows и Mac Os)

Чтобы скачать десктопную версию приложения Figma для Windows или Mac Os нажмите на меню «гамбургер» в левом верхнем углу и выберите надпись «Get Desctop App». В приложении работать удобнее, хотя можно работать через браузер. Приложение удобнее тем, что там можно создавать сразу несколько файлов. В браузере дела обстоят иначе.

Второй способ скачать программу figma на ваш компьютер — это перейти по адресу https://www.figma.com/downloads/ Там можно выбрать приложение для macOs либо для Windows.

После скачивания архива, его распаковки и открытия программы figma на вашем компьютере перед вами появиться надпись «Welcome to Figma». Вам предложат авторизоваться через браузер. Для этого вы должны быть авторизованы в вашем аккаунте. Нажмите на кнопку «Log in with browser».

Вас перенаправит в браузер. Там нажмите на кнопку «Open the Decktop App».

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

Остальные уроки по работе в Figma можете посмотреть по этой ссылке

Как нарисовать мяч для регби

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

Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:


Изображение: modi.ru / Skillbox Media

Основа мяча

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

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

Видео: Виктор Засыпкин / Skillbox Media

Поперечный шов

1. Создайте круг и растяните его по основному шву, который пересекает его.

2. В режиме векторного редактора подгоните форму овала под шов.

3. Удалите фон, добавьте на вектор обводку и перенесите его на овал в форме мяча.

Видео: Виктор Засыпкин / Skillbox Media

Дополнительный шов

1. Создайте квадрат и подгоните его размеры под форму дополнительного шва.

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

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

4. Этот шов не сплошной, а строчной. Укажите в настройках обводки пунктирный стиль. Чтобы это сделать, в блоке Stroke на панели инструментов нажмите и в появившемся меню в пункте Stroke Style укажите стиль Dash. Отрегулируйте настройки Dash (количество точек) и Gap (шаг), чтобы пунктир примерно напоминал шов настоящего мяча.

Видео: Виктор Засыпкин / Skillbox Media

Блик

1. Скопируйте основной овал, выделите его и укажите цвет заливки: белый.

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

3. Поместите блик на мяч. Скорее всего, он будет великоват, поэтому уменьшите его и подправьте ломаные углы с помощью усов.

Видео: Виктор Засыпкин / Skillbox Media

Левая белая полоска

Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:

1. Создайте круг и с помощью одной из его сторон повторите внешний левый край полоски.

2. Создайте ещё один круг и с его помощью повторите внутренний правый край полоски

Важно, чтобы этот круг в палитре слоёв находился ниже предыдущего

3. В режиме векторного редактора подправьте оба круга, чтобы они точно повторяли изгибы полоски. Для удобства укажите непрозрачность кругов на 50%, чтобы видеть и сами фигуры, и контуры мяча.

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


Иллюстрация: Виктор Засыпкин

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


Иллюстрация: Виктор Засыпкин

6. Поместите получившуюся фигуру на мяч. Если она залезает на шов, его можно немного уменьшить.

Видео: Виктор Засыпкин / Skillbox Media

Правая белая полоса

Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента :

Видео: Виктор Засыпкин / Skillbox Media

Белый шов

1. Белый шов повторяет форму основного. Возьмите поперечный шов, с зажатой клавишей Ctrl (⌘) выделите все точки снизу и удалите их. У вас должна получиться короткая линия длиной с поперечный шов.

2. Поместите линию на референс и, если нужно, сделайте её длиннее или короче в режиме векторного редактора.

3. Поместите вектор на нижний край шва и с помощью пера обведите и остальной контур шва.

4. С помощью пера повторите контуры всех стежков.

Видео: Виктор Засыпкин / Skillbox Media

В результате у вас получится примерно такой мяч:

Figma — что это за программа простыми словами

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

У фигмы есть 2-е отличительные особенности:

  • Возможность работать командой дизайнеров над одним проектом
  • Доступ к интерфейсу и макетам прямо через браузер

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

Видео-урок знакомства с интерфейсом Figma:

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

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

Официальное сообщество Figma в России

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

Кому будет полезно:

  • Молодым специалистам которые только начинают свою карьеру в дизайне;
  • Разработчикам, которые хотят разговаривать на ТЫ с дизайнерами, или хотят упростить процесс коммуникации;
  • Разработчикам которым интересно разрабатывать плагины для Фигмы;
  • Владельцам продукта — которые хотят понимать дизайнеров в проекции интерфейсов и дизайна;Ссылки на социальные сети:https://t.me/fof_moscowhttps://www.instagram.com/fofmoscow

Moscow | Figma
Friends of Figma

Figma logo

A new world of integrations

In addition to helping companies like Uber and Github customize their own workflows, our API will make it easier for third parties to build — and maintain — public Figma integrations. Zeplin just issued an overhaul of their integration with our new API, and three other products have introduced Figma functionality for the first time:

  1. Haiku — a tool for creating interactive, cross-platform UI components (available today)
  2. Pagedraw — a production ready React UI code generator (available today)
  3. Avocode — developer handoff tool (coming soon)

Integrations like these are more important than ever before for design. We live in a world with myriad workflows, where every team has different processes for getting things done. At Figma, it seems obvious to us that no single company is going to solve every problem, so tools need to work well together. By partnering with services like Haiku, Pagedraw, Avocode and Zeplin, we can unlock new use cases for our community and unblocks teams with other needs.

“Figma has long been one of our favorite design tools,” Zack Brown, the CEO of Haiku, said. “With this integration, we’re coupling the strength of Figma’s design collaboration platform with Haiku’s app production power.”

Чем отличается Figma от Photoshop

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

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

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

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

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

Хорошо, если у вас всего 1-2 макета, а представьте если таких макетов у вас 50 или более? В последних версиях фотошопа, есть возможность создавать смарт-объекты. Это некий аналог компонентов, но работать с ними не так удобно.

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

Стоимость

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

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

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

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