If you’re new to Figma and designing UIs, start with the Overview to understand the benefits of this feature, then skip to New to Figma and design for an introduction to Figma and some design tips and resources.

​
Overview

Figma is a widely used design tool. From their docs:

Figma Design is for people to create, share, and test designs for websites, mobile apps, and other digital products and experiences. It is a popular tool for designers, product managers, writers and developers and helps anyone involved in the design process contribute, give feedback, and make better decisions, faster. What is Figma?.

Using Bolt’s Figma integration, you can quickly load Figma designs into Bolt, and generate sites and UIs based on the designs. You can collaborate on and refine designs in Figma, before moving into Bolt for development.

Bolt uses Anima to handle turning Figma designs into apps.

​
Connect to Figma and import a frame

  1. On the Bolt homepage, click Import from Figma.
  2. Follow the steps to connect your Figma account.
  3. In the Choose a Figma frame window, paste the URL of the Figma frame you want to import.
  4. Click Import Figma frame into Bolt. Bolt processes the frame and generates a project based on the layout.

​
New to Figma and design

If you’re completely new to Figma, or to designing apps, this section contains information to get you started.

​
Key terms

  • UI: user interface. Usually means a GUI.
  • GUI: graphical user interface. Most interfaces are graphical, but sometimes people refer to GUIs to differentiate them from text-based interfaces such as command-line tools.
  • Web apps: interactive software applications that run in a browser. For example, Bolt itself is a web app.
  • Responsive design: a design that works on different devices and screen sizes.
  • Accessibility: making your design usable for everyone. For example, ensuring your color contrast is clear for people who are colorblind, or making your font size readable.

​
Figma frames

When importing from Figma, you use a single frame, not an entire Figma project.

Frames are layers that act as containers to organize other layers—such as shapes, images, and text—into cohesive designs. You can even nest frames within other frames, allowing you to create more complex designs. Frames in Figma design

To get the frame URL:

  1. Right-click the frame.
  2. Click Copy/Paste as > Copy link to selection.

"Screenshot of the menu steps to get the frame URL"

​
Responsive design

A responsive design is one that works on multiple screen sizes and orientations. For example, you need to make your design responsive if you want it to work well on both mobile and desktop.

There are two ways to do this:

  • Follow Anima’s guide to Create Responsive Designs in Figma. This is the best option: although it means taking more time to design your app, it gives you full control of the design in all sizes and on all platforms. It also saves tokens.
  • Load your design into Figma, then ask Bolt to make it responsive.

To check your responsive design in Bolt:

  1. In your app preview, click Responsive mode Monitor icons used to toggle responsive mode.
  2. Choose a device from the dropdown to see how your app appears, or choose Responsive, then resize by dragging the sides of the preview to check the appearance at different widths.

​
More resources

Figma can feel complex at first. Explore the Figma help center for learning resources and guidance.

For best results, follow Anima’s Figma best practices guide.

Accessibility is another big topic, but an important one: accessible designs allow disabled people to use your site, but they also make your site more user-friendly for everyone. Figma has a short introduction to Accessibility and inclusion in design, as well as links to more resources. For a much deeper dive, the W3C (the organization that develops web standards) provides a free edX course: W3Cx: Introduction to Web Accessibility.