Skip to content
search icon
clear
Component Status

Setting up

There is no limit to the amount of projects a team can have, which is great since this will help your team stay very organised. Each file created, inside a project, must contain a cover page. A cover page sits on the first page of every file, and the page name should be Cover. Place the Default File Cover on the page and fill in the information. This allows others, now or later, to know who is responsible for this file and who to ask if they have questions. Change the status badge as the file progresses, remembering to change the background colour of the cover page to match the current badge colour.

FigmaExternal linkFigma setting up

Working clean

Use the pages on the left side of Figma to stay organised. There is not limit to the amount of pages you can create in Figma. Break apart main sections of your app, if necessary. Create a page for custom components to that project, if needed. Also, consider making a page for sketches and mess. Everything on pages that your team members will be using should be clean and organised.

Frames/artboards

Lay out your frames/artboards to go across the screen horizontally. Make sure that they are all aligned to the same top line and have equal spacing between each frame. Variation of the same page should be organised vertically under the page they relate to. This helps everyone switch between files and teams seamlessly.

Example: https://i.imgur.com/0tM7GGg.jpg

Grids

  • Change your nudge amount to 8px, learn how here.
  • Make sure to read the EDS grid guidelines before working with the EDS.
  • Always place everything on an artboard/frame.

Finding components

  • In the left sidebar, choose the tab Assets
  • You can then scroll through the list to find the component or you can use the search box.
  • Click and drag the component out to the frame you need it on.
  • Do not change the colours or layouts.

Component updates

Example: https://i.imgur.com/CZYkIWQ.png

From time to time, components will be updated in the EDS library---these can be reviewed, then accepted or denied. If accepted, all instances of the updated component(s) will be updated. This will not change the content that you have overridden, like custom colours or text. If denied, you will be asked again the next time you load the file. Read more about it on Figma.com: Accepting updates from your team library.

Clickbounds are hidden by default

When starting to use Figma, you might wonder why some components, such as buttons, have a larger bounding box than visual presence. This is due to a layer called the clickbound, which is 48px in height. This is in accordance with the WCAG guidelines for touch targets.

Placeholders

When building layouts, you can add a placeholder where you don’t have content ready. Placeholders are also built into many EDS components.

When a nested component is ready, simply replace the placeholder by dragging the component over the placeholder while holding down the shortcut described below.

  • Mac: Ctrl + Apple key
  • PC: Ctrl + Alt
Edit this page on GitHub