|
|
|
|
|
|
|
|
- Overview
- What is Figma?
- How to import a Figma design?
- Prerequisites
- Setting up the Figma import process
- Importing the Figma design
- Import process in detail
Figma is an online design tool that allows you to create designs and prototypes in various fields, in particular for websites and applications.
Starting with WINDEV, WEBDEV and WINDEV Mobile 2024, you can transform Figma designs into windows and pages, and generate the corresponding controls while preserving their appearance. What is Figma? Figma is a vector graphics tool.
The designer creates shapes, lines, text, etc., and customizes them with high precision.
Elements can only be modified programmatically, and can overlap each other.
Everything is contained within given frames.
Designs can be accessed via a URL, which requires authentication. How to import a Figma design? Prerequisites To import Figma designs into WINDEV, WEBDEV or WINDEV Mobile, you first need to complete a couple steps in Figma. - Open Figma (Desktop or Web app).
- Log in or create a new account.
- Generate a Figma token. For more details, see Where to find the Figma key?.
Setting up the Figma import process Enter the Figma token in the general options of WINDEV, WEBDEV or WINDEV Mobile: - On the "Home" tab, in the "Environment" group, expand "Options" and select "General options of ...".
- Go to the "Third-party APIs" tab.
- In "Figma key", enter the previously generated Figma key.
Remark: You can click "Test" to check the validity of the Figma key.
Importing the Figma design The designer must provide a URL to the design to be imported.  A Figma design is a set of frames and elements used to define an interface. There are several steps to the import process: - Starting the import.
- Selecting the Figma element corresponding to the window to be created.
- Selecting the elements to be imported and associating them with WINDEV, WEBDEV or WINDEV Mobile controls.
Step 1: Starting the import: - On the "Project" tab, in the "Project" group, expand "Import":
 select "A Figma design .. Create a window". A new window is automatically created.
- In the window that appears:
- Specify the URL of the Figma design to be imported.
- Click "Load".
- Select the Figma frame you want to import.
Step 2: Selecting the Figma element corresponding to the window to be imported - In the Figma import window, select the frame corresponding to the window to be imported.
- Confirm ("OK" button).
Step 3: Selecting the elements to import: The window that appears allows you to associate Figma elements with the WINDEV, WEBDEV or WINDEV Mobile controls to be created. On the left, this window lists the Figma elements to be imported. On the right, it shows a preview of the window or page to be reproduced. To monitor every step of the import process, it is recommended to see the window that is being created and the control selection window. To import an element: - Expand the root of the Figma elements. All the elements are listed in a tree structure.
- Expand the different elements until you reach the element corresponding to the control you want to import. The control corresponding to the selected element is highlighted in the preview.
- Once the elements of the control have been identified, open the context menu of the branch and select the desired type of control.
- The type of control appears in the tree structure.
- Associate each element of the control with its type. For example, for an Edit control, you need to define its caption and input area. To do so, use the context menu.
- As you go along, the window is built according to the choices you make.
You can change certain choices to obtain the desired result.
- Once the desired elements have been created in the window or page, click "Finish" to confirm your choices.
Important: Style of created controls: The controls created by importing elements from Figma are associated with an override of a style present in the project's skin template or skin. This specific style can be added to the project styles and be reused on other controls. Remarks: - The choices made during the import process are saved in the project directory as a "*.wdfigma" file. When you open the import window, if you have already used the Figma address and frame, WINDEV, WEBDEV or WINDEV Mobile will prompt you to resume the initial import process.
- The import window includes several options:
 : Reloads the Figma design, preserving the choices you have already made. This option is particularly useful if the designer modifies the Figma design (for example, to group the elements of a control together in the same tree structure).  : Opens the Figma design in the Web application.  : Sets zoom to 100%, or adapts the preview to the available area, if the window or page to be imported is too large.
This page is also available for…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|