Classic
Design Structure & Responsiveness
Examples
Adding Borders

Adding Borders with Locofy.ai in Figma

Learn how to add borders to elements.

How to Add Borders

  1. Launch your project containing the elements you wish to add borders to.

  2. Click on the element to which you want to assign a border.

  1. With the element selected, open the Locofy.ai plugin.
  1. In the Locofy.ai interface, select the option labeled Step 3: Edit styling & layout (opens in a new tab).

  1. Scroll down to the stroke option. Remember, Locofy.ai supports only a single solid inside stroke at present. Once applied, your output will resemble the following:

Advanced CSS for Custom Borders

  1. For border customizations, proceed to "Advanced CSS properties".
  2. Input the desired property name and value to make custom borders beyond the typical inside stroke.
  1. Once advanced styles are applied, your output will have this appearance:
Creating a 3-Column Section using GridAdding Scrolling to Web